HTML+CSS中的列表符号类型及用法

HTML中列表的一个突出的特点就是每个列表项之前都有一个指示符号，在第7章介绍列表的时候使用的是HTML原生的type属性来将列表的指示符号设置为圆点、圆圈、正方形等。

CSS中的list-style-type属性可以用于定义更多的列表指示符号。这个属性的取值是一系列枚举值，不管是有序列表还是无序列表均可以使用这些符号样式。该属性的常用枚举值如下表所示：

表12.2.1　list-style-type属性的常用枚举值

动手写12.2.1 以数字为指示符的无序列表

“动手写12.2.1”中存在一个无序列表，我们将list-style-type属性的值设置为decimal，这样它就具有了原生HTML的有序列表才有的样式。本例效果如图12.2.1所示：

图12.2.1　无序列表使用有序列表样式

动手写12.2.2 以实心正方形为指示符的有序列表

同理，我们也可以为有序列表定义无序列表的样式。“动手写12.2.2”中存在一个有序列表，我们将list-style-type属性的值设置为square，这样它就具有了原生HTML的无序列表才有的样式。本例效果如图12.2.2所示：

(www.xing528.com)

图12.2.2　有序列表使用无序列表样式

动手写12.2.3 不显示列表指示符

列表还经常用于表示菜单按钮、链接条目等场景，在这些场景下，一般不会展示列表的指示符号。如“动手写12.2.3”所示，可以使用list-style-type的none枚举来去除原生的列表指示符样式。本例的效果如图12.2.3所示：

图12.2.3　无指示符号样式的列表

除了已存在的指示符号，CSS还可以定义原生HTML不具备的指示符号，其中有被绝大部分浏览器支持的lower-greek（希腊字母）、armenian（亚美尼亚字母）、georgian（格鲁吉亚字母）等，也有IE不支持的cjk-ideographic（中文数字）。

动手写12.2.4 以中文数字为指示符号

“动手写12.2.4”中的列表符号在Chrome、Firefox等浏览器下显示为中文数字，在IE下则显示为实心圆点。在实际项目中，应避免使用这种不完全支持的枚举值，以免出现意料之外的显示结果。本例在Chrome中的效果如图12.2.4所示：

图12.2.4　以中文数字作为指示符号的列表