7.6　用于导航的行内列表

7.6　用于导航的行内列表

对于一个网站来说，导航菜单是不可缺少的，导航菜单的风格往往决定了整个网站的风格，所以制作样式各异的导航条是网页设计者的非常重要的工作。

“人人影视”网站页眉的效果如图7-10所示。

图7-10　“人人影视”网站页眉

图7-10中框出来的部分就是网页的主导航条。制作这样的导航条，可以通过列表及CSS属性来实现，这也是列表最大的用处之一。本节主要讨论用于导航的行内列表。

创建图7-10所示的导航条，操作步骤如下：

（1）首先建立HTML相关结构，将菜单的各个项用无序列表＜ul＞表示，代码如下：

这里的＜a＞＜/a＞表示超链接，这部分内容将在第8章详细介绍。第1个步骤完成时看到的就是普通的超链接列表，如图7-11所示。

图7-11　项目列表

（2）开始设置CSS样式，首先定义＜nav＞相关属性以及文字的字体，再设置项目列表＜ul＞的list-style-type属性为none（不显示项目符号），＜li＞的内边距padding以及display属性为inline（列表项显示在一行内），这两点是实现行内导航非常重要的设置。CSS代码如下：

设置完成后运行代码，结果如图7-12所示。

图7-12　行内项目列表

（3）对超链接＜a＞标签设置样式，包括字体颜色color、下划线设置等，CSS代码如下：

完成后的网页导航条效果如图7-13所示。

图7-13　行内导航条