CSS3中的li前邊點是一個非常有用的樣式屬性,可以讓頁面中的無序列表更加美觀,易于閱讀。下面來介紹一下如何使用CSS3中的點樣式:
li { list-style: none; margin-left: 20px; padding-left: 0px; } li:before { content: "?"; color: #666666; font-size: 12px; margin-right: 10px; }
在上面的代碼中,我們首先將li元素的默認樣式去掉,然后設置margin-left為20px,這樣能夠增加列表項的縮進,讓頁面更加美觀。接著,我們使用:before偽類選擇器來給每個列表項添加前邊的點。使用content屬性指定點的樣式為“?”,并設置顏色、字體大小、以及與文本之間的距離。
下面是一個使用CSS3樣式的無序列表示例:
- 列表項 1
- 列表項 2
- 列表項 3
- 列表項 4
當我們應用上面的CSS3樣式之后,無序列表會變成這樣:
- 列表項 1
- 列表項 2
- 列表項 3
- 列表項 4
通過將每個列表項前面的默認樣式去掉,再添加自定義的點樣式,我們可以讓頁面的無序列表更加美觀,讓用戶更易于閱讀。
上一篇css3 php