Innholdsfortegnelse:
Video: Kurs i webutvikling: HTML5 (1 av 3) | Utdannet.no 2024
Det er ikke helt en bakgrunn, men du kan også bruke bilder for listeposter for HTML5 og CSS3 websiden din. Noen ganger kan det være lurt å ha en spesiell kulde for lister.
På denne siden er flere varianter av paprika oppført. For denne typen liste er en egendefinert pepper bullet bare tingen. Selvfølgelig er CSS svaret:
listImages. html li {list-style-image: url ("pepper. gif");}My Favorite Peppers
- Grønn
- Habenero
- Arrivivi Gusano
Attributtlistestilen tillater deg å legge ved et bilde til en liste element. Slik lager du egendefinerte kuler:
-
Begynn med et tilpasset bilde.
Bulletbilder skal være små, så du må kanskje lage noe lite. Bildet vil bli trimmet til en passende bredde, men den vil ha hele høyden på det opprinnelige bildet, så gjør det lite.
-
Angi listestilen-bildet med et URL-attributt.
Du kan sette bildet som listestilbildet, og alle kulene vil bli erstattet med bildet.
-
Test listen i nettleseren din.
Pass på at alt fungerer som det skal. Sjekk for at nettleseren kan finne bildet, at størrelsen er riktig, og at alt ser ut som du forventer.
Hvis du ikke vil bruke et bilde, har CSS en rekke andre stiler du kan søke på listelistene dine. Bruk rullegardin-regelen til å sette listen til en av mange stiler. Se på offisiell CSS-dokumentasjon for en komplett liste, men de vanligste stiltypene er disk, sirkel, firkant, desimal, øvre roman, lavere roman, øvre latin og lavere latin.
Merk at du kan bruke en numerisk styling til et listepost i en bestilt eller uordnet liste, så forskjellen mellom disse listetyper er mindre viktig enn den pleide å være.