学科分类
目录
HTML5+CSS3

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

image-20200623155931196

图1 ist-style-image控制列表项目图像

通过图1看出,列表项目图像和列表项没有对齐,这是因为list-style-image属性对列表项目图像的控制能力不强。因此,实际工作中不建议使用list-style-image属性,常通过为<li>设置背景图像的方式实现列表项目图像。

点击此处
隐藏目录