列表是我們?nèi)粘>W(wǎng)頁排版中常用的元素,適用于展示一系列相關(guān)的項,比如文章中的目錄、特性圖文等等。列表的展示方式可分為有序列表和無序列表,常用的標簽是<ol>和<ul>。
雖然列表看似簡單,但是很多人在使用時卻經(jīng)常出現(xiàn)小點不好看的情況,特別是在嵌套列表時更加明顯。這其實是由于默認的樣式表中,小點的樣式被默認設(shè)置為外部樣式(margin、padding)而不是內(nèi)部樣式(font、border),自然會造成小點樣式的不整齊。
<ul> <li>列表項 1</li> <li>列表項 2 <ul> <li>嵌套列表項 1</li> <li>嵌套列表項 2</li> </ul> </li> <li>列表項 3</li> </ul>
如果想要優(yōu)化列表的樣式,常常會采用更換小點的方法,有的人會使用圖片或者字體來替代小點,但是其實在CSS中可以通過更改小點的樣式來達到同樣的效果。
以下是樣式表的實現(xiàn)方式,直接端到頁面的<style>標簽中:
<style> ul li{ list-style: none; } ul ul li{ list-style: circle; } </style>
一些說明:使用list-style:none可以將小點去除,使用list-style:circle可以改變小點的形狀,同時在嵌套列表中使用了不同的樣式,使得列表更加規(guī)整美觀。
綜上所述,我們在使用列表時,應(yīng)該對小點樣式進行定制,這樣不僅會提高整體頁面的視覺效果,也能帶動內(nèi)容的閱讀體驗。