自定义li项目符号

时间:2021-11-19 18:26:32

使用background-image属性

先清除ul的默认list-style

ul{
list-style:none
}
li{
background-image:url('./image/symbol.png') ;//图片路径
background-repeat : no-repeat ;
padding-left:40px;//移动图片位置
}

list-style:none;用来清除默认样式; 
background-image设定背景图片,也就是我们看成的项目符号; 
background-repeat设定背景图片重复,设定no-repeat就会显示一个; 
padding-left设定项目内容与图片的距离,不设定的话会重叠在一起。