列表

首页 > 列表

短 刷 阅 编 历

本页面正在施工中！您也可 点击此处 协助编辑，感谢各位对wiki的贡献。

×

CSS 列表

属性	描述
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image	将图像设置为列表项标志。
list-style-position	设置列表中列表项标志的位置。
list-style-type	设置列表项标志的类型。

CSS 列表属性作用如下：

• 设置不同的列表项标记为有序列表
• 设置不同的列表项标记为无序列表
• 设置列表项标记为图像

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

• 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表 ol - 列表项的标记有数字或字母
• 使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

无序列表如下所示:

实例

<ul style="list-style:circle">
<li>无序列表A</li>
<li>无序列表B</li>
<li>无序列表C</li>
</ul>
<ul style="list-style:square">
<li>无序列表A</li>
<li>无序列表B</li>
<li>无序列表C</li>
</ul>

效果

• 无序列表A
• 无序列表B
• 无序列表C

• 无序列表A
• 无序列表B
• 无序列表C

尝试一下 »

有序列表如下所示:

实例

<ol style="list-style:decimal">
<li>有序列表A</li>
<li>有序列表B</li>
<li>有序列表C</li>
</ol>
<ol style="list-style:upper-roman">
<li>有序列表A</li>
<li>有序列表B</li>
<li>有序列表C</li>
</ol>

效果

1. 有序列表A
2. 有序列表B
3. 有序列表C

1. 有序列表A
2. 有序列表B
3. 有序列表C

尝试一下 »

相同效果

• wiki中可使用简单的wikitext替换部分html，但只会使用默认css效果而无法直接定义style，例如：

属性	wiki	html	效果
无序列表	*无序列表	<ul><li>无序列表</li></ul>	无序列表
有序列表	#有序列表	<ol><li>有序列表</li></ol>	有序列表