Heim > Artikel > Web-Frontend > In Bezug auf das Problem des Listenstils, bei dem das Listenattribut in CSS geändert wird, um den Li-Tag-Stil zu steuern
In Bezug auf das Problem des Listenstils, bei dem das Listenattribut in CSS geändert wird, um den Li-Tag-Stil zu steuern
- 不言Original
- 2018-06-11 14:50:192384Durchsuche
Dieser Artikel befasst sich hauptsächlich mit der Änderung des Listenattributs in CSS, um den Li-Tag-Stil zu steuern. Jetzt kann ich ihn mit Ihnen teilen
list_style-Attribute werden verwendet, um die Attribute der Liste zu ändern, list-style-type wird verwendet, um den Listenelementtyp festzulegen, list-style-position wird verwendet, um die Position des Listenelements festzulegen, und list-style-image wird verwendet um die Verwendung von Bildern zum Ersetzen der Listenelementmarkierung festzulegen
list_style-Attribut wird verwendet, um die Attribute der Liste zu ändern
Das Format ist wie folgt:
list_style: Listenelement-Markierungstyp Position der Listenelement-Markierung Listenelement-Markierung;
kann auch alleine verwendet werden Listenelement-Tag festlegen:
list-style-type wird zum Festlegen des Listenelementtyps verwendet:
Die Der Standardwert ist die Scheibe, die ein ausgefüllter Kreis ist.
Gemeinsame Werte: keine leer
Kreis Hohlkreis
Quadrat ausgefüllte Quadrate
Dezimalzahlen
lateinische Kleinbuchstaben a, b, c. ...
Großlateinische Großbuchstaben A, B, C....
list-style-position Wird verwendet, um die Position dieses Listenelements festzulegen:
Der Standardwert „außen“ bedeutet außerhalb des li-Tags . Dies dient zum Hinzufügen eines Randes zum li: 1px solides Rot; Sie können die Position der Markierung sehen.
innen bedeutet, dass sich die Markierung innerhalb des li-Tags befindet, was beim Hinzufügen eines Rahmens deutlich sichtbar ist.
list-style-image wird verwendet, um die Verwendung von Bildern zum Ersetzen von Listenelement-Tags festzulegen:
Standardwert: keiner
Optionaler Wert: URL, das Format ist URL ("URL-Adresse"); >Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul {
border:1px solid red;
}
li{
border:1px solid red;
list-style:disc outside url(news_list.gif);
list-style-position:5px;
}
</style>
</head>
<ul>
<li>你好</li>
<li>我好</li>
</ul>
<body>
</body>
</html>Spezifiziert ein „list-style-type“-Attribut für den Fall, dass das Bild nicht verfügbar ist. Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website. Verwandte Empfehlungen:
Der Unterschied und die Priorität der Verwendung von href und onclick im A-Tag von HTML
Anleitung Verwenden Sie CSS3. Linearer Farbverlauf. Linearer Farbverlauf erstellt Rahmen.
Das obige ist der detaillierte Inhalt vonIn Bezug auf das Problem des Listenstils, bei dem das Listenattribut in CSS geändert wird, um den Li-Tag-Stil zu steuern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!