成績單是大家比較熟悉的有序列表了，從第一名一直排到最后一名。在網(wǎng)頁設計中，有序列表，相對于無序列表而言，最大的區(qū)別就是有序列表是帶有排名性質(zhì)的列表。
<ol>
<li>張三</li>
<li>李四</li>
<li>王五</li>
<li>趙六</li>
</ol>
<ol>標簽表示有序列表的集合，其必須包含<li>標簽，具體形式與無序列表一樣，但瀏覽器解析有序列表時的默認效果卻是不同的。在設計網(wǎng)頁時，有序列表也可分為一級有序列表和多級無序列表，瀏覽器默認解析時都是將有序列表以阿拉伯數(shù)字表示，并增加縮進。
<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>
在網(wǎng)站建設時，有序列表在多級的情況下，理論上應該是隨著層級的增加而出現(xiàn)1.1或者1.1.1之類的數(shù)字，但瀏覽器卻無法在網(wǎng)頁中直接解析出這樣的效果，如果需要使用1.1或者1.1.1之類的數(shù)字表示方式，那么就只能使用CSS、JavaScript或者手工加入。
【示例】在上面示例基礎上，在文檔中添加如下CSS樣式代碼，可以設計數(shù)字目錄效果。
<style type="text/css">
ol { list-style:none;} /*清除默認的序號*/
li:before {color:#f00; font-family:Times New Roman;} /*設計層級目錄序號的字體樣式*/
li{counter-increment:a 1;} /*設計遞增函數(shù)a，遞增起始值為1 */
li:before{content:counter(a)". ";} /*把遞增值添加到列表項前面*/
li li{counter-increment:b 1;} /*設計遞增函數(shù)b，遞增起始值為1 */
li
li:before{content:counter(a)"."counter(b)". ";} /*把遞增值添加到二級列表項前面*/
li li li{counter-increment:c 1;} /*設計遞增函數(shù)c，遞增起始值為1 */
li li
li:before{content:counter(a)"."counter(b)"."counter(c)". ";} /*把遞增值添加到三級列表項前面*/</style>