成绩单是大家比较熟悉的有序列表了，从第一名一直排到最后一名。在网页设计中，有序列表，相对于无序列表而言，最大的区别就是有序列表是带有排名性质的列表。

<ol>    

<li>张三</li>    

<li>李四</li>    

<li>王五</li>

<li>赵六</li>

</ol>

<ol>标签表示有序列表的集合，其必须包含<li>标签，具体形式与无序列表一样，但浏览器解析有序列表时的默认效果却是不同的。在设计网页时，有序列表也可分为一级有序列表和多级无序列表，浏览器默认解析时都是将有序列表以阿拉伯数字表示，并增加缩进。

<ol>    

<li>一级有序列表默认解析效果</li>    

<li>一级有序列表默认解析效果</li>    

<li>一级有序列表默认解析效果</li>

</ol>

多级有序列表在浏览器中默认解析效果如图下所示。

<ol>    

<li>多级有序列表默认解析效果1</li>    

<li>多级有序列表默认解析效果1

<ol>            

<li>多级有序列表默认解析效果2</li>            

<li>多级有序列表默认解析效果2                

<ol>                    

<li>多级有序列表默认解析效果3</li>                    

<li>多级有序列表默认解析效果3</li>                    

<li>多级有序列表默认解析效果3</li>                

</ol>            

</li>            

<li>多级有序列表默认解析效果2</li>        

</ol>    

</li>    

<li>多级有序列表默认解析效果1</li></ol>

在网站建设时，有序列表在多级的情况下，理论上应该是随着层级的增加而出现1.1或者1.1.1之类的数字，但浏览器却无法在网页中直接解析出这样的效果，如果需要使用1.1或者1.1.1之类的数字表示方式，那么就只能使用CSS、JavaScript或者手工加入。

【示例】在上面示例基础上，在文档中添加如下CSS样式代码，可以设计数字目录效果。

<style type="text/css">

ol { list-style:none;}                                             /*清除默认的序号*/

li:before {color:#f00; font-family:Times New Roman;}               /*设计层级目录序号的字体样式*/

li{counter-increment:a 1;}                                         /*设计递增函数a，递增起始值为1 */

li:before{content:counter(a)". ";}                                 /*把递增值添加到列表项前面*/

li li{counter-increment:b 1;}                                      /*设计递增函数b，递增起始值为1 */

li 

li:before{content:counter(a)"."counter(b)". ";}                 /*把递增值添加到二级列表项前面*/

li li li{counter-increment:c 1;}                                   /*设计递增函数c，递增起始值为1 */

li li

 li:before{content:counter(a)"."counter(b)"."counter(c)". ";}  /*把递增值添加到三级列表项前面*/</style>