Teilen Sie drei Methoden zum Hinzufügen von Symbolen zu Li-Tags

Beim Layout der Seite verwenden wir oft das Li-Tag. Manchmal ist es relativ eintönig, Bilder zum Li-Tag hinzuzufügen. In diesem Artikel werden drei Methoden zum Hinzufügen von Symbolen zu Li-Tags vorgestellt. Ich hoffe, dass er für Sie nützlich sein wird.

1. Verwenden Sie die speziellen Attribute von CSS

ul{list-style-type:disc;} //Die Rolle der Scheibe Es wird vor jedem li ein schwarzer Punkt eingefügt. Andere häufig verwendete Werte sind „Quadrat“: „Schwarzes Quadrat“, „Keine“: kein Listenstil; B.

ul{list-style-position:inside;} oder external

Wenn Sie Ihr eigenes benutzerdefiniertes Muster hinzufügen möchten, können Sie

verwenden ul{list-style-image:url (Bildadresse);}

Natürlich kann dies auch mit Position verwendet werden.

Aber ich habe die oben genannten Attribute nie angewendet und empfehle sie nicht jedem. Warum?

Erstens zeigt der Listenstil-Typ von ul in verschiedenen Browsern unterschiedliche Größen von Punkten oder Kästchen an, was sehr unansehnlich ist.

Außerdem ist das Positionsattribut nicht einfach zu verwenden. Das Ergebnis ist, dass die in IE6 und höher angezeigte Ausrichtung schwer zu vereinheitlichen ist.

2. Ich empfehle die Verwendung von Hintergrund

ul{….;list-style-type:none;….}

li{…. ;background:url (Hintergrundsymbol) no-repeat 0px 0px;….}

Die Funktion von no-repeat besteht hier darin, zu verhindern, dass das Bild einen Kacheleffekt erzeugt, und 0px und 0px sind die Koordinaten für die Positionierung die Bilddarstellung.

Noch ein Punkt hier: Wenn Sie ein Hintergrundbild zu li hinzufügen, müssen Sie auch padding-left: any number px hinzufügen, sonst blockiert der Text das Hintergrundsymbol, aber gleichzeitig dürfen Sie dies nicht tun Fügen Sie die Breite zu li hinzu, da es sonst ein Problem mit der Kompatibilität unter dem Browser gibt. Bitte beachten Sie die Positionierung im CSS und verwenden Sie das Auffüllattribut mit Vorsicht

3. Verwenden Sie den Hintergrund um die Rangliste zu implementieren

Tatsächlich ist das ganz einfach, Sie müssen es nur anpassen. Machen Sie es einfach mit einem Klick

ul{….;background:url(path) no-repeat 1px 2px;….🎜>

Sie sollten wissen, dass Sie das Bild einfach zu ul statt zu li hinzufügen müssen, aber der Unterschied besteht darin, dass es sich bei den Bildern um 1, 2, 3 ... Bilder handelt, die ordentlich in Spalten angeordnet sind Reihenfolge oder andere gewünschte Effekte. Beachten Sie, dass die Höhe jeder Zeile genau dem Bild entspricht.

Das obige ist der detaillierte Inhalt vonTeilen Sie drei Methoden zum Hinzufügen von Symbolen zu Li-Tags. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!