列表是網頁中常用的一種元素,CSS可以很好的控制列表的樣式。下面是一些常見的CSS列表欄設置:
/* 去除列表默認樣式 */ ul, ol { list-style: none; padding: 0; margin: 0; } /* 設置列表樣式為小圓點 */ ul li { list-style: disc; } /* 設置列表樣式為數字 */ ol li { list-style: decimal; } /* 設置列表樣式為小寫字母 */ ol.lower-alpha li { list-style: lower-alpha; } /* 設置列表樣式為大寫字母 */ ol.upper-alpha li { list-style: upper-alpha; } /* 設置列表樣式為小寫羅馬數字 */ ol.lower-roman li { list-style: lower-roman; } /* 設置列表樣式為大寫羅馬數字 */ ol.upper-roman li { list-style: upper-roman; }
除了以上常見的設置外,CSS還可以自定義列表樣式,例如:
/* 使用圖片作為列表樣式 */ ul li { list-style: url('images/bullet.png'); } /* 設置列表樣式為自定義圖標 */ ul.custom-icon li::before { content: "\f105"; /* Unicode編碼 */ font-family: FontAwesome; margin-right: 5px; }
通過CSS控制列表樣式,可以使頁面排版更加美觀,提高用戶體驗。
上一篇css列表無序標記項
下一篇css列表怎么橫向排列