CSS的無序列表樣式可以讓頁面的排版更加美觀,同時可以幫助網頁設計師更好地表現自己的設計思路。
ul { list-style: none; /*去掉默認的符號*/ margin-left: 20px; /*默認list的左側空白*/ padding-left: 0; /*默認list的內部空白*/ } li { position: relative; /*設置相對定位*/ margin-bottom: 10px; /*每個元素之間的間距*/ padding-left: 20px; /*適當的內部空白*/ line-height: 20px; /*行高*/ } li:before { content: ""; /*設置區塊的content為空*/ position: absolute; /*設置絕對定位*/ left: 0; /*區塊距離左邊的距離*/ top: 5px; /*區塊距離頂部的距離*/ width: 10px; /*區塊的寬度*/ height: 10px; /*區塊的高度*/ border-radius: 50%; /*設置為圓形*/ background-color: #000; /*設置顏色*/ }
以上代碼通過CSS樣式的設置,可以將一個普通的無序列表添加上了各種樣式,讓頁面更加美觀、清晰。
在代碼中,我們首先通過設置list-style來去除默認的符號,然后通過margin-left和padding-left來設置默認左側外部和內部的空白,然后再適當地設置li元素的內部空白和行高,同時也要設置每個li元素之間的間距。
接下來,我們通過設置:before偽元素來添加自定義的圓點樣式,設置其絕對定位,然后對其進行顏色等其他屬性的設置。這樣就完成了整個無序列表的美化樣式。