CSS 列表标记的图像list-style-image
提问人：刘团圆发布时间：2020-11-18
虽然css已经预设了很多列表标记的样式，但是有时候还想自定义一些样式，比如需要一张图片来作为列表的标记。此时CSS列表样式准备了一个可以自定义列表标记图案的属性——list-style-image0
list-style-image属性使用图像替换列表项的标记。这个属性指定作为一个有序或无序列表项标志的图像。图像相对于列表项内容的放置位置通常使用list-style-position属性控制。
使用这个属性需要一张可以作为列表标记的图片，之后只需要按照此属性的语法正常引入图片的路径即可，语法如下：
list - style - image:url();
【例题】使用list-style-image属性
代码如下：
<!DOCTYPDE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.ol{
list-style-image:url(icon.png);
}
</style>
</head>
<body>
<p>默认的列表标记</p>
<ul>
<li>items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
</ul>
<hr/>
<p>使用list-style-image属性的列表标记</p>
<ol>
<li>items1</li>
<li>items2</li>
<li>items3</li>
<li>items4</li>
</ol>
</body>
</html>
继续查找其他问题的答案？
相关视频回答
回复(0)
湘公网安备:43011102000856号 
点击加载更多评论>>