主题：[ 原创]css简单设计网站横向导航

网站导航作为一个网站中最重要的元素，直接导航着访问者对网站内容的访问的工具。今天要和大家分享一下网站横向导航的设计，当然，只是一种初级的设计样式：

我们都知道css布局的特点就是帮助我们实现表现与内容的分离，异于我们经常在html使用的table属性。那下面先认识一下内容部分的代码如何编写：

<ul id="nav">
  <li><a href="http://www.moneyding.cn"id="current" >首页</a></li>
  <li><a href="http://www.moneyding.cn/tags.asp">tagcloud</a></li>
  <li><a href="http://www.moneyding.cn">留言板</a></li>
  <li><a href="http://www.near360.com">身边网</a></li>
  <li><a href="http://www.moneyding.cn/sitemap.xml">sitemap</a></li>
  <li><a href="http://www.moneyding.cn">联系</a></li>
  </ul>

在代码当中，我们为ul定义了一个id叫nav，同时也为在第一个a标签中，添加了一个新的id叫current，表示当前页。

然后下面继续介绍css部分的编写：

#nav li{
float:left;
}
#nav li a{
color:#000000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#ececec;
margin-left:2px;
}
#nav li a:hover{
background-color:#bbbbbb;
color:#ffffff;
}
#nav li a#current{
background-color:#2788da;
color:#ffffff;
}
#nav{
height:26px;
border-bottom:2px solid #2788da;
}

float 定义了导航栏自身向左浮动，text-decoration:noe去掉了本身ul属性的黑点，display:block使得1链接对象的显示方式由一段文本改为一个块状对象，使用了display:block之后，a链接对象将能够像div和其他源于一样成为一个块状对象，就可以使用css的外边距、内边距、边框等属性给a链接标签加上一系列的样式了。至于border-bottom就是一条下边看框罢了。然后最后的效果就是下图：