So verwenden Sie ein Listenstil-Attribut in CSS-CSS-Tutorial-php.cn

So verwenden Sie ein Listenstil-Attribut in CSS

不言

Freigeben： 2018-12-11 11:32:53

Original

6458 Leute haben es durchsucht

list-style ist ein Attribut, das neben dem Symbol eines ausgefüllten Kreises oder eines ausgefüllten Quadrats auch auf das Tag gesetzt werden kann Geben Sie natürlich auch Zahlen und Buchstaben an. In diesem Artikel erfahren Sie, wie Sie Listenattribute verwenden.

So verwenden Sie ein Listenstil-Attribut in CSS

Durch das Festlegen des Listenstil-Attributs können Sie automatisch verschiedene Tags vor den Listenelementen anzeigen. Die Einstellungen für die Listen-Tags umfassen Listenstil-. type und So verwenden Sie ein Listenstil-Attribut in CSS zwei Attribute.

So verwenden Sie ein Listenstil-Attribut in CSS: Token und Buchstaben als Listenelementmarkierungen festlegen.

So verwenden Sie ein Listenstil-Attribut in CSS: Legen Sie ein Bild als Listenelement-Markup fest.

So verwenden Sie ein Listenstil-Attribut in CSS

So verwenden Sie ein Listenstil-Attribut in CSS hat die Form

So verwenden Sie ein Listenstil-Attribut in CSS：指定的符号值;

Nach dem Login kopieren

und wird kontinuierlich auf lis-style angezeigt - Typ ● oder ■ Symbole wie 1, 2, 3...a, b, c... und andere Zahlen und Buchstaben werden der Reihe nach angezeigt.

Beim Festlegen des Symbols

So verwenden Sie ein Listenstil-Attribut in CSS: square;

Nach dem Login kopieren

Wenn Sie den obigen Code eingeben, können Sie das Symbol des ausgefüllten Quadrats am Anfang anzeigen.

Wenn Sie die Scheibe im quadratischen Teil eingeben, wird ein ausgefülltes Kreissymbol angezeigt. Wenn Sie einen Kreis eingeben, wird ein offenes Kreissymbol angezeigt.

Beim Festlegen fortlaufender Zahlen oder Buchstaben

So verwenden Sie ein Listenstil-Attribut in CSS: decimal;

Nach dem Login kopieren

Wenn Sie den obigen Code eingeben, wird er in der Reihenfolge 1, 2, 3... vom Anfang der Liste angezeigt.

Wenn Sie Kleinbuchstaben im Dezimalteil eingeben, wird in alphabetischer Reihenfolge in Kleinbuchstaben sortiert. Wenn Sie Großbuchstaben eingeben, wird in alphabetischer Reihenfolge in Großbuchstaben sortiert Ziffern und griechische Buchstaben.

Bild im Listenstil

Bild im Listenstil hat die folgende Form

So verwenden Sie ein Listenstil-Attribut in CSS : url("图像路径");

Nach dem Login kopieren

Laden Sie zuerst die Bilddatei hoch, die Sie verwenden möchten Auf dem Server wird der Pfad des Eingabebildes als Markierung angegeben.

Der Pfad des Bildes kann ein absoluter Pfad oder ein relativer Pfad sein.

Wenn So verwenden Sie ein Listenstil-Attribut in CSS und So verwenden Sie ein Listenstil-Attribut in CSS gleichzeitig festgelegt sind, hat lis-style-image Vorrang.

Sehen wir uns ein konkretes Beispiel an

Der Code lautet wie folgt

HTML-Code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<ul class="list1">
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
</ul>
</body>
</html>

Nach dem Login kopieren

Lassen Sie uns zunächst den Listenstiltyp festlegen Attribut

Symbol setzen

CSS-Code

.list1 {
So verwenden Sie ein Listenstil-Attribut in CSS : circle;
}

Nach dem Login kopieren

Der Anzeigeeffekt im Browser ist wie folgt: Vorne befindet sich ein hohler Kreis der Liste

So verwenden Sie ein Listenstil-Attribut in CSS

Aufeinanderfolgende Zahlen oder Buchstaben festlegen

CSS-Code

.list1 {
So verwenden Sie ein Listenstil-Attribut in CSS : lower-alpha;
}

Nach dem Login kopieren

Der Laufeffekt ist wie folgt: Die Vorderseite der Liste ist in alphabetischer Reihenfolge in Kleinbuchstaben angeordnet Der HTML-Code ist derselbe wie oben

Der CSS-Code lautet wie folgt So verwenden Sie ein Listenstil-Attribut in CSS

.list1 {
So verwenden Sie ein Listenstil-Attribut in CSS : url("img/d.jpg");
}

Nach dem Login kopieren

Der Laufeffekt ist wie folgt: Vor der Liste befindet sich ein Bild

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ein Listenstil-Attribut in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!