Einführung in die Verwendung benutzerdefinierter CSS-Listenelemente im Listenstil-CSS-Tutorial-php.cn

Heute habe ich eine Rekrutierungsseite für ein Unternehmen erstellt. Ich beende die Entwurfszeichnungen morgens und beginne nachmittags mit dem Satz. Die Seite kopierte die Rekrutierungsseite eines Talentbüros, das ich zuvor erstellt hatte, und die Navigationsleiste und das Banner kamen schnell heraus. Ich habe an einigen Stellen in diesem Inhalt Listen verwendet, und natürlich muss ich -Tags verwenden. Die Listenelemente (kleine Punkte) werden in kleine grüne Quadrate umgewandelt. Derzeit frage ich mich, ob es eine CSS-Eigenschaft zum Anpassen der Listenelemente gibt. Das muss man nicht wissen, es existiert wirklich. list-style kann list-style-type, list-style-position und list-style-image definieren. Diese drei Attribute können zusammen geschrieben werden. list-style-image ist genau das benutzerdefinierte Listenelementmuster.

Bevor ich mit der Definition begann, stieß ich auf zwei Probleme: 1. Die Standard-Stilpunkte des -Tags fehlten. Nach der Überprüfung stellte ich fest, dass das Initialisierungs-Stylesheet list-style: none definierte, was dazu führte, dass die standardmäßigen kleinen Punkte entfernt wurden. Dann müssen wir den Listenstil von definieren. 2. List-style-position hat zwei optionale Werte: insite und outsite. Bei der Verwendung von insite (Listenelemente befinden sich innerhalb der Zeile) gibt es kein Problem, aber bei Verwendung von outsite (Listenelemente befinden sich außerhalb der Zeile) verschwinden die kleinen Punkte. Es stellt sich heraus, dass das Initialisierungs-Stylesheet als overflow:hidden definiert und der Teil, der überläuft, abgeschnitten wird. Und ist in enthalten, sodass die überlaufenden Listenelemente abschneidet. Definieren Sie einfach als hier sichtbaren Standard.

Sie können mit der Anpassung des Listenmusters beginnen. Schneiden Sie zunächst das Muster aus PS aus und speichern Sie es am vorgesehenen Ort. Definieren Sie das Listenstilbild: url(i/icon.gif). Das Problem besteht darin, dass das Muster nicht horizontal mit dem Text zentriert ist. Baidu, Japan muss eine feste Höhe festlegen, die Einstellung ist nutzlos. Nach sorgfältiger Prüfung stellt sich heraus, dass Vorgänger bereits Erfahrungen mit benutzerdefinierten Mustern gemacht haben: Lösung 1: Fügen Sie beim Ausschneiden des Listenelementmusters einen Leerraum am unteren Rand ein. Diese Lösung muss sicherstellen, dass der Leerraum des Musters konsistent ist mit der Hintergrundfarbe der Seite. Ich halte diese Lösung für unelegant, da die Schriftart möglicherweise größer oder kleiner wird und daher nicht wiederverwendet werden kann. Option 2: Verwenden Sie das Hintergrundattribut, um das Artikellistenmuster anzupassen. Diese Lösung kann die Position des Musters flexibel steuern, und der Abstand zwischen Text und Muster ist ebenfalls einfach zu steuern (ich werde Ihnen nicht sagen, dass Sie den Abstand mithilfe von Polsterung steuern sollen). Zusammenfassend lässt sich sagen, dass es für das Initialisierungs-Stylesheet tatsächlich sinnvoll ist, die Standardpunkte von zu entfernen. Erstens werden Listenelemente in den meisten Fällen nicht verwendet. Zweitens ist die Verwendung des Listenstils zum Anpassen von Listenelementen wirklich schwer zu kontrollieren.