8.2 列表的常见应用

列表在网页中的应用很广泛，如导航条、菜单栏。下面举一些案例来介绍。

8.2.1 使用列表实现纵向菜单

列表默认状态就是纵向排列的，所以实现纵向菜单很简单，这里只需要使用定位属性，把列表定位到相应的位置便可以实现纵向菜单布局。

【例8-4】（实例文件：ch08\Chap8.4.html）列表实现纵向菜单。

相关的代码实例请参考Chap8.4.html文件，在IE浏览器中运行的结果如图8-6所示。

图8-6 纵向菜单

8.2.2 使用列表实现新闻列表

用列表实现新闻列表是普遍存在的，因为用列表实现起来很方便，不需要大的布局改动便可以实现。

【例8-5】（实例文件：ch08\Chap8.5.html）列表实现新闻列表。

相关的代码实例请参考Chap8.5.html文件，在IE浏览器中运行的结果如图8-7所示。

图8-7 列表实现新闻列表

8.2.3 使用列表实现图片的排列

使用list-style-image属性，可以将列表前面的项目符号替换为任意的图片。代码如下：

      list-style-image: url(a);

其中a表示图片的路径。

【例8-6】（实例文件：ch08\Chap8.6.html）列表实现图片的排列。

相关的代码实例请参考Chap8.6.html文件，在IE浏览器中运行的结果如图8-8所示。

图8-8 列表实现图片的排列