<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
/*默认小圆点*/
list-style-type: disc;
/*空心小圆点*/
list-style-type: circle;
/*实心小方块*/
list-style-type:square;
/*数字序号，变成有序列表*/
list-style-type: decimal;
/*序号前面加0： 例：01、02、03*/
list-style-type: decimal-leading-zero;
/*用图片代替原点，必须尺寸很小，不好用，换直接对li标签控制*/
/*list-style-image: url(1.jpg);*/
}
/*自定义列表项*/
li{
/*取消小圆点*/
list-style-type: none;
/*预留图片位置*/
padding-left: 2em;
/*上传图片*/
list-style-image: url(1.jpg);
/*图片列表项不重复*/
background-repeat: no-repeat;
/*图片大小*/
background-size: 1em 1em;
/*图片位置设置，和文本顶格对其,xy轴目测*/
background-position: 0 4px;
}
</style>
</head>
<body>
<h3>前端开发工具</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>javaScript</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</body>
</html>
显示的结果列表项引用的图片还是显示很大，没有缩小成1em大小，这是为啥？
chobits42017-12-11 09:02:48
建议使用下面两个方法解决：1.更改你源图片的大小。2.使用li:before进行设置
li{
list-style: none;
}
li:before{
content: '';
display: inline-block;
height: y;
width: x;
background-image: url();
}