CSS列表

1. 咖啡
2. 茶
3. 可口可乐

• 咖啡
• 茶
• 可口可乐

HTML列表和CSS列表属性

在HTML中，有两种主要类型的列表：

• 无序列表(<ul>) -列表项标有子弹
• 有序列表(<ol>) -列表项都标有数字或字母

在CSS列表属性，您可以：

• 设置不同的列表项标记为有序列表
• 设置不同的列表项标记为无序列表
• 图像设置为列表项标记
• 添加背景颜色列表和列表项

不同的列表项标记

该list-style-type属性指定列表项标记的类型。

下面的例子显示了一些可用的列表项标记：

注意：有些价值观是无序列表，以及一些为有序列表。

图像作为列表项标记

该list-style-image属性指定的图像作为列表项标记：

放置列表项标记

该list-style-position属性指定列表项标记是否出现内部或内容流之外：

列表 - 速记属性

该list-style属性是一个速记属性。 它是用来设置在一个声明中的所有列表属性：

当使用速记属性，该属性值的顺序是：

• list-style-type （如果指定了目录样式图像，将显示该属性的值，如果不能显示由于某种原因图像）
• list-style-position （指定列表项标记是否应出现内部或外部的内容流）
• list-style-image （指定为列表项标记的图像）

如果属性值高于缺失之一，缺少的属性的默认值将被插入，如果有的话。

造型列表颜色

我们还可以列出款式颜色，使它们看起来更有趣一点。

任何加入<ol>或<ul>标记，影响整个列表，而属性添加到<li>标记会影响个别列表项：

更多示例

全宽边框列表
此示例演示如何创建没有子弹接壤列表。

所有不同的列表项标志物清单
这个例子演示了所有CSS不同的列表项标记。

自测练习用！

练习1» 练习2» 练习3»

所有的CSS列表属性