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所示。