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

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

Apache Spark 2.0-Jobs brauchen lange, bis sie abgeschlossen sind

Phänomen Bei der Verwendung von Apache Spark 2.x ...

So stellen Sie War-Pakete manuell über Tomcat9 unter Windows und Linux bereit

Die Ergebnisse sind in Windows- und Linux-Umgebun...

Verstehen Sie die anfängliche Verwendung von Redux in React in einem Artikel

Redux ist ein Plug-In zur Datenstatusverwaltung. ...

Vue realisiert einfachen Effekt des Lauflichts

In diesem Artikel wird der spezifische Code von V...

Kennen Sie die Bedeutung von Sonderzeichen in URLs?

1.# # stellt eine Position auf einer Webseite dar...

So implementieren Sie die Formularvalidierung in Vue

1. Installation und Nutzung Installieren Sie es z...

Design-Story: Der Wachmann, der sich Nummernschilder nicht merken kann

<br />Um die Fahrzeuge zu regeln, die in die...

Wie füge ich ein Website-Symbol hinzu?

Der erste Schritt besteht darin, eine Software zur...

Umfassendes Verständnis der Überwachung von HTML-Formulareingaben

Heute habe ich einen Blogbeitrag über Eingabeerei...