
8.1 列表标签
列表(List)是用来将相关资料以条目的形式有序或者无序排列而形成的表。常用的列表有无序列表、有序列表和定义列表3种。
8.1.1 无序列表

无序列表<ul>是网页中最常用的列表之一,使用<li>标签罗列每个项目,每个项目前面默认的自带黑色实心圆。在CSS 3中可以通过list-style-type属性来定义无序列表前面的符号,无序列表中list-style-type属性值如表8-1所示。
表8-1 无序列表中list-style-type属性的属性值

【例8-1】(实例文件:ch08\Chap8.1.html)无序列表。

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

图8-1 无序列表
可以设置表8-1中的属性值来改变无序列表的默认样式,这里设置属性值为circle,代码如下:

在IE浏览器中运行的结果如图8-2所示。

图8-2 circle属性值效果
8.1.2 有序列表

有序列表标记<ol>可以创建具有顺序的列表,如每条信息前面加上1、2、3等,如果要改变有序列表前面的符号,同样需要使用list-style-type属性,只是属性值不同而已。
有序列表中list-style-typed的一些属性值如表8-2所示。
表8-2 有序列表中list-style-typed的一些属性值

【例8-2】(实例文件:ch08\Chap8.2.html)有序列表。

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

图8-3 有序列表
可以设置表8-2中的属性值来改变无序列表的默认样式,这里设置属性值为lower-alpha,代码如下:

在IE浏览器中运行的效果如图8-4所示。

图8-4 lower-alpha属性值效果
8.1.3 自定义列表

自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以<dl>标签开始,每个自定义列表项以<dt>开始,每个自定义列表项的定义以<dd>开始。
【例8-3】(实例文件:ch08\Chap8.3.html)自定义列表。

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

图8-5 自定义列表