Hvordan erstatte Bullets med et bilde i CSS

Når du oppretter sorterte lister for nettstedet ditt, viser nettleseren automatisk kuler, som ser ut som mørke sirkler eller firkanter, ved siden av hvert listepunkt. Du har muligheten til å erstatte disse kulene med dine egne bilder ved hjelp av Cascading Style Sheets (CSS). CSS-stil regelen lar deg spesifisere spesielle bildet du ønsker å bruke i stedet for kulen, slik at du kan lage tilpassede lister som bedre støtter utformingen av nettstedet ditt.

Bruksanvisning

1 Logg deg på Web vert konto som administrerer nettstedet. Last opp bildet som erstatter din kule i den samme mappen hvor ditt nettsted filer ligge og noterer URL-plasseringen.

2 Ta opp din tekst editor program og åpne websiden som inneholder kuler du ønsker å erstatte.

3 Skriv "<style type =" text / css "> </ style>" før den avsluttende </ head> tag øverst i dokumentet. Denne koden skaper den interne stilark delen der du skriver inn CSS-regler.

4 Plasser markøren mellom stil koder og skriv "ul" for å lage en regel som styrer listen. Følg din oppføring med et par klammeparenteser som så:

ul {}

5 Skriv "list-style-image: URL ( '');" mellom konsollene og skriv inn nettadressen til bildet erstatte kulene mellom parentes. Den komplette stil kode nå ser ut som følgende eksempel:

<Style type = "text / css">

ul {list-style-image: URL ( 'http://www.site.com/bullet.gif'); }

</ Style>

Den "ul" delen av stilen regelen erstatter automatisk kuler av alle de sorterte lister på siden din.

6 Lagre filen og laste den tilbake til din Web vert til å publisere den nye listen bildene.