CSS 水平导航栏
水平导航栏
有两种方法可以创建水平导航栏。使用 **内联** 或 **浮动** 列表项。
内联列表项
创建水平导航栏的一种方法是将 <li> 元素指定为内联，以及上一页的“标准”代码
示例解释
display: inline;- 默认情况下，<li> 元素是块级元素。在这里，我们删除了每个列表项前后换行符，以便它们在一行上显示
浮动列表项
创建水平导航栏的另一种方法是浮动 <li> 元素，并为导航链接指定布局
示例解释
float: left;- 使用浮动使块级元素并排显示display: block;- 允许我们指定内边距（如果您需要，还可以指定高度、宽度、外边距等）padding: 8px;- 为每个 <a> 元素指定一些内边距，使它们看起来更好background-color: #dddddd;- 为每个 <a> 元素添加灰色背景色
提示： 如果您想要全宽背景颜色，请将背景颜色添加到 <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;
}
自己试试 »
活动/当前导航链接
将“活动”类添加到当前链接，以使用户知道他/她在哪个页面
右对齐链接
通过将列表项浮动到右侧 (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>
自己试试 »
边框分隔符
将 border-right 属性添加到 <li> 以创建链接分隔符
示例
/* 为所有列表项添加灰色右边界，除了最后一个项目（last-child） */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
自己试试 »
固定导航栏
使导航栏始终停留在页面顶部或底部，即使用户滚动页面也是如此
注意： 固定位置可能无法在移动设备上正常工作。
灰色水平导航栏
带细灰色边框的灰色水平导航栏示例
粘性导航栏
将 position: sticky; 添加到 <ul> 以创建一个粘性导航栏。
粘性元素根据滚动位置在相对位置和固定位置之间切换。它在视窗中满足给定偏移位置之前处于相对位置，然后它会“固定”到位（类似于 position:fixed）。
注意：Internet Explorer 不支持粘性定位。Safari 需要使用 -webkit- 前缀（见上面的示例）。您还必须至少指定一个 top、right、bottom 或 left 属性才能使粘性定位生效。
