CSS网站元素设计-横向导航

网站导航是网站中最重要的元素，是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航等3中常见形式.
1. 横向导航
使用CSS布局的形式制作导航与Tbale布局有很大的区别，网站除了页面布局之外，最重要的就是导航部分，在这一步应该先制作出个简单明快的导航系统，然后一步一步的完成具有设计效果的最终导航。
如下代码所示例

<ul id="nav"> <li><a href="#">首页</a></li> <li><a href="#">文章</a></li> <li><a href="#">参考</a></li> <li><a href="#">BLOG</a></li> <li><a href="#">论坛</a></li> <li><a href="#">联系</a></li> </ul>

元素ul是CSS布局中使用得很广泛的一种元素，主要用来描述列表内容，每一个<ul></ul>表示其中的内容为一个列表块，块中的每一条列表数据用<li></li>来描述.



如上代码运行后所示，ul默认样式就加上了圆点状序号，而且默认为从上至下排列.
对于简单的 只有文字导航来说，相对于DIV的复杂实现，ul更为灵活.
加入如下样式

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

可以看到显示效果如下



在样式代码中，指定了float:left;属性，使得下一个对象贴进该对象的右边。
导航的关键在于a连接对象的样式控制，在这里使用#nav li a{} 给li下的每一个a链接对象编写了样式.
display:block 使得a链接对象的显示方式由一段文本改为一个块状对象，和div的特性相同，div默认状态下就是一个块状对象，而默认状态下a链接对象只是显示为一个普通文本，这样就没有办法使得a链接对象能够象一个方块状按钮一样去运作，使用display:block之后，就可以用CSS的外边距，内边距、边框等属性给a链接.
再给样式表中加上

#nav li a:hover{ background-color:#bbbbbb; color:#FFFFFF; }

可以看到，鼠标移的时候，就会出现响应而改变颜色了。
为了让某一个频道成为一个当前所属的频道，这个频道必须有一个和其他频道不一样的背景颜色。

<li><a href="#" id="current">首页</a></li> #nav li a#current{ background-color:#2788da; color:#FFFFFF; } #nav { height:26px; border-bottom:2px solid #2788da; }

修改后即可实现，每当切换一个频道页面时，只需将id=”current“移到当前频道所在a元素即可。
感冒了 人都没力气了，头也晕晕的，今天就先到这了。...