Heim > Artikel > Web-Frontend > Was bedeutet Listenstil? Detaillierte Erläuterung der Stilattribute des Listenstils
Was bedeutet Listenstil? Detaillierte Erläuterung der Stilattribute des Listenstils
- 云罗郡主nach vorne
- 2018-11-22 14:58:4043258Durchsuche
Der Inhalt dieses Artikels befasst sich mit der Bedeutung des Listenstils. Ich hoffe, dass er für Freunde in Not hilfreich ist.
1. Die Funktion und Verwendung von list-style
list-style besteht darin, den Stil von list-li festzulegen. Vor li stehen beispielsweise arabische Ziffern, Punkte, Vollkreise, Bilder, Hohlkreise, englische Kleinbuchstaben, englische Großbuchstaben, traditionelle armenische Ziffern usw.
2. Grammatik:
Listenstil: Listenstil-Liste || -style-typeWir wissen, dass die HTML-Syntax vorschreibt, dass li innerhalb von ul oder ol verwendet werden muss. Daher können Sie für ul oder ol list-style-image festlegen, um Bilder als vorderes Layoutmaterial von li einzuführen . Normalerweise wird diese Methode jedoch nicht verwendet, um das vordere Bildmaterial von li während des Div-CSS-Layouts festzulegen. Normalerweise wird das Hintergrundbild direkt auf li festgelegt, was besser kompatibel und einfacher zu steuern ist. Wir verwenden das List-Style-Type-Attribut, bei dem es sich hauptsächlich um List-Style handelt, um den Standard-Frontstil von li festzulegen. 2. Werte und Erklärungen des Listenstiltyps Sie können es selbst testen, um die Auswirkungen verschiedener Werte zu sehen. Parameter:
3. Allgemeine Layoutpraktiken
Normalerweise benötigen Sie beim Layouten einer Webseite Um CSS zu starten, entfernen Sie den Listenstil der drei Listen ul ol li, um auch mit den wichtigsten Browsern kompatibel zu sein, und brechen Sie den Standardlistenstil des Listen-Tags ab.
Kündigen Sie den Listenstil-Stilcode von ul li ol:ul,ol,li{list-style:none}Setzen Sie auf der Webseite einen Punkt vor der Liste und legen Sie dann das Hintergrundbild für li fest. 1. Der Code lautet wie folgt: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ul li布局实例</title>
<style>
ul, ol, li {list-style: none;margin:0; padding:0;normal;font:14px/24px Arial}
</style>
</head>
<body>
<ul class="ab">
<li>php.cn-1</li>
<li>php.cn-2</li>
<li>php.cn-3</li>
</ul>
</body>
</html>Der Effekt ist wie folgt:
2 >Li ul ol oben entfernen Der Standard-Listenstil der drei setzt mragin und padding auf 0, die Schriftgröße beträgt 14 Pixel und die Zeilenhöhe beträgt 24 Pixel. Warum nicht Lis eigenen Listenstiltyp verwenden, um den Punkteffekt festzulegen? 
CSS3-Tutorial
erfahren möchten, lesen Sie bitte die chinesische PHP-Website.Das obige ist der detaillierte Inhalt vonWas bedeutet Listenstil? Detaillierte Erläuterung der Stilattribute des Listenstils. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!