這次給大家帶來帶序號的目錄列表,實現帶序號的目錄列表注意事項有哪些,下面就是實戰案例,一起來看一下。
編寫文檔手冊的時候,我們經常需要清單項目前面的序號將上級各層的序號也附加在前面,如:
(圖一)
但預設的<ol>列表,任何層次都是單個序號開始。如:
(圖二)
要實現圖一效果,方法之一是直接將序號部分作為列表內容的一部分,插入相應的HTML,可使用js批量插入序號。
產生的HTML結果類似這樣
<ol> <li>1. 清單項目 <ol> <li>1.1. 清單項目 <ol> <li>1.1.1 清單項目</li> <li>1.1.2 清單項目</li> <li>1.1.3 清單項目</li> </ol> </li> </ol> </li> </ol>
如果既不想將序號硬寫在html代碼裡,也不想引入js,那麼只能從HTML 屬性和CSS兩個方面來突破了。
遺憾的是,HTML元素屬性並沒有提供類似的介面。
經網友提示,知道了有個叫css counter 的概念,我孤陋寡聞了。
查詢有關文檔之後,CSS解決方案也就有了。
HTML代碼如下:
<ol> <li>清單項目 <ol> <li>清單項目 <ol> <li>清單項目</li> <li>清單項目</li> <li>清單項目</li> </ol> </li> </ol> </li> </ol>
CSS代碼如下:
ol {padding:0 0 0 20px;margin:0;list-style:none;} li:before {color:#f00; font-family:Times New Roman;} li{counter-increment:a 1;} li:before{content:counter(a)". ";} li li{counter-increment:b 1;} li li:before{content:counter(a)"."counter(b)". ";} li li li{counter-increment:c 1;} li li li:before{content:counter(a)"."counter(b)"."counter(c)". ";}
效果就是本篇開頭的圖一。
可是這個CSS寫的實在是醜陋,有幾級目錄,就得寫幾層的CSS,顯然不應該是這樣子的。
繼續閱讀了相關文檔,明確了counter-reset , counter(), counters() 之後,發現問題竟是異常的簡單。
CSS代碼如下:
ol {padding:0 0 0 20px;margin:0;list-style:none;counter-reset:a;} li:before {counter-increment:a;content:counters(a,".")". ";}
這樣,無論多少層的嵌套列表,都能正確顯示級聯序號了,效果如本篇開頭的圖一。
需要指出的是,:before, counter-increment 等相關CSS特性不支援古老的IE6/IE7,但是IE8及以上是支援的很好的。
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
href和src、link和@import有什麼區別
css的絕對位置怎麼相容所有的解析度
CSS3的屬性transition、animation、transform