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. Zu diesem Zeitpunkt dachte ich, ob es eine CSS-Eigenschaft zum Anpassen der Listenelemente gäbe. 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. Der Standardstil der
- -Beschriftung fehlt. 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. Es gibt kein Problem bei der Verwendung von insite (Listenelemente befinden sich innerhalb der Zeile), 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. Mit dieser Lösung kann die Position des Musters flexibel gesteuert werden, 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.
Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung benutzerdefinierter Listenelemente im Listenstil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
