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元素即可。

感冒了 人都没力气了，头也晕晕的，今天就先到这了。...