So legen Sie den Stil geordneter und ungeordneter Listenelemente in CSS fest
|
In einer ungeordneten Liste ul>li ist das Symbol einer ungeordneten Liste ein Punkt, der vor jeder Liste erscheint. In der geordneten Liste ol>li steht standardmäßig eine Zahl davor. Um den Aufzählungspunkt vor der Liste zu ändern, müssen Sie ihn nur über den Listenstil anpassen. Gängige Symbole sind (/*Inhaltskommentarteil*/) list-style-type:circle;/*hohler Kreis*/list-style:none;/*Zeichen entfernen*/list-style:square;/*Quadrat*/list-style:upper-roman;/*Römische Ziffern*/list-style:lower-alpha;/*list-style-type:upper-alpha; Großbuchstaben*/ usw.! Der Code sieht folgendermaßen aus:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>So spielen Sie mit geordneten und ungeordneten Listenelementen in CSS</title>
<style type="text/css">
ul.box1{
Listenstiltyp:Kreis;/*hohler Kreis*/
}
.box1 li{
list-style:none;/*Logo entfernen*/
Hintergrundbild: URL ("https://pic.cnblogs.com/avatar/1350951/20200208114706.png");/*Kombination aus Bildern und Text, Bilder vor der Liste hinzufügen*/
Höhe: 50px;
Hintergrundwiederholung: keine Wiederholung;
Hintergrundgröße: 20px;
/*Größe des Hintergrundbildes festlegen. Das Bild kann seine Originalgröße behalten, auf eine neue Größe gestreckt oder so skaliert werden, dass es unter Beibehaltung seiner ursprünglichen Proportionen in den verfügbaren Platz im Element passt. */
Polsterung: 0px 25px 10px;/*Passen Sie die inneren Ränder oben, links, rechts und unten an*/
}
ul.box2{
Listenstil:Quadrat;/*Quadrat*/
}
ul.box3{
list-style:upper-roman;/*Römische Ziffern*/
}
ul.box4{
Listenstil: unteres Alpha;/*Listenstiltyp: oberes Alpha;Großbuchstaben*/
}
ol.box5{
Listenstil: keiner;
Listenstil: oberes Alpha;
Farbe: indischrot;
}
</Stil>
</Kopf>
<Text>
<!-- Liste der drahtlosen Netzwerke -->
<ul Klasse="Box1">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<ul Klasse="Box2">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<ul Klasse="Box3">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<ul Klasse="box4">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<!-- Ungeordnete Liste ersetzt ul>li durch ol>li geordnete Liste, standardmäßig mit einer Zahl davor-->
<ol Klasse="box5">
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ol>
</body>
</html>Zusammenfassen Der beschriebene Stil ist die vom Editor eingeführte Methode zum Festlegen des Listenstils für geordnete und ungeordnete Listenelemente in CSS. Ich hoffe, es wird für alle hilfreich sein! |
<<: So fügen Sie auf dem Mac automatische Vervollständigungsbefehle für Docker und Kubectl hinzu
>>: Gemeinsame Eigenschaften des Framesets (Unterteilung von Frames und Fenstern)
Artikel empfehlen
Detaillierte Anweisungen zur Installation von MySQL8.0.19 im CentOS7.5-Tutorial
1. Einleitung Dieser Artikel enthält keine Screen...
Detailliertes Tutorial zur Installation von Mysql5.7.19 auf Centos7 unter Linux
1. MySQL herunterladen URL: https://dev.mysql.com...
Besprechen Sie die Anwendung von Mixin in Vue
Mixins bieten eine sehr flexible Möglichkeit, wie...
Tutorial zur HTML-Tabellenauszeichnung (5): Farbattribut für helle Rahmen BORDERCOLORLIGHT
In einer Tabelle können Sie die Farbe des oberen ...
Detaillierte Erklärung zur Verwendung von Scoped Slots in Vue.js-Slots
Inhaltsverzeichnis Keine Slots Vue2.x-Steckplätze...
Verwenden Sie reines CSS, um einen Scroll-Schatteneffekt zu erzielen
Um es gleich auf den Punkt zu bringen: Bei manche...
Div in HTML ausblenden Tabelle ausblenden TABLE- oder DIV-Inhalt im CSS-Stil
Ich habe heute Abend ein Problem gelöst, das mich...
Node.js fügt den aktuellen Kampfdatensatz der MySQL-Datenbank hinzu, löscht ihn, ändert ihn und überprüft ihn
Inhaltsverzeichnis Drei Schritte zum Betrieb der ...
Neue Blockbereichsfunktion von JavaScript ES
Inhaltsverzeichnis 1. Was ist Blockbereich? 2. Wa...
Linux Cron geplante Ausführung von PHP-Code mit Parametern
1. Verwenden Sie zur Ausführung weiterhin ein PHP...
Detaillierte Erklärung des MySQL-Datenbank-LIKE-Operators in Python
Der LIKE-Operator wird in der WHERE-Klausel verwe...
So konfigurieren Sie die Portweiterleitung für Docker unter CentOS 7, damit sie mit der Firewall kompatibel ist
Wenn wir unter CentOS 7 den Host-Port mit einem B...
Implementierung der Docker-Bereitstellung von Django+Mysql+Redis+Gunicorn+Nginx
I. Einleitung Die Docker-Technologie erfreut sich...
Beispielcode für die Verwendung von js zur Implementierung gleichzeitiger Ajax-Anfragen, um die Anzahl der Anfragen zu begrenzen
Problembeschreibung: Wenn die Anzahl der asynchro...
Durch die Anpassung des mobilen Endgeräts wird px automatisch in rem umgewandelt
Installieren Sie zuerst postcss-pxtorem: npm inst...