CSS如何设置列表样式属性(看这篇文章就够用了)

2020-05-16 06:59:51易采站长站整理

}

</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