导航栏是为了让访问者更清晰明朗的找到所需要的资源,是网站提供给用户的最直接最方便的访问网站内容的工具。
网站的主导航一般采用横向导航，其核心目标是设计一个简便快捷的操作入口，帮助用户快速到达网站中的相应内容。
今天我们将使用css制作横向导航栏，效果如下图：
在使用css制作导航栏之前，先看一下传统的表格式布局导航制作。
如果表格式布局实现如上图所示的导航，需要设计一个表格table。导航有5个栏目组成，需要设计一个1行5列的表格，并在每一个单元<td></td>标签中插入导航文字，然后 让每个单元格的文本居中,代码如下：
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><a href="http://www.xin126.cn">主页</a></td>
<td align="center"><a href="http://www.xin126.cn/list.asp?id=314">DIV+CSS布局</a></td>
<td align="center"><a href="http://www.xin126.cn/list.asp?id=313">网页配色</a></td>
<td align="center"><a href="http://www.xin126.cn/list.asp?id=247">建站入门</a></td>
<td align="center"><a href="http://www.xin126.cn/soft_list.asp?id=293">站长工具</a></td>
</tr>
</table>
<tr>
<td align="center"><a href="http://www.xin126.cn">主页</a></td>
<td align="center"><a href="http://www.xin126.cn/list.asp?id=314">DIV+CSS布局</a></td>
<td align="center"><a href="http://www.xin126.cn/list.asp?id=313">网页配色</a></td>
<td align="center"><a href="http://www.xin126.cn/list.asp?id=247">建站入门</a></td>
<td align="center"><a href="http://www.xin126.cn/soft_list.asp?id=293">站长工具</a></td>
</tr>
</table>
而使用CSS,可以实现表现和内容的分离，代码示例：
<div id="nav">
<ul>
<li><a href="http://www.xin126.cn">主页</a></li>
<li><a href="http://www.xin126.cn/list.asp?id=314">DIV+CSS布局</a></li>
<li><a href="http://www.xin126.cn/list.asp?id=313">网页配色</a></li>
<li><a href="http://www.xin126.cn/list.asp?id=247">建站入门</a></li>
<li><a href="http://www.xin126.cn/soft_list.asp?id=293">站长工具</a></li>
</ul>
</div>
<ul>
<li><a href="http://www.xin126.cn">主页</a></li>
<li><a href="http://www.xin126.cn/list.asp?id=314">DIV+CSS布局</a></li>
<li><a href="http://www.xin126.cn/list.asp?id=313">网页配色</a></li>
<li><a href="http://www.xin126.cn/list.asp?id=247">建站入门</a></li>
<li><a href="http://www.xin126.cn/soft_list.asp?id=293">站长工具</a></li>
</ul>
</div>
加入一些简单的CSS代码：
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
</style>
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
</style>
效果如下：
默认ul下的li对象，每一个列表项从上至下的排列，所以效果如上图。为了让ul下的li对象横向排列，我们给#nav li指定float:left;
#nav ul li { float:left; }
导航居中显示，需要设置#nav 的 margin:0 auto;
#nav { margin:0 auto;width:600px; border: 1px solid #CCC; height:26px; background: #eee;}
#nav ul { list-style: none; margin: 0px; padding: 0px; }
#nav ul { list-style: none; margin: 0px; padding: 0px; }
上面的list-style: none; margin: 0px; padding: 0px;去除浏览器默认ul显示样式以及外边距、内边距。
总导航栏宽度600，5个栏目，一个栏目宽度为120px，并且设置栏目中文字居中显示代码如下：
#nav ul li a {width:120px; display:block; height: 26px; line-height: 26px; text-align:center; float:left;}
当鼠标放上去的时候背景颜色和文字颜色都有变化：