6.2 项目列表

传统的HTML语言提供了项目列表的基本功能，包括顺序式列表的<ol>标记和无顺序列表的<ul>标记等。当引入css后，项目列表被赋予了很多新的属性．甚至超越了它最初设计时的功能。本节主要围绕项目列表的基本css属性进行相关介绍，包括项目列表的编号、缩进和位置等。

一、列表的符号

通常的项目列表主要采用<ul>或者<ol>标记，然后配合<li>标记罗列各个项目。简单的列表代码如下，其显示效果如图1所示。

本案例文件位于网页学习网CSS教程资源“第6章\04\list.htm”。

折叠XML/HTML 代码复制内容到剪贴板

图1 普通的项目列表

在CSS中项目列表的编号是通过属性list-style-type来修改的。无论是<ul>标记还是<ol>标记．都可以使用相同的属性值，而且效果是完全相同的。例如修改<ul>标记的样式为：

折叠CSS 代码复制内容到剪贴板

此时项目列表将按照十进制编号显示，这本身是<ol>标记的功能。换句话说，在css中<ul>标记与<ol>标记的分界线并不明显，只要利用list-style-type属性，二者就可以通用，显示效果如图1所示。

当给<ul>或者<ol>标记设置list-style-type属性时，在它们中间的所有<li>标记都将采用该设置；如果对<li>标记单独设置list-style-type属性，则仅仅作用在该条项目上，如下所示。

折叠XML/HTML 代码复制内容到剪贴板

此时的显示效果可以看到第3项的项目编号变成了空心圆，但是并没有影响其他编号。

通常使用的list-style-type属性的值除了上面看到的十进制编号和空心圆以外还有很多，常用的如下表所示。

二、图片符号

除了传统的各种项目符号外，CSS还提供了属性list-style-image，可以将项目符号显示为任意的图片。例如有下面一段代码。

折叠XML/HTML 代码复制内容到剪贴板

在IE 8的显示效果如图2所示，在FireFox中的显示效果如图3所示，每个项目的符号都显示成了一个小图标，即icon1.jpg。

图2 图3 图片符号在IE8和FireFox中的效果

如果仔细观察图片符号在两个浏览器中的显示效果，就会发现图标与文字之间的距离有着明显的区别，因此不推荐这种设置图片符号的方法。如果希望项目符号采用图片的方式，则建议将list-style-type属性的值设置为none。然后修改<li>标记的背景属性background来实现。例如下面这个例子。

本案例文件位于网页学习网CSS教程资源“第6章\04\icon-style.htm”。

折叠XML/HTML 代码复制内容到剪贴板

这样通过隐藏<ul>标记中的项目列表，然后再设置<li>标记的样式，统一定制文字与图标之间的距离，就可以实现各个浏览器之间的效果一致，如图2所示。