CSS3中,列表類型以及列表樣式的設置得到了很大改進,這些改進主要體現在<ul>
和<ol>
標簽上。
/*設置無序列表的樣式*/ ul { list-style-type: disc; /*實心圓點,默認值*/ list-style-image: url('xx.png'); /*利用圖像作為項目符號*/ list-style-position: inside; /*指定項目符號的位置在列表的內部*/ list-style: none; /*取消列表的項目符號*/ } /*設置有序列表的樣式*/ ol { list-style-type: upper-roman; /*大寫羅馬數字*/ list-style-image: none; /*取消項目符號*/ list-style-position: outside; /*指定項目符號的位置在列表的外部*/ } /*設置多列列表*/ ul { columns: 3; /*設置為3列*/ column-gap: 20px; /*列之間的間距*/ column-rule: 1px solid #ccc; /*列與列之間的分隔線*/ }
除了以上常用的列表樣式設置,CSS3還支持設置項目符號的大小、顏色等細節樣式,以及動態調整列表的樣式和布局。通過靈活地運用CSS3的列表樣式設置,可以讓頁面的布局更加美觀、簡潔。