22、利用 CSS 设计网页：列表样式与伪类伪元素的应用

利用 CSS 设计网页：列表样式与伪类伪元素的应用

1. 列表样式设计

1.1 选择列表样式类型

在网页设计中，列表样式的选择对于页面的美观和可读性至关重要。要改变有序或无序列表中显示的标记，可以使用 list-style-type 属性，其语法为 list-style-type: type; ，其中 type 可以是以下值之一：
| list-style-type | 标记 |
| — | — |
| disc | z |
| circle | { |
| square | „ |
| decimal | 1, 2, 3, 4, … |
| decimal-leading-zero | 01, 02, 03, 04, … |
| lower-roman | i, ii, iii, iv, … |
| upper-roman | I, II, III, IV, … |
| lower-alpha | a, b, c, d, … |
| upper-alpha | A, B, C, D, … |
| lower-greek | , , , , … |
| upper-greek | A, B, , , … |
| none | 不显示标记 |

例如，要显示一个带有字母标记的有序列表，可以使用以下样式：

ol {
    list-style-type: upper-alpha;