8.3 設計CSS 3樣式美化列表

在HTML中，系統提供的列表的項目符號比較少而且不夠美觀，在網頁設計中常常需要自定義項目符號來使網頁更美觀。

8.3.1 自定義項目符號

這里把一個<span>標簽設計成一個項目符號，添加到每個li元素中。具體思路：

● 在每個li元素中添加一個<span>標簽，去掉列表的默認符號。

● 分別給li和span添加相對定位和絕對定位。

● 設置span的CSS樣式，調整位置。

具體的實現代碼，請參考下面案例。

【例8-7】（實例文件：ch08\Chap8.7.html）自定義項目符號。

相關的代碼實例請參考Chap8.7.html文件，在IE瀏覽器中運行的結果如圖8-9所示。

8.3.2 使用背景圖片設計項目符號

首先使用list-style-type: none;清除列表自帶的項目符號，然后給每個li設置背景圖片，并調整圖片大小，設置圖片不平鋪。

【例8-8】（實例文件：ch08\Chap8.8.html）使用背景圖片設計項目符號。

相關的代碼實例請參考Chap8.8.html文件，在IE瀏覽器中運行的結果如圖8-10所示。