CSS中的列表樣式可以通過list-style-type
屬性來設置,常見的值有:
ul { list-style-type: disc; /* 實心圓點 */ } ol { list-style-type: decimal; /* 數字1,2,3... */ }
除了常見的樣式,我們還可以使用圖片作為列表符號,如下代碼:
ul { list-style-image: url("bullet.png"); /* 使用圖片作為符號 */ }
在新聞列表中,我們通常會將不同的新聞用<li>
元素包裹起來,并使用CSS樣式來美化列表。下面是一個簡單的樣式示例:
ul.news { list-style: none; /* 隱藏原有的列表符號 */ padding: 0; margin: 0; } ul.news li { padding: 10px; border-bottom: 1px solid #ccc; } ul.news li:last-child { border-bottom: none; } ul.news li:hover { background-color: #f5f5f5; }
以上樣式將新聞列表的樣式設置為無標記列表,每條新聞之間有一條灰色下邊框,鼠標懸停時會有灰色背景色。
上一篇css3圓角邊框的定義
下一篇css3塊級元素隱藏