<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ;Document</title>
<style>
ul{
/*Default small dots*/
list-style-type: disc;
/*Hollow small dots* /
list-style-type: circle;
/*Solid small square*/
list-style-type:square;
/*Number sequence number, turned into an ordered list*/
list-style-type: decimal;
/*Add 0 in front of the serial number: Example: 01, 02, 03*/
list-style-type: decimal-leading-zero;
/*Use pictures Instead of the origin, the size must be very small and difficult to use. Instead, directly control the li tag */
/*list-style-image: url(1.jpg);*/
}
/*Auto Define list items*/
li{
/*Cancel dots*/
list-style-type: none;
/*Reserve image position*/
padding-left: 2em;
/*Upload images*/
list-style-image: url(1.jpg);
/*The image list items are not repeated*/
background-repeat: no-repeat;
/*Image size*/
background-size: 1em 1em;
/*Image position setting, align with the text top grid, xy axis visual inspection*/
background-position: 0 4px;
}
</style>
</head>
<body>
<h3>Front-end development tools</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>javaScript</li>
;li>Bootstrap</li>
</ul>
</body>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
It is recommended to use the following two methods to solve the problem: 1. Change the size of your source image. 2. Use li:before to set
li{ list-style: none; } li:before{ content: ''; display: inline-block; height: y; width: x; background-image: url(); }