Hvordan lage et bilde punktliste i CSS

November 15

Noen ganger tar det bare en liten bit av nyhet å lage en webside skiller seg ut fra resten. Som et nettsted utvikler, kan du eksperimentere med dristige fargekombinasjoner, prøve eksotiske nye skrifter eller bare gjøre små endringer i en HTML listeelement. Sorterte lister - definert ved hjelp av ul HTML-koden - viser standard runde kuler som standard. Du trenger ikke å bruke disse kulene for listene. Lag en en-linje CSS-klasse som inneholder en "list-style-image" attributt, og du kan konvertere alle listens kuler til et bilde av ditt valg.

Bruksanvisning

1 Åpne HTML-editor og lim inn denne koden i hodet delen av en av HTML-dokumenter:

<Style type = "text / css">
.imageBullet {list-style-image: url (image_name); }
</ Style>

Denne koden skaper CSS-klasse som setter verdien for list-style-image til navnet spesifisert i url-attributtet. Erstatt "image_name" med nettadressen til et bilde på nettet.

2 Legg til følgende kode i dokumentets hoveddel:

<Ul class = "imageBullet">
<Li> Red </ li>
<Li> Blå </ li>
<Li> Grønn </ li>
</ Ul>

Dette skaper en enkel liste som inneholder farger. Merk at koden refererer til imageBullet CSS-klasse. Fordi den refererer at klassen, vil listen satt sine kuler bruke bildet definert i CSS-klasse.

3 Lagre dokumentet og åpne den i en nettleser for å se bildepunkttegnene som vises på listen.

Hint

Husk å bruke små bildene for kulene dine. Små GIF-bilder som piler gjøre gode kuler.