在HTML中,我們可以使用實(shí)心的圓點(diǎn)來作為列表的符號,具體的設(shè)置如下:
<ul>
<li>圓點(diǎn)1</li>
<li>圓點(diǎn)2</li>
</ul>
以上代碼表示我們創(chuàng)建了一個(gè)無序列表,其中有兩個(gè)列表項(xiàng),每個(gè)列表項(xiàng)使用<li>標(biāo)簽包裹,因?yàn)?lt;li>標(biāo)簽?zāi)J(rèn)會顯示實(shí)心的圓點(diǎn),所以我們不需要再做其他樣式的設(shè)置。
當(dāng)然,我們?nèi)绻枰淖儓A點(diǎn)的樣式,也是可以的,我們可以使用CSS來設(shè)置圓點(diǎn)的樣式,具體代碼如下:
ul {
list-style: none; /*去掉原有的圓點(diǎn)*/
}
li:before {
content: "●"; /*使用實(shí)心圓點(diǎn)*/
font-size: 20px; /*設(shè)置大小*/
margin-right: 10px; /*設(shè)置距離*/
}
在以上代碼中,我們使用了:before偽類來創(chuàng)建一個(gè)偽元素,在該偽元素里設(shè)置實(shí)心圓點(diǎn),并使用CSS屬性來設(shè)置圓點(diǎn)的大小、顏色、距離等樣式,從而實(shí)現(xiàn)我們自定義圓點(diǎn)樣式的目的。