序列列表在網頁設計中非常常見,它主要用于列出有關某個主題或文章的信息。在 CSS 中,我們可以使用一些屬性來設置序列列表的樣式。
ol { list-style-type: none; counter-reset: item; margin: 0; padding: 0; } li:before { content: counters(item, ".") " "; counter-increment: item; color: #666; }
在上面的代碼中,我們設置了一個有序列表,同時我們使用了list-style-type: none
來移除原本序列列表的點號,counter-reset: item
將計數器歸零,margin: 0
和padding: 0
移除了列表項的默認間距。
我們還使用了li:before
來使用counters()
函數來計數列表中的每個項目,并添加數字和空格作為列表項的前綴。除此之外,我們還為前綴設置了一個字體顏色為 #666。
另外,如果你想要更改序列列表的樣式,比如使用圓圈代替數字,你可以使用以下代碼:
ol { list-style-type: circle; }
在上面的代碼中,我們將列表類型更改為圓圈,這會將每個列表項的前綴更改為一個不填充的圓圈或點。
總之,序列列表是網頁設計中重要的一部分,我們可以使用 CSS 來自定義序列列表的樣式,使其更符合網站的整體風格。
下一篇jquery new