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)

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

Einführung in die Docker-Architektur

Ein Artikel zum Verständnis der erweiterten Funktionen von K8S

CSS-Code zur Unterscheidung von IE8/IE9/IE10/IE11 Chrome Firefox

Beispiel für die Verwendung von HTML+CSS zur Implementierung einer sekundären Menüleiste beim Bewegen der Maus

So installieren Sie den Kibana-Tokenizer im Docker-Container

TypeScript-Aufzählungstypen im Detail erklären

Tutorial zur Installation und Verwendung der verteilten Ceph-Software unter Linux

Detailliertes Tutorial zur Installation von Docker und der Docker-Compose-Suite unter Windows

Beheben Sie das Problem, dass Änderungen an der Docker MySQL-Containerdatenbank nicht wirksam werden

Detaillierte Erläuterung verschiedener Möglichkeiten zum Zusammenführen von Javascript-Objekten

Artikel empfehlen

Mobiles Internet-Zeitalter: Responsive Webdesign ist zum allgemeinen Trend geworden

Tiefgreifendes Verständnis von globalen Sperren und Tabellensperren in MySQL

Eine kurze Zusammenfassung meiner Erfahrungen beim Schreiben von HTML-Seiten

Tutorial zum Bereitstellen von LNMP und Aktivieren des HTTPS-Dienstes

Kreisförmiger Fortschrittsbalken mit CSS implementiert

Lösung für das 404-Problem der Tomcat-Installation in Docker

Beispiel für die Verwendung des href-Attributs und des onclick-Ereignisses eines Tags

Ändern des Standard-Bildlaufleistenstils im Front-End-Projekt (Zusammenfassung)

Element-ui klickt direkt auf die Zelle in der Tabelle, um sie zu bearbeiten

5 Tipps zum Schreiben von CSS, um Ihren Stil standardisierter zu gestalten

Grundlegendes Lernprogramm zum Tabellen-Tag in HTML

Verwendung und Optimierung der MySQL COUNT-Funktion

Implementierung der Multisite-Konfiguration von Nginx auf Mac M1

So gehen Sie mit dem Problem um, dass die Datei gelöscht wird, der Speicherplatz in Linux jedoch nicht freigegeben wird

Reagieren Sie mit Beispielcode zur Implementierung der automatischen Browseraktualisierung