HTML5的列表样式

列表标签

在网页中，大部分信息都是列表结构，如菜单栏、图文列表、分类导航、新闻列表、栏目列表等。HTML5定义了一套列表标签，通过列表结构实现对网页信息的合理排版。

1.1 无序列表

<ul>标签表示HTML页面中项目的无序列表，一般会以项目呈现列表项，而列表项<li>使用标签定义无序列表基本使用格式：

<ul>
	<li>列表1</li>
	<li>列表2</li>
	<li>列表3</li>
</ul>

运行结果:

1.2 有序列表

在HTML标签中，<ol>标签用于定义有序列表，列表顺序以数字来显示，并且使用<li>标签来定义列表项
有序列表的基本语法格式如下：

<ol>
	<li>列表1</li>
	<li>列表2</li>
	<li>列表3</li>
</ol>

运行结果:

1.3 自定义列表

<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用

<dl>
	<dt>列表1</dt>
	<dd>列表2</dd>
	<d>列表3</dd>
</dl>

运行结果:

列表样式的属性

1、list-style-type

none	无标记
disc	默认，实心圆
circle	空心圆
square	实心正方形
decimal	数字
decimal-leading-zero	0开头的数字标记 （01,02,03…）
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-alpha	小写字母
upper-alpha	大写字母

我这里在下面单独演示一小部分。

<ul style="list-style-type: lower-alpha"><!--设置其列表标记为小写字母-->
    <li>列表1</li>
    <li>列表2</li>
</ul>

<ol style="list-style-type: upper-roman"><!--设置其列表标记为大写罗马数字-->
    <li>列表1</li>
    <li>列表2</li>
</ol>

运行结果:

2、list-style-image

当列表类型的项目符号不能满足需求时，还可以通过list-style-image属性定义图像，取代默认的列表项目符号。
不过在选择图片时，要注意选择合适尺寸的图片，因为list-style-image并没有提供设置图片大小的功能，也没有提供设置图片位置的能力。

3、list-style-position

list-style-position属性设置列表项目符号的位置及列表项的对齐方式，取值 outside | inside，默认值为 outside。

反正根据你所要的要求进行使用。