ol定義和用法
<ol> 標簽定義了一個有序列表. 列表排序以數字來顯示。使用<li> 標簽來定義列表選項。
基本語法如下：
<ol> <li>菠蘿</li> <li>西瓜</li> <li>火龍果</li> </ol>
運行結果：
ol屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| compact | compact | HTML5中不支持，不贊成使用。請使用樣式取代它。 規定列表呈現的效果比正常情況更小巧。 |
| reversed（h5新元素） |
reversed | 指定列表倒序(9,8,7...) |
| start | number | HTML5不支持，不贊成使用。請使用樣式取代它。 規定列表中的起始點。 |
| type | 1 A a I i |
規定列表的類型。不贊成使用。請使用樣式代替。 |
屬性使用語法：
<ol type="a" start="3"> <li>菠蘿</li> <li>西瓜</li> <li value="20">火龍果</li> </ol>
運行結果：
type屬性詳解：
start表示開始進行編號的數值，start=‘2’即從第二個標號開始進行編號（如2，b，B，II，ii）；
value可指定某個li的特定編號值，使用在某編號脫離正常編號值時。
reversed是h5新屬性，使列表編號倒序排列，demo如下：
<ol reversed="reversed"> <li>菠蘿</li> <li>西瓜</li> <li>火龍果</li> </ol>
chrome運行結果如下：
FF運行結果：
IE11運行結果：
可見IE11以更早的版本均不兼容ol reversed屬性。
ol li 不顯示編號？
一種是初始化時設置了ol或者li的 list-style:none;樣式，只需刪除即可。
二是設置了ol，li的左邊距為0，例如 margin:0px; padding:0 等，比較容易被遺忘而出錯的是初始化時設置的 *{margin:0;padding:0;}
有序序列需要一定的左邊距來進行編號，若左邊距為零則自然無法顯示標號。
解決方法：1、可為ol加上margin-left或padding-left；
2、為li加上margin-left；
一般左邊距為10px即可實現編號，當然要結合字體大小等因素，請讀者根據實際頁面自行調整。
下圖為左邊距為5px時的編號圖：
下圖為左邊距為10px時的編號圖：
用CSS樣式代替ol type屬性
| type值 | 等同於list-style-type |
|---|---|
type="1" |
decimal數字(默認樣式) |
type="a" |
lower-alpha小寫字母 |
type="A" |
upper-alpha大寫字母 |
type="i" |
lower-roman 小寫羅馬文字 |
type="I" |
upper-roman 大寫羅馬文字 |
除以上屬性外，list-style-type還提供了 decimal-leading-zero 十進制數 | lower-greek小寫希臘字母 | lower-latin小寫拉丁文 | upper-latin 大寫拉丁文| armenian亞美尼亞數字 | georgian喬治亞數字 | none無 | inherit繼承
對於ul，list-style-type的屬性如下：disc 點（默認）| circle圓圈 | square正方形
list-style-position屬性
該屬性用於聲明列表標志相對於列表項內容的位置。外部 (outside) 標志會放在離列表項邊框邊界一定距離處，不過這距離在 CSS 中未定義。內部 (inside) 標志處理為好像它們是插入在列表項內容最前面的行內元素一樣。
取值: list-style-position:inside/outside
注：有的時候outside不起作用，原因是加了浮動
list-style-image屬性
使用圖像來替換列表項的標記
取值：list-style-image:none/url（‘’）
自定義序列
使用CSS的content、counter-increment和counter-reset進行序列的自定義。
比如修改序列后的“.”為“、”，代碼如下：
html代碼
<ol> <li>菠蘿</li> <li>西瓜</li> <li>火龍果</li> </ol>
CSS代碼
ol {
list-style-type: none;
counter-reset: li;
width: 200px;
}
ol li:before {
content: counter(li)'、';
counter-increment: li;
}
結果如下：
當然自定義還有許多其他形式，讀者可利用上述幾個CSS屬性自行嘗試，例如下圖：
參考資料：http://www.adminwang.com/html/37.html
http://www.runoob.com/tags/tag-ol.html
http://www.jb51.net/html5/376734.html
http://blog.csdn.net/abeetle/article/details/41246741
轉載請注明出處：絲瓜 » 有序序列ol li 詳解（ol li 標號未顯示？）