CSS是一種強(qiáng)大的樣式表語言,可以使網(wǎng)站看起來更好看,更專業(yè)。列表是網(wǎng)站常用的元素之一,下面介紹幾種好看的列表樣式。
/* 箭頭列表樣式 */ ul.arrow-list { list-style: none; padding: 0; margin: 0; } ul.arrow-list li:before { content: "?"; margin-right: 10px; } /* 圓形列表樣式 */ ul.circle-list { list-style: none; padding: 0; margin: 0; } ul.circle-list li:before { content: ""; display: inline-block; width: 10px; height: 10px; background-color: #ccc; border-radius: 50%; margin-right: 10px; } /* 數(shù)字列表樣式 */ ol.number-list { list-style: none; padding: 0; margin: 0; } ol.number-list li:before { content: counter(item) "."; margin-right: 10px; counter-increment: item; } /* 網(wǎng)格列表樣式 */ ul.grid-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; } ul.grid-list li { background-color: #f0f0f0; padding: 10px; }
以上是幾種常見的列表樣式,可以根據(jù)自己的需求進(jìn)行選擇。但是需要注意的是,過多的樣式會影響網(wǎng)站的性能,所以在開發(fā)時(shí)要根據(jù)實(shí)際情況進(jìn)行選擇。
上一篇css 奇偶 偽類
下一篇css 好看按鈕樣式