1. 前言
几乎所有网站都有导航栏，导航栏可以快速的定位到网站特殊内容部分。
本篇我们就来使用CSS，制作一个比较好看的导航栏。
2. 目标效果
我看了下最常用的几个网站的导航栏，发现腾讯首页导航栏效果还不错，如下：
我们就来做一个效果差不多的导航栏。
3. 开发过程
3.1 定义列表
首先我们导航栏是由多个菜单组成的，这种包含多个子项目的HTML元素，我们可以选用无序列表来实现。(当然也可以选择其他元素，不过列表的语义跟菜单比较相似，推荐使用)。
编写无序列表代码如下：
<body>
<ul class="nav">
<li><a href="#">新闻</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">军事</a></li>
</ul>
</body>
我们为列表设置了nav样式类，后续通过该类设置列表的样式。此时效果如下：
3.2 调整高度与背景色
首先为nav设置高度与背景色，通过取色器取到颜色值为#1479D7，然后可以通过开发者工具，看到高度为44px，所以CSS修改为：
.nav {
height: 44px;
background-color: #1479D7;
}
此时效果如下：
3.3 调整内外边距
通过观察，我们发现导航栏距离浏览器左右边有一定距离，可以通过margin调整外边距，另外列表默认样式中含有内边距部分，会影响我们的布局，索性直接把内边距设为0。代码如下：
.nav {
margin: 0 100px;
padding: 0;
3.4 去掉项目符号
原来的效果中是没有项目符号的，我们通过list-style-type: none;去掉它，CSS修改为：
list-style-type: none;
3.5 设置列表项高度和位置
此时我们继续观察，目前我们的列表项是垂直排列的，但是实际上列表项需要水平排列。此处可以通过float:left;来实现列表项从左到右水平排列。float是浮动的意思，在之前的教程中没有介绍，此处大家理解下使用float后，元素从左到右浮动排列就行了。另外我们将列表项高度也设置为44px，跟导航栏高度保持一致。
.nav li {
float: left;
3.6 设置字体样式
通过开发者工具，我们能看到原来的字体样式和大小，此处直接借鉴过来，另外字体颜色毫无疑问是白色，然后还需要去掉超链接默认自带的下划线，所以将超级链接样式设置如下：
.nav li a {
font-family: SimSun, Arial, "Arial Narrow", HELVETICA;
font-size: 1.1em;
color: white;
text-decoration: none;
3.6 让文字垂直居中
我们知道导航栏高度为44px，那么如何让文字垂直居中呢？此处有一个非常常用的技术，就是设置元素行高度line-height，如果我们将元素行高度也设置为44px，意思是文本也占据44px的高度，那么文本自然就会处于44px高度的中间了。这是一种非常常用的垂直居中技术。如下：
.nav li a {
line-height: 44px;
3.7 设置列表项边距
目前列表项之间过于紧凑，我们可以通过margin增大边距，使其分散：
margin: 0 18px;
此时效果如下，可以感觉比较相似了：
3.8 添加悬停效果
当鼠标悬停时，文字颜色和背景色会变化，我们可以通过取色器获取悬停的颜色值。如下：
.nav li a:hover {
color: #14539A;
background-color: #CBE1ED;
此时当鼠标经过时，效果如下：
4. 小结
至此，我们设计的导航栏跟腾讯首页的导航栏已经高度相似了，我觉得效果还不错。
大家可以去看看各网站的导航栏，好看的尝试用CSS模仿一下。
![Docker：可视化管理工具LazyDocker[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)