Was bedeutet Listenstil? Detaillierte Erläuterung der Stilattribute des Listenstils-CSS-Tutorial-php.cn

Was bedeutet Listenstil? Detaillierte Erläuterung der Stilattribute des Listenstils

云罗郡主

Freigeben： 2018-11-22 14:58:40

nach vorne

43307 Leute haben es durchsucht

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-type

Wir 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:

Was bedeutet Listenstil? Detaillierte Erläuterung der Stilattribute des Listenstils 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}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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? Was bedeutet Listenstil? Detaillierte Erläuterung der Stilattribute des Listenstils

Dies liegt daran, dass es zwischen verschiedenen Browsern bestimmte Unterschiede gibt, um unterschiedliche Punkteffekte und unterschiedliche Abstände von links zu vermeiden. Daher wird der Listenstil einheitlich aufgehoben und der Hintergrundstil für die Layoutimplementierung wiederverwendet.

Das Obige ist eine vollständige Einführung in die Bedeutung von Listenstilattributen. Wenn Sie mehr über das

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!