成績(jī)單是大家比較熟悉的有序列表了，從第一名一直排到最后一名。在網(wǎng)頁(yè)設(shè)計(jì)中，有序列表，相對(duì)于無(wú)序列表而言，最大的區(qū)別就是有序列表是帶有排名性質(zhì)的列表。

<ol>    

<li>張三</li>    

<li>李四</li>    

<li>王五</li>

<li>趙六</li>

</ol>

<ol>標(biāo)簽表示有序列表的集合，其必須包含<li>標(biāo)簽，具體形式與無(wú)序列表一樣，但瀏覽器解析有序列表時(shí)的默認(rèn)效果卻是不同的。在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，有序列表也可分為一級(jí)有序列表和多級(jí)無(wú)序列表，瀏覽器默認(rèn)解析時(shí)都是將有序列表以阿拉伯?dāng)?shù)字表示，并增加縮進(jìn)。

<ol>    

<li>一級(jí)有序列表默認(rèn)解析效果</li>    

<li>一級(jí)有序列表默認(rèn)解析效果</li>    

<li>一級(jí)有序列表默認(rèn)解析效果</li>

</ol>

多級(jí)有序列表在瀏覽器中默認(rèn)解析效果如圖下所示。

<ol>    

<li>多級(jí)有序列表默認(rèn)解析效果1</li>    

<li>多級(jí)有序列表默認(rèn)解析效果1

<ol>            

<li>多級(jí)有序列表默認(rèn)解析效果2</li>            

<li>多級(jí)有序列表默認(rèn)解析效果2                

<ol>                    

<li>多級(jí)有序列表默認(rèn)解析效果3</li>                    

<li>多級(jí)有序列表默認(rèn)解析效果3</li>                    

<li>多級(jí)有序列表默認(rèn)解析效果3</li>                

</ol>            

</li>            

<li>多級(jí)有序列表默認(rèn)解析效果2</li>        

</ol>    

</li>    

<li>多級(jí)有序列表默認(rèn)解析效果1</li></ol>

在網(wǎng)站建設(shè)時(shí)，有序列表在多級(jí)的情況下，理論上應(yīng)該是隨著層級(jí)的增加而出現(xiàn)1.1或者1.1.1之類(lèi)的數(shù)字，但瀏覽器卻無(wú)法在網(wǎng)頁(yè)中直接解析出這樣的效果，如果需要使用1.1或者1.1.1之類(lèi)的數(shù)字表示方式，那么就只能使用CSS、JavaScript或者手工加入。

【示例】在上面示例基礎(chǔ)上，在文檔中添加如下CSS樣式代碼，可以設(shè)計(jì)數(shù)字目錄效果。

<style type="text/css">

ol { list-style:none;}                                             /*清除默認(rèn)的序號(hào)*/

li:before {color:#f00; font-family:Times New Roman;}               /*設(shè)計(jì)層級(jí)目錄序號(hào)的字體樣式*/

li{counter-increment:a 1;}                                         /*設(shè)計(jì)遞增函數(shù)a，遞增起始值為1 */

li:before{content:counter(a)". ";}                                 /*把遞增值添加到列表項(xiàng)前面*/

li li{counter-increment:b 1;}                                      /*設(shè)計(jì)遞增函數(shù)b，遞增起始值為1 */

li 

li:before{content:counter(a)"."counter(b)". ";}                 /*把遞增值添加到二級(jí)列表項(xiàng)前面*/

li li li{counter-increment:c 1;}                                   /*設(shè)計(jì)遞增函數(shù)c，遞增起始值為1 */

li li

 li:before{content:counter(a)"."counter(b)"."counter(c)". ";}  /*把遞增值添加到三級(jí)列表項(xiàng)前面*/</style>