简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Helfen Sie mir, die Einstellungen von ul und li zu überprüfen
益伦
益伦 2017-12-10 21:28:44
0
1
1162

<!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?

益伦
益伦

Antworte allen(1)
chobits4
chobits42017-12-11 09:02:48 1 Etage

建议使用下面两个方法解决：1.更改你源图片的大小。2.使用li:before进行设置

li{
   list-style: none;
}
li:before{
   content: '';
   display: inline-block;
   height: y;
   width: x;
   background-image: url();
}


Wie +2
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！