CSS 水平导航栏

水平导航栏

有两种方法可以创建水平导航栏。使用排队或者漂浮的列出项目。

内联列表项

构建水平导航栏的一种方法是将 <li> 元素指定为内联元素，以及上一页中的 "standard" 代码：

示例

li {
display: inline;
}

亲自试一试 »

示例解释：

display: inline;- 默认情况下，<li>元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，以将它们显示在一行上

浮动列表项目

创建水平导航栏的另一种方法是浮动 <li> 元素，并指定导航链接的布局：

示例

li {
float: left;
}

a {
display: block;
padding: 8px;
background-color: #dddddd;
}

亲自试一试 »

示例解释：

float: left;- 使用 float 使块元素彼此相邻浮动
display: block;- 允许我们指定填充（如果需要，还可以指定高度、宽度、边距等）
padding: 8px;- 在每个 <a> 元素之间指定一些填充，以使它们看起来不错
background-color: #dddddd;- 为每个 <a> 元素添加灰色背景颜色

提示：如果您想要全角背景颜色，请将背景颜色添加到 <ul> 而不是每个 <a> 元素：

示例

ul {
background-color: #dddddd;
}

亲自试一试 »

水平导航栏示例

创建一个具有深色背景颜色的基本水平导航栏，并在用户将鼠标移到链接上时更改链接的背景颜色：

示例

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;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}

亲自试一试 »

活动/当前导航链接

将 "active" 类添加到当前链接，让用户知道他/她在哪个页面：

示例

.active {
background-color: #04AA6D;
}

亲自试一试 »

右对齐链接

通过将列表项浮动到右侧来右对齐链接（float:right;）：

示例

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

亲自试一试 »

边界分隔线

添加border-right<li> 属性来创建链接分隔线：

示例

/* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}

li:last-child {
border-right: none;
}

亲自试一试 »

固定导航栏

使导航栏保持在页面的顶部或底部，即使用户滚动页面时也是如此：

固定顶

ul {
position: fixed;
top: 0;
width: 100%;
}

亲自试一试 »

固定底

ul {
position: fixed;
bottom: 0;
width: 100%;
}

亲自试一试 »

笔记：固定位置可能无法在移动设备上正常工作。

灰色水平导航栏

带有细灰色边框的灰色水平导航栏的示例：

示例

ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}

li a {
color: #666;
}

亲自试一试 »

粘性导航栏

添加position: sticky;到 <ul> 创建粘性导航栏。

粘性元素根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中满足给定的偏移位置 - 然后它"sticks"就位（如position:fixed）。

示例

ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}

亲自试一试 »

笔记：Internet Explorer 不支持粘性定位。 Safari 需要 -webkit- 前缀（参见上面的示例）。您还必须至少指定以下一项top,right,bottom或者left以便粘性定位发挥作用。

码农教程 - 一技在手,衣食无忧!

CSS 水平导航栏

水平导航栏

内联列表项

示例

浮动列表项目

示例

示例

水平导航栏示例

示例

活动/当前导航链接

示例

右对齐链接

示例

边界分隔线

示例

固定导航栏

固定顶

固定底

灰色水平导航栏

示例

粘性导航栏

示例

更多示例

响应式顶部导航

响应式侧导航

下拉导航栏