在CSS中編寫(xiě)項(xiàng)目符號(hào),可以通過(guò)使用列表(List)和列表樣式(List Style)來(lái)實(shí)現(xiàn),以下是一個(gè)基本的示例:
ul { list-style-type: disc; }
在這個(gè)示例中,ul
元素表示一個(gè)無(wú)序列表,list-style-type
屬性用于設(shè)置列表項(xiàng)前面的符號(hào)類(lèi)型,在這個(gè)示例中,我們使用了disc
值,它會(huì)在每個(gè)列表項(xiàng)前面顯示一個(gè)實(shí)心圓點(diǎn),除了disc
值,CSS還支持其他類(lèi)型的列表樣式,如circle
(空心圓點(diǎn))、square
(方塊)、decimal
(數(shù)字)等。
如果你想讓列表項(xiàng)之間的間距更大,可以使用list-style-position
屬性將符號(hào)放在列表項(xiàng)的外部:
ul { list-style-position: outside; }
你還可以使用CSS的偽元素(Pseudo-elements)來(lái)定制列表項(xiàng)的符號(hào)樣式,你可以使用以下代碼來(lái)顯示一個(gè)帶有背景色的列表項(xiàng)符號(hào):
ul { list-style-type: disc; position: relative; } ul li { position: relative; } ul li::before { content: ""; position: absolute; top: 0; left: -10px; width: 10px; height: 10px; border-radius: 50%; background-color: #ff0000; }
在這個(gè)示例中,我們使用了偽元素::before
來(lái)創(chuàng)建一個(gè)帶有背景色的符號(hào),通過(guò)調(diào)整符號(hào)的位置、大小和樣式,你可以進(jìn)一步自定義列表項(xiàng)的符號(hào)樣式。