Question

我是UI或Web开发的新手。我正在尝试制作简单的简单页面。所以我采用http://ionicframework.com/getting-started/页面。并尝试在我的演示应用程序中进行相同的操作。所以我将整个页面拆分为三个部分标题，竞争和页脚。所以我首先为标题工作。我面临一些问题。

在标题上有选项＆＃34; 产品，入门，文档＆＃34; 等，当悬停事件发生时它们会变白。你能告诉我将如何在我的演示中做。< / LI>
如何在右侧设置产品，入门，文档＆＃34; 的位置？
如何在下标题中添加搜索输入字段。这是我的代码。

http://codepen.io/anon/pen/rabRoO

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body >
 <div >
   <div class="header">
  <a href="#">product</a>
    <a href="#">Getting Started</a>
     <a href="#">docs</a>
    <a href="#">showcase</a>
    <a href="#">forum</a>
    <a href="#">Blog</a>
  </div>
   <div class ="container">
     <h1>Getting Started with Ionic</h1>
     <p>Build mobile apps faster with the web technologies you know and love</p>
      <div class ="smallheader">
     <div class="col-sm-8 news-col">
          Questions? Head over to our <a href="http://forum.ionicframework.com/">Community Forum</a> to chat with others using the framework.
        </div>
     </div>
   </div>

 </div>



  </body>
</html>

Answer 1

你的意思是css悬停？那样：

.header:hover {
  border :5px solid green;
}

Answer 2

（1）菜单项样式：首先应将链接包装到列表中，并在display: inline-block;上使用<li>最常用于此类作业。

<ul class="navbar">
    <li><a href="#">product</a></li>
</ul>

（2）要将项目对齐到右边：只需将text-align: right;添加到<ul>，内部的所有<li>都会右对齐，因为我们已将它们作为内联元素

更新了演示：http://jsfiddle.net/oLws3fsk/

（3）您的代码中没有搜索框，但您只需将其添加到导航栏下即可。

如何在html5中添加悬停效果？

2 个答案: