CSS 导航栏

导航栏是一个链接列表，熟练使用导航栏，对于任何网站都非常重要

CSS 可以将导航栏美化成直观和好看，而不是一个枯燥的链接列表

垂直

水平

创建导航 HTML

一般情况下，导航栏都使用 <ul> 、<li> 和 <a> 三个 HTML 元素创建

下面的代码，我们使用这三个元素创建一个标准的 HTML 列表导航栏

<ul>
  <li><a href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

运行范例 »

删除列表的外边距 ( margin ) 、填充 ( padding ) 和列表样式 ( list-style )

list-style-type:none 用于移除列表前小标志

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

运行范例 »

修改 <a> 标签样式

修改 <a> 的 display CSS 属性显示为块状，同时设置宽度为 60px

a
{
    display:block;
    width:60px;
}

运行范例 »

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

垂直导航栏

因为 <li> 默认是块状的，会铺满水平的宽度，所以我们创建的导航默认就是垂直的

你可以点击完整样式的垂直导航栏的示例

注意请务必指定 <a> 元素在垂直导航栏的的宽度。如果省略宽度，IE6 可能产生意想不到的效果

鼠标移动到导航项时改变背景色

我们可以给 <a> 添加 hover 效果，当鼠标移动到元素上时该拜年背景色

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

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

/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}

运行范例 »

高亮当前导航项

给当前导航项的 <a> 元素添加一个 active 类，然后添加对应的 CSS 来高亮当前导航项

.active {
    background-color: #4CAF50;
    color: white;
}

运行范例 »

创建链接并添加边框

可以在 <li> 或 <a> 上添加 text-align:center 样式来让链接居中

可以在 <ul> 上添加 border 属性来让导航栏有边框

如果要在每个选项上添加边框，可以在每个 <li> 元素上添加 border-bottom

ul {
    border: 1px solid #555;
}

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

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

运行范例 »

全屏高度的固定导航条

一般情况下我们都会遇到这样的需求

左边是一个导航栏，全屏高度，且固定位置
右边是内容区域，可滚动

我们可以给 <ul> 元素添加 height 、position 属性来达到这样的效果

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

运行范例 »

水平导航栏

创建水平导航栏的方法有两种：使用 内联(inline) 或 浮动(float) 的列表项

一般情况下我们推荐使用 浮动( float )，因为这样我们可以设置导航项的宽度

内联列表项

内联列表项很简单，只要给 <li> 添加 display:inline CSS 样式即可

li
{
    display:inline;
}

运行范例 »

默认情况下，<li> 元素是块元素

通过添加 display:inline; 可以删除换行符之前和之后每个列表项，以显示一行

浮动列表项

大家都应该发现了，内联的列表项的宽度不一样，要解决这种 bug

我们只能使用 浮动 ( float ) 的方法

如果需要所有的链接宽度相等，可以浮动 <li> 元素，并指定 <a> 元素的宽度

li {
    float:left;
}

a {
    display:block;
    width:60px;
}

运行范例 »

float:left 使用浮动块元素的幻灯片彼此相邻
display:block 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度
width:60px 块元素默认情况下是最大宽度。我们要指定一个 60 像素的宽度

创建一个水平导航条，鼠标经过时改变背景色

下面的 CSS 样式创建了一个水平导航条，在鼠标移动到选项后修改背景颜色

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

/*鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #111;
}

运行范例 »

激活/当前导航条

在点击了选项后，可以添加 "active" 类来标准哪个选项被选中

.active {
    background-color: #4CAF50;
}

运行范例 »

链接右对齐

将导航条最右边的选项设置右对齐 (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:fixed 和 top:0 属性将导航条固定在顶部

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

运行范例 »

固定在底部

可以给 <ul> 添加 position:fixed 和 bottom:0 属性将导航条固定在底部

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

运行范例 »

灰色水平导航条

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

li a {
    color: #666;
}

运行范例 »

垂直

水平

创建导航 HTML

删除列表的外边距 ( margin ) 、填充 ( padding ) 和 列表样式 ( list-style )

修改 <a> 标签样式

垂直导航栏

鼠标移动到导航项时改变背景色

高亮当前导航项

创建链接并添加边框

全屏高度的固定导航条

水平导航栏

内联列表项

浮动列表项

创建一个水平导航条，鼠标经过时改变背景色

激活/当前导航条

链接右对齐

添加分割线

固定导航条

固定在底部

灰色水平导航条

CSS 基础教程

删除列表的外边距 ( margin ) 、填充 ( padding ) 和列表样式 ( list-style )