<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> ;
ul{
/*Standard kleine Punkte*/
Listenstil-Typ: Scheibe;
/*Hohle kleine Punkte*/
Listenstil-Typ: Kreis;
/*Durchgezogene kleine Quadrate*/
Listenstil -type: quadrat;
/*Numerische Seriennummer wird zu einer geordneten Liste*/
list-style-type: decimal;
/*Füge 0 vor der Seriennummer hinzu: Beispiel: 01, 02, 03*/
list- style -type: decimal-leading-zero;
/*Verwenden Sie ein Bild, um den Ursprung zu ersetzen. Die Größe muss sehr klein und schwierig zu verwenden sein. Steuern Sie stattdessen direkt das li-Tag.*/
/*list-style-image: url(1.jpg); */
}
/*Benutzerdefinierte Listenelemente*/
li{
/*Punkte aufheben*/
list-style-type: none;
/*Bildposition reservieren*/
pad ding- links: 2em;
/*Bilder hochladen*/
list-style-image: url(1.jpg);
/*Die Bildlistenelemente werden nicht wiederholt*/
background-repeat: no-repeat;
/*Bild Größe*/
Hintergrundgröße: 1em 1em;
/*Legen Sie die Bildposition fest, richten Sie sie am oberen Textraster aus und überprüfen Sie visuell die xy-Achse*/
Hintergrundposition: 0 4px;
}
</style> ;
</head>
<body>
<h3>Front-End-Entwicklungstools</h3>
<ul>
<li>HTML</li>
<li>CSS</li> ;
<li>javaScript</li>
< ;li>jQuery</li>
<li>Bootstrap</li>
</ul>
</body>
</html>
Das durch das angezeigte Ergebnislistenelement referenzierte Bild ist immer noch dasselbe. Die Anzeige ist sehr groß, aber nicht auf 1em-Größe verkleinert. Warum ist das so?
建议使用下面两个方法解决：1.更改你源图片的大小。2.使用li:before进行设置
li{ list-style: none; } li:before{ content: ''; display: inline-block; height: y; width: x; background-image: url(); }