CSS for å lage lister med øyefangst

• Kan 4, 2024

Lister er et flott webdesignelement fordi de gir enkel lesing av sluttbrukeren. De fleste brukere vil ha svar raskt, og vil bare skumme en webside innledningsvis for å se om den svarer på spørsmålet deres. Dette gjelder spesielt hvis de kommer inn på nettstedet ditt via en søkemotor.

Bruken av overskriftskoder og lister er en flott måte å tillate folk å se det primære innholdet på nettstedet ditt på. Hvis de synes listene og underoverskriftene er interessante, er det større sjanse for at de vil forbli på nettstedet ditt. Dette fører selvfølgelig til reduserte "avvisningsrater" og bidrar til å forbedre nettstedets troverdighet og rangering i motorene. Alt som forbedrer lesbarheten, og som gjør det lettere for skummet å skumme, vil alltid være et nettsted. Et flott design holder alltid lesbarheten i tankene.

CSS er en enkel og veldig effektiv måte å lage stilige lister med tilpassede kuler (markører). Du kan inkludere forskjellige former eller enkel tilpasset grafikk som knytter seg til nettstedets logo, farger eller tema. For eksempel, på et nettsted for spøkelsesreiser, opprettet jeg et lite spøkelsesikon som ble brukt i navigasjonslinjen på siden og på uordnede listeelementer på hovedsiden. Det var enkelt, men veldig søtt og knyttet til nettstedets tema, noe som fikk disse sideelementene til å skille seg ut.

Andre ganger kan kuler distrahere fra viktig innhold i en liste. I så fall kan en listestilegenskap med "ingen" brukes til å fjerne de automatisk genererte markørene.

Liste stilegenskaper

Bruk egenskapen listetype-type for å velge typen markør som vises med hvert listeelement. Verdier som er tilgjengelige er plate, sirkel, firkant, desimal, lavere romersk, øvre romersk, lavere gresk, lavere latin, øvre latin, nedre alfa, øvre alfa og ingen.

For å spesifisere ditt eget bilde som en markør, bruk egenskapen listestil-bilde som følger:

ul {listestil-bilde: url (imagename.jpg);
liste-stil-stilling: utenfor;
}

Url-adressen er i forhold til stilarket og skal peke på mappen der bildet ditt er. I dette tilfellet vil bildet være i samme mappe som css- og html-filen. Hvis du plasserer bildene dine i en egen mappe, vil du inkludere det også: url (bilder / imagename.jpg)

Markørstillinger

Du kan også tilpasse markørposisjonen. I eksemplet over får den ytre egenskapen kulen til å vises utenfor innholdsområdet.
listestil-plassering: inni tillater kulen i innholdsområdet, slik at den løper inn i listeinnholdet.

Shorthand-teknikk

En annen rask måte å formatere en liste på ved hjelp av CSS, er stenografi-teknikken. Med denne metoden er alle listegenskaper spesifisert i en enkelt egenskap:

ul
{
listestil: sirkel url ("image.gif");
}

I korthetsmetoden må alle verdiene vises i en spesifisert rekkefølge som følger:

list-style-type
listestil-plassering (inne, ute)
list-style-image

Det har ikke noe å si om du hopper over en verdi, så lenge de andre forblir i riktig rekkefølge.

Tilpassede lister er veldig nyttige, og CSS gjør dem enkle å oppnå. Enkle detaljer forvandler gjennomsnittlige nettsteder til nettsteder som gir best ytelse.