CSS序列列表是網頁排版中常用的元素,它可以輕松地對網頁內容進行編號,如1、2、3或A、B、C等。然而,有時我們可能需要去掉序列列表中的點,這樣可以使頁面看起來更加整潔美觀。那么,如何來去掉這些點呢?
<code>ul { list-style: none; } ol { list-style: none; } li { counter-increment: my-counter; margin-bottom: 10px; } li:before { content: counter(my-counter) ". "; margin-right: 5px; }</code>
上述代碼中,我們首先使用list-style:none來去掉列表默認的點,接著定義li元素的樣式,并使用counter-increment來給每個li元素的計數器+1,然后使用:before偽元素來在每個li元素的前面加上計數器的值和一個點,其中counter(my-counter)表示獲取計數器的值。
除了這種方法外,還可以使用圖片代替默認的點,如:
<code>ul { list-style-image: url('list.png'); } li { margin-bottom: 10px; }</code>
上述代碼中,我們使用了list-style-image來給序列列表添加圖片,這樣可以達到自定義的效果,同時還需要注意,要對li元素的margin進行調整,以保證頁面的美觀。
綜上所述,去掉序列列表的點可以通過CSS的list-style:none屬性來實現,或者使用list-style-image來添加自定義的圖片。
上一篇css并排顯示 修改間距
下一篇css底部設置白色邊框