导航栏是网页必备。但是很多童鞋总是做不出来。其实基本的导航栏只需要三步。一起围观学习一下吧。
分析
开始之前，一定要先分析导航栏基本组成和样式。
如图所示导航栏有百度三部分构成：
- 导航栏
- 高度：37px
- 背景色：#f8f8f8
- 超链接
- 字体大小：16px
- 字体颜色：#666
- 内边距：左右14px
注意：每个超链接文字间隔28px，所以把它分成左右14px内间距是极好的
- 激活状态超链接
- 字体颜色：#000
- 字体粗细：加粗
- 下边框颜色：#3388ff
编码
HTML
首先，我们先完成导航栏的HTML代码。通常，大家习惯使用无序列表实现导航栏。下面是导航栏的HTML代码，简单吧！只需要把导航超链接放到li就好了。
<nav>
<ul>
<li><a href="#">网页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">知道</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">文库</a></li>
<li><a href="#">更多»</a></li>
</ul>
</nav>
CSS
初始化
接着我们的CSS代码，先来个初始化。通常，大家会把标签自带的内外边距初始化为0;把超链接默认的下划线也去掉;经常也会把列表的项目符号清除。
* {
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
顺便加上清除浮动的clearfix类
.clearfix{
overflow: auto;
zoom: 1;
}
效果图如下：
导航栏
下面进入正题，先让导航栏的超链接在一排上。只需要给li加上浮动即可。
li{
float: left;
}
使用浮动，必须清除浮动，给li的父元素加上清除浮动clearfix类。
<nav>
<ul class="clearfix">
<li><a href="#">网页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">知道</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">文库</a></li>
<li><a href="#">更多»</a></li>
</ul>
</nav>
效果如图，导航栏的超链接排在一行上了。
详细样式
接下来，我们根据分析的结果给导航栏的各部分加上字体、颜色和边距等样式吧。
- 导航栏样式
nav{
background-color: #f8f8f8;
height: 37px;
line-height: 37px;
}
- 超链接样式
li a{
font-size: 16px;
color: #666;
padding: 0 14px;
}
- 激活状态下边框
li a.active{
font-weight: bold;
color: #000;
padding-bottom: 9px;
border-bottom: 2px solid #3388ff;
}
把ative类加到首页超链接上。
<nav>
<ul class="clearfix">
<li><a class="active" href="#">网页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">贴吧</a></li>
<li><a href="#">知道</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">文库</a></li>
<li><a href="#">更多»</a></li>
</ul>
</nav>
注意：蓝色边框的默认紧贴文字下面，需要调整内下边距。
大功告成，效果如下：
进阶
大家是否看到蓝色边框其实不是在导航栏上的，而是紧贴着导航栏底部。下次我们来处理一下。