Wie man eine Bildliste Bullet in CSS

Manchmal dauert es nur ein winziges bisschen Neuheit zu einer Web-Seite vom Rest abheben. Als Website-Entwickler können mit kühnen Farbkombinationen experimentieren, versuchen exotische neue Schriften oder einfach ein HTML-Listenelement subtile Änderungen vornehmen. Ungeordnete Listen--mit dem Ul-HTML-Tag definiert--standard-Runde Kugeln standardmäßig angezeigt. Du musst diese Kugeln für Ihre Listen zu verwenden. Erstellen Sie eine einzeilige CSS-Klasse mit einem "List-Style-Image"-Attribut, und Aufzählungszeichen zu einem Bild Ihrer Wahl umwandeln.

Anweisungen

1 Öffnen Sie Ihren HTML-Editor, und fügen Sie diesen Code in den Head-Bereich eines Ihrer HTML-Dokumente:

< Typ style = "Text/Css" >.imageBullet {List-Style-Image: url(IMAGE_NAME);}< / style >

Dieser Code erstellt die CSS-Klasse, die den Wert für List-Style-Image in das Url-Attribut angegebene Name festlegt. Ersetzen Sie "IMAGE_NAME" durch die URL eines Bildes im Web.

2 Body-Bereich des Dokuments den folgenden Code hinzufügen:

< Ul Class = "ImageBullet" >Red < li > </li >Blau < li > </li >Grün < li > </li ></ul >

Dadurch entsteht eine einfache Liste mit Farben. Beachten Sie, dass das Tag die ImageBullet-CSS-Klasse verweist. Da diese Klasse verwiesen wird, wird die Liste seiner Kugeln mit Hilfe des Bildes in der CSS-Klasse definierten festgelegt.

3 Speichern Sie das Dokument, und öffnen Sie sie in einem Browser zu sehen, die Bild-Kugeln, die erscheinen auf der Liste.

Tipps & Warnungen

• Denken Sie daran, kleine Bilder für Deine Kugeln zu verwenden. Kleine GIF-Bilder wie Pfeile stellen ausgezeichnete Kugeln.