In diesem Artikel wird hauptsächlich das Schreiben von Listen im CSS-Stil vorgestellt. Bevor wir lernen, erinnern wir uns an die geordneten und ungeordneten Listen in HTML.
Beispiel:
<span>Ungeordnete Liste – Meine Hobbys: </span><ul><li>Kaffee </li><li>Milch </li><li>Saft </li></ul><span>Ja Sequenzliste - Punkteranking: </span><ol><li>Zhang San</li><li>Li Si</li><li>Zhao Wu</li></ol>
Die Laufergebnisse sind wie folgt:
Die Rolle von CSS-Listenattributen:
(1) Legen Sie fest, dass verschiedene Listenelemente als geordnete Listen markiert werden sollen
(2) Legen Sie fest, dass verschiedene Listenelemente als ungeordnete Listen markiert werden sollen
(3) Legen Sie fest, dass das Listenelement als Bild markiert werden soll
In HTML gibt es zwei Arten von HTML-Listen:
(1) Ungeordnete Liste: Listenelemente werden mit speziellen Grafiken markiert (z. B. kleine schwarze Punkte, kleine Kästchen usw.).
(2) Geordnete Liste: Listenelemente werden mit Zahlen oder Buchstaben gekennzeichnet
(3) Mit CSS können weitere Stile aufgelistet und Bilder als Listenelementmarkierungen verwendet werden.
List-Shorthand-Attribut
Alle Listenattribute können in einem einzigen Attribut angegeben werden. Dies ist das sogenannte Abkürzungsattribut. Die Reihenfolge der Verwendung von Abkürzungsattributwerten ist:
1. Listenstiltyp
2. Listenstil-Position
3. Bild im Listenstil
Wenn bei der Abkürzung von Attributen einer der oben genannten Werte fehlt und die anderen noch in der angegebenen Reihenfolge sind, hat dies keine Auswirkungen.
1. Listenstil-Typ ungeordneter Listenstil
Beispiel:
<!DOCTYPEhtml><html><head><metacharset=utf-8><style>.ul-none{list-style-type:none;}.ul-circle{list-style-type:circle;}.ul -square{list-style-type:square;}</style></head><body><ul><li>Basketball</li><li>Fußball</li><li>Tischtennis</li ></ul><ulclass=ul-none><li>Basketball </li><li>Fußball </li><li>Tischtennis </li></ul><ulclass=ul-circle><li >Basketball</li><li>Fußball</li><li>Tischtennis</li></ul><ulclass=ul-square><li>Basketball</li><li>Fußball</li> <li>Tischtennis</li></ul></body></html>Laufergebnisse:
Beispiel:
<!DOCTYPEhtml><html><head><style>ul{list-style-type:circle;}ol{float:left;}.ol_one{list-style-type:lower-roman;}.ol_two{list- style-type:lower-greek;}.ol_ three{list-style-type:georgian;}</style></head><body><ul><li>Name</li><li>Geschlecht</li ><li>Geburtsort</li></ul><olclass=ol_one><li>Name</li><li>Geschlecht</li><li>Geburtsort</li></ol> <olclass=ol_two ><li>Name</li><li>Geschlecht</li><li>Geburtsort</li></ol><olclass=ol_ three><li>Name</li><li >Geschlecht</li> <li>Geburtsort</li></ol></körper></html>Laufergebnisse:
2. Listenstil-Position geordneter Listenstil
Beispiel:
<!DOCTYPEhtml><html><head><style>ol{list-style-type:lower-roman;}li{background:#ccc;margin-bottom:2px;}.ol_one{list-style-position:inside ;}.ol_two{list-style-position:outside;}</style></head><body><olclass=ol_one><li>Name</li><li>Geschlecht</li><li>Telefon Nummer </li></ol><olclass=ol_two><li>Adresse</li><li>Postleitzahl</li><li>Mail</li></ol></body></html>Laufergebnisse:
3. list-style-image ändert das Bild der Listenmarkierung
4. Listenstil
Das ist-style-Attribut ist die Abkürzung der oben genannten drei Attribute (list-style-type, list-style-position, list-style-image). Sie können list-style verwenden, um die oben genannten drei Attribute gleichzeitig festzulegen. Das Syntaxformat ist wie folgt:
list-style:list-style-type||list-style-position||list-style-image;