8.8　使用列表制作导航栏

8.8　使用列表制作导航栏

第7章介绍过用列表制作行内导航的方法，本节介绍使用列表制作基本的竖直排列导航菜单。当项目列表的list-style-type属性值为none时，通过CSS属性变化可以制作出各式各样的菜单和导航栏。

下面来看一个实例，操作过程如下：

（1）建立HTML相关结构，将导航栏的各项用项目列表＜ul＞表示，代码为：

此时页面的效果如图8-16所示，这只是普通的项目列表。

（2）设置CSS样式，首先把页面的背景色设置为浅色，代码如下：

（3）设置整个＜nav＞的宽度及字体，设置项目列表＜ul＞的属性，将项目符号定义为不显示，这时的浏览效果如图8-17所示。代码如下：

图8-16　项目列表

图8-17　设置了基本样式的列表

（4）为＜li＞标签添加下边框线，使各个超链接能分隔开，并且对超链接＜a＞标签进行设置，代码如下：

此时效果如图8-18所示。

（5）设置超链接的链接状态样式，以实现动态导航菜单的效果，代码如下：

最后的运行结果如图8-19所示。

图8-18　区块式的超链接

图8-19　导航菜单