Beispielerklärung des CSS-Listenstils

CSS-Liste

CSS-ListeAttribut funktioniert wie folgt:

Verschiedene Listenelemente festlegen, die als geordnete Listen markiert werden sollen

Verschiedene als ungeordnete Liste markierte Listenelemente festlegen

Als Bilder markierte Listenelemente festlegen

Liste

In HTML gibt es zwei Arten von Listen:

Ungeordnete Liste – Listenelemente werden mit speziellen Grafiken markiert (z. B. kleine schwarze Punkte, kleine Kästchen usw.)

Geordnete Liste – Listenelemente werden mit Zahlen oder Buchstaben markiert

Verwenden Sie CSS, Es können weitere Stile aufgelistet und Bilder als Markierungen für Listenelemente verwendet werden.

Verschiedene Listenelement-Tags

Das list-style-type-Attribut gibt den Typ des Listenelement-Tags an: :

Instanz

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

Einiger Wert sind ungeordnete Listen und einige sind geordnete Listen.

Bild als Listenelementmarkierung

Um ein Bild als Listenelementmarkierung festzulegen, verwenden Sie das Listenstil-Bildattribut:

Instanz

ul
{
list-style-image: url('sqpurple.gif');
}

oben Beispiele werden nicht in allen Browsern gleich angezeigt. IE und Opera zeigen Bild-Tags etwas höher an als Firefox, Chrome und Safari.

Wenn Sie das gleiche Bildlogo in allen Browsern platzieren möchten, sollten Sie die Browserkompatibilitätslösung verwenden. Der Vorgang ist wie folgt:

Browserkompatibilitätslösung

Auch in allen Browsern wird im folgenden Beispiel das Bild-Tag angezeigt:

Beispiel

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px; 
padding-left: 14px; 
}

Beispiel Erklärung:

ul:

Der Stiltyp „Einstellungen Liste“ ist „Keine“. Listenelement-Tag entfernen

Abstand und Rand auf 0 Pixel setzen (Browserkompatibilität)

Alles in ul:

Legen Sie die URL des Bildes fest und Legen Sie fest, dass es nur einmal angezeigt wird (keine Duplizierung).

Positionieren Sie das Bild an der gewünschten Stelle (0 Pixel links und 5 Pixel oben und unten).

Platzieren Sie den Text mithilfe des Attributs padding-left in der Liste Im

list-abbreviation attribute

können alle Listenattribute in einem einzigen Attribut angegeben werden. Dies wird als Abkürzungsattribut bezeichnet.

Verwenden Sie abgekürzte Attribute für Listen. Die Listenstilattribute werden wie folgt festgelegt:

Instanz

ul
{
list-style: square url("sqpurple.gif");
}

Wenn abgekürzte Attributwerte verwendet werden, ist die Reihenfolge der Werte ​​ist:

list -style-type

list-style-position (Anweisungen finden Sie in der CSS-Eigenschaftstabelle unten)

list-style -image

Wenn einer der oben genannten Werte fehlt und die restlichen noch in der angegebenen Reihenfolge sind, spielt das keine Rolle.

【Verwandte Empfehlungen】

1. Besondere Empfehlung: Version „php Programmer Toolbox“ V0.1 herunterladen

2. Kostenloses CSS-Online-Video-Tutorial

3. php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonBeispielerklärung des CSS-Listenstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!