网站导航是网站中最重要的元素,是网站提供给用户的最直接最方便的访问网站内容的工具。网站导航从形式上主要由横向导航、纵向导航、下拉及多级菜单导航等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元素即可。