CSS 水平导航栏
水平导航栏
有两种方法可以创建水平导航栏。使用 行内 或 浮动 列表项。
行内列表项
构建水平导航栏的一种方法是指定 <li> 元素为行内元素，除了前一页的“标准”代码。
示例说明
display: inline;- 默认情况下，<li> 元素是块级元素。在这里，我们消除了每个列表项之前和之后的换行符，将它们显示在同一行上。
浮动列表项
创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接指定布局。
示例说明
float: left;- 使用 float 使块级元素并排浮动。display: block;- 允许我们指定内边距（以及高度、宽度、外边距等，如果您想要的话）。padding: 8px;- 在每个 <a> 元素之间指定一些内边距，使其看起来更美观。background-color: #dddddd;- 为每个 <a> 元素添加灰色背景色。
提示：如果您想要一个全宽背景色，请将 background-color 添加到 <ul> 而不是每个 <a> 元素。
水平导航栏示例
创建一个带有深色背景色的基本水平导航栏，并在用户将鼠标悬停在链接上时更改链接的背景色。
示例
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鼠标悬停时将链接颜色更改为 #111（黑色）*/
li a:hover {
background-color: #111;
}
自己动手试一试 »
活动/当前导航链接
向当前链接添加“active”类，让用户知道他们正在哪个页面。
右对齐链接
通过将列表项向右浮动（float:right;）来右对齐链接。
示例
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li style="float:right"><a class="active" href="#about">关于</a></li>
</ul>
自己动手试一试 »
边框分隔符
添加 <li> 的 border-right 属性来创建链接分隔符。
示例
/* 为所有列表项添加灰色右边框，最后一个列表项除外 (last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
自己动手试一试 »
固定导航栏
使导航栏在用户滚动页面时也能固定在页面顶部或底部。
注意：固定定位在移动设备上可能无法正常工作。
灰色水平导航栏
一个带有细灰色边框的灰色水平导航栏示例。
固定导航栏
向 <ul> 添加 position: sticky; 来创建固定导航栏。
固定元素根据滚动位置在相对和固定之间切换。它定位为相对，直到达到视口中的给定偏移位置 - 然后它“固定”到位（类似 position:fixed）。
注意：Internet Explorer 不支持粘性定位。Safari 需要 -webkit- 前缀（请参阅上面的示例）。您还必须指定 top、right、bottom 或 left 中的至少一个才能使粘性定位生效。
