网页设计与制作中的有序列表及样式设置

有序列表，顾名思义就是每一项都和顺序有关的。最常见的情况是，会议纲要或者在领导的讲演稿中，文章一般都需要列出个“一二三”来，有序列表就是在这里大派用场的。

1.基本操作

有序列表在Word中用“编号”来做，在HTML中我们怎么实现呢？

在浏览器中打开这个网页，其效果如图3-1所示。

图3-1　有序列表

有序列表的结构非常简单，具体结构如下：

<ol>

<li>内容 1</li>

<li>内容 2</li>

……

<li>内容 n</li>

</ol>

“<ol></ol>”就是有序列表（Ordered List）的标记，包含在“<ol></ol>”中的“<li>”标记就是列表项（List Item），一个“<li>”就代表一个条目。上面HTML中使用了4个条目，所以编号从1到4。

2.改变序号(www.xing528.com)

有时候我们要用英文字母或是罗马字母做序号，那么用HTML该怎么做呢？

在浏览器中打开这个网页，其效果如图3-2所示。

图3-2　改变序号

可以发现，如果想要更换序号的样式，只要使用有序列表“<ol>”标记的“type”属性就可以了，比如设置序号为英文字母（“A”为大写，“a”为小写）或罗马数字（“I”为大写，“i”为小写）。

3.指定序号

在实际应用中，还可能需要以指定的序号开始，利用“<ol>”标记的“start”属性就能实现。

在浏览器中打开这个网页，其效果如图3-3所示。

图3-3　指定序号

代码中“<ol>”标记的“start”属性用来控制序号的开始位置，其结构为start=n，其中n为数字或者英文字母、罗马数字都可以，不过一般常用的是数字，在上面代码中type=A且start=3，即序号样式为英文大写，而且从第三个字母开始，所以第一个列表项的序号是“C”。