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!
