自定义li项目符号

原文链接: https://www.mk2048.com/blog/blog.php?id=h0bicij2akhj&title=%E8%87%AA%E5%AE%9A%E4%B9%89li%E9%A1%B9%E7%9B%AE%E7%AC%A6%E5%8F%B7

使用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设定项目内容与图片的距离,不设定的话会重叠在一起。


更多专业前端知识,请上 【猿2048】www.mk2048.com

猜你喜欢

转载自blog.csdn.net/qq_45670012/article/details/102717614