}
</style>
</head>
<body>
<ul>
<li>成功不是打败别人,而是改变自己。</li>
<li>成功不是打败别人,而是改变自己。</li>
<li>成功不是打败别人,而是改变自己。</li>
</ul>
</body>
</html>
结果图

注意:
list-style-position 属性值为
inside 作用就是将列表前面项目符号位置设置在
li 标签中,这就是里面的位置。list-style-image属性
list-style-image 属性作用:将列表前面项目符号设置为一张图片。list-style-image属性说明表
| 属性值名称 | 描述 |
|---|---|
| url | 设置列表前面项目符号的图片的路径 |
让我们进入
list-style-image 属性的实践,实践内容将列表前面项目符号更换一张图片。代码块
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用list-style-image属性方式</title>
<style>
ul {
width: 300px;
height: 150px;
border: 1px solid #00F;
}
ul li {
width: 280px;
height: 30px;
line-height: 30px;
border: 1px solid red;
list-style-image: url(./img/001.png);
}
</style>
</head>
<body>
<ul>
<li>成功不是打败别人,而是改变自己。</li>
<li>成功不是打败别人,而是改变自己。</li>
<li>成功不是打败别人,而是改变自己。</li>
</ul>
</body>
</html>
结果图

注意:图片路径一定要写在
url(./img/001.png); 括号当中,不然不会被渲染的,图片路径可以是相对路径也可以绝对路径。list-style属性
list-style 属性是(
list-style-type 属性、
list-style-position 属性、
list-style-image










