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)

MySQL erhält das aktuelle Datum und die aktuelle Uhrzeit Funktionsbeispiel detaillierte Erläuterung

Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird

Artikel

So legen Sie den Stil geordneter und ungeordneter Listenelemente in CSS fest

MySQL erhält das aktuelle Datum und die aktuelle Uhrzeit Funktionsbeispiel detaillierte Erläuterung

So verwenden Sie Cron-Jobs, um PHP regelmäßig unter Cpanel auszuführen

Verwenden von jQuery zum Implementieren des Karusselleffekts

Lösen Sie das Problem der Verwendung des Swiper-Plugins in Vue

Vue.js-Framework implementiert Warenkorbfunktion

Linux-Sudo-Sicherheitslücke kann zu unberechtigtem privilegiertem Zugriff führen

Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird

JavaScript MouseEvent-Fallstudie

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.23

Der Unterschied zwischen absolutem und relativem Pfad bei der Webseitenerstellung

Artikel empfehlen

Detaillierte Beispiele für Ersetzen und Ersetzen in MySQL into_Mysql

Sortierung und Paginierung von MySQL-Abfragen

SQL-Zusammenführungsvorgang von Abfrageergebnissen von Tabellen mit unterschiedlichen Spalten

Detailliertes Tutorial zur Verwendung von Docker zum Erstellen von Gitlab basierend auf dem CentOS8-System

So implementieren Sie Zeilenumbrüche im Texteingabebereich von Textarea

Detaillierte grundlegende Operationen an Datentabellen in der MySQL-Datenbank

JS realisiert den Effekt des Bildwasserfallflusses

Einführung in den B-Tree-Einfügeprozess

So erstellen Sie einen Git-Dienst basierend auf dem HTTP-Protokoll auf VMware+CentOS 8

Detaillierte Beispiele für Linux-Festplattengeräte- und LVM-Verwaltungsbefehle

Beispielanalyse zum Exportieren, Importieren und Kopieren von Docker-Images

3D-Tunneleffekt implementiert durch CSS3

Einführung in den HTML-Standard für chinesische Zeichenkodierung

Detaillierte Erläuterung der MySQL-Methode für verzögerte Replikationsbibliotheken

Docker verwendet CMD- oder ENTRYPOINT-Befehle, um mehrere Dienste gleichzeitig zu starten