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)

Verwenden Sie CSS, um ein dreispaltiges adaptives Layout zu erreichen (feste Breite auf beiden Seiten, adaptiv in der Mitte)

Artikel

Zusammenfassung zum Ändern des Root-Passworts in MySQL 5.7 und MySQL 8.0

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

Verwenden Sie CSS, um ein dreispaltiges adaptives Layout zu erreichen (feste Breite auf beiden Seiten, adaptiv in der Mitte)

Zusammenfassung zum Ändern des Root-Passworts in MySQL 5.7 und MySQL 8.0

Zusammenfassung von sieben in JavaScript implementierten Sortieralgorithmen (empfohlen!)

So stellen Sie das umfassende Benutzererlebnis sicher

Detaillierte Erläuterung der Verwendung des gemeinsam genutzten Speichers in Nginx

JavaScript-Canvas zum Erstellen eines Rubbellos-Beispiels

Detaillierte Schritte zur Installation von Nginx auf dem Apple M1-Chip und zum Bereitstellen eines Vue-Projekts

JS implementiert Anforderungsdispatcher

Kopieren von JS-Objekten (Deep Copy und Shallow Copy)

Leitfaden zum Schreiben von HTML-Code

Artikel empfehlen

So lösen Sie die Elementbewegung, die durch einen per Hover generierten Rahmen verursacht wird

Fügen Sie nach js oder css ?v= Versionsnummer hinzu, um das Browser-Caching zu verhindern

Rundungsvorgang des Datums-/Uhrzeitfelds in MySQL

Beispielcode zur Implementierung eines Musikplayers mit nativem JS

So ändern Sie die Schaltfläche „Durchsuchen“ des HTML-Formulars zum Hochladen von Dateien

Vue implementiert den Schnittstellen-Gleiteffekt

Detaillierte Erklärung von Promises in JavaScript

Alibaba Cloud Ubuntu 16.04 baut IPSec-Dienst auf

Vor- und Nachteile von MySQL-Indizes und Richtlinien zum Erstellen von Indizes

Ändern Sie die maximale Anzahl von MySQL-Verbindungen und Konfigurationsdateien in Docker

Installieren Sie CentOS 7 auf VMware14 – Grafik-Tutorial

So installieren Sie RabbitMQ schnell in Docker

Implementierung von TypeScript im React-Projekt

Zwei Tools zum Teilen des Bildschirms im Linux-Befehlszeilenterminal

So stellen Sie LNMP und phpMyAdmin in Docker bereit