list-style-image属性
一些常规的列表项显示符号并不能满足网页制作的需求,为此CSS提供了list-style-image属性,其取值为图像的url。使用list-style-image属性可以为各个列表项设置项目图像,使列表的样式更加美观。
示例代码如下:
1 <style type="text/css">
2 ul{list-style-image:url(1.png);}
3 </style>
4 </head>
5 <body>
6 <h2>栗子功效</h2>
7 <ul>
8 <li>抗衰老</li>
9 <li>益气健脾</li>
10 <li>预防骨质疏松</li>
11 </ul>
12 </body>
运行示例代码,效果如图1所示。
图1 ist-style-image控制列表项目图像
通过图1看出,列表项目图像和列表项没有对齐,这是因为list-style-image属性对列表项目图像的控制能力不强。因此,实际工作中不建议使用list-style-image属性,常通过为<li>设置背景图像的方式实现列表项目图像。