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