W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 导航栏



导航栏示例:


导航栏

熟练使用导航栏,对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。


导航栏 = 链接列表

导航栏需要HTML标准作为基础。

在我们的例子中我们将建立一个标准的HTML列表导航栏。

导航栏基本上是一个链接列表,所以使用 <ul> 和 <li> 元素非常有意义:

Example

<ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>
尝试一下 »

现在,让我们从列表中删除边距和填充:

Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
尝试一下 »

实例解析:

  • list-style-type: none; - 移除列表前小标志。一个导航栏并不需要列表标记
  • 移除浏览器的默认设置将边距设为0 margin: 0; 和填充设为0 padding: 0;

上面的例子中的代码是垂直和水平导航栏使用的标准代码。


垂直导航栏

上面的代码,我们只需要 <a> 元素的样式,建立一个垂直的导航栏:

Example

li a {
    display: block;
    width: 60px;
}
尝试一下 »

实例解析:

  • display: block; - 显示块元素的链接,让整体变为可点击链接区域(不只是文本),它允许我们指定宽度
  • width: 60px; - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度

你也可以设置 <ul> 的宽度,并删除 <a> 的宽度,因为他们会占用全宽度可用时显示为块元素。这将产生与我们以前的例子相同的结果:

Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
}

li a {
    display: block;
}
尝试一下 »

垂直导航栏实例

创建一个具有灰色背景颜色的基本垂直导航栏,当用户移动鼠标时,更改链接的背景颜色:

Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}
尝试一下 »

激活/当前导航链接

添加一个 "active" 类,让用户知道他/她在哪个页面上:

Example

.active {
    background-color: #4CAF50;
    color: white;
}
尝试一下 »

居中链接和添加边框

添加 text-align:center 使 <li> 或者 <a> 的链接居中。

添加 border 属性可以使 <ul> 添加一个边框。如果你只想在导航下面添加边框请使用 border-bottom 属性:

Example

ul {
    border: 1px solid #555;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}
尝试一下 »

全高度固定的垂直导航栏

Create a full-height, "sticky" side navigation:

Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
尝试一下 »

注意: 此实例可能无法在移动设备上正常工作。


水平导航栏

有两种方法创建横向导航栏。使用 inlinefloating 的列表项。

内联列表项

构建水平导航栏的一种方法是将除此之外的“标准”代码指定为内联元素:

Example

li {
    display: inline;
}
尝试一下 »

实例解析:

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

浮动列表项

创建水平导航条的另一种方法是浮动 <li>,并为导航链接指定布局:

Example

li {
    float: left;
}

a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}
尝试一下 »

实例解析:

  • float: left; - 使用浮动块元素的幻灯片彼此相邻
  • display: block; - 显示链接的块元素,让整个链接点击(不只是文字),它允许我们指定填充(高度、宽度、边距等)
  • padding: 8px; - 由于块元素占用了可用的全部宽度,所以它们不能彼此相邻。因此,指定一些填充,以使它们看起来好
  • background-color: #dddddd; - 向每个元素添加灰色背景颜色

Example

ul {
    background-color: #dddddd;
}
尝试一下 »

水平导航栏实例

创建一个具有黑色背景颜色的基本水平导航栏,当用户移动鼠标时,更改链接的背景颜色:

Example

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;
}
尝试一下 »

固定导航栏

当用户滚动页面时,使导航栏保持在页面的顶部或底部:

Fixed Top

ul {
    position: fixed;
    top: 0;
    width: 100%;
}
尝试一下 »

Fixed Bottom

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}
尝试一下 »

注意: 此实例可能无法在移动设备上正常工作。


灰色水平导航栏

下面是一个具有灰色边界的灰色水平导航栏的例子:

Example

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

li a {
    color: #666;
}
尝试一下 »

Examples

更多实例

下拉式导航栏
如何添加在导航栏的下拉菜单。