Luo luettelopisteitä HTML: ään käyttämällä
- tunnisteet.
Luettelokohtien käyttäminen auttaa hajottamaan suuria tekstipaloja ja osoittamaan luetteloita hyödyllisistä tiedoista. Luettelomerkit on helppo luoda tekstinkäsittelyohjelmistossa, mutta kun kirjoitat HTML-dokumenttia, sinun on tiedettävä koodi niiden luomiseksi. Luetteloluettelon luomiseen ei tarvita paljon koodia. Kääri jokainen luettelo
- tai "järjestämätön lista" -tunnisteet. Voit sitten tehdä mitä tahansa luettelomerkkiluettelolla käyttämällä Cascading Style Sheet -koodia.
Vaihe 1
Kirjoita luettelo kohdistesi teksti. Aloita jokainen piste omalta viivaltaan. Kääri jokainen rivi sisään
Päivän video
Vaihe 2
Luo tyhjä rivi luettelomerkityn luettelon yläpuolelle ja kirjoita sitten aukko
- -tagia kyseisellä rivillä. Etsi luettelomerkityn luettelon loppu ja luo sitten toinen tyhjä rivi siihen. Kirjoita lopetus
- tag. Tässä on esimerkki lyhyestä luettelomerkkiluettelosta ID-attribuutilla:
- Yksi luoti
- Luoti kaksi
Vaihe 3
Käytä "tyyliä" luodaksesi luettelomerkkiluettelosi CSS-koodilla. Lisää CSS-koodi tagien väliin - ja -tunnisteiden väliin tai voit kirjoittaa CSS-koodin ulkoiseen .CSS-tiedostoon ja upottaa tiedoston käyttämällä tagi näin:. Muuta "path/to/stylesheet.css" luomasi .CSS-tiedoston polulla. Käytä tunnus- tai luokkaattribuuttia valitaksesi luettelomerkit, kuten esimerkiksi:
#mylist li { font-style: kursivoitu; }
Yllä oleva koodi valitsee kaikki
Vaihe 4
Käytä "list-style" -ominaisuutta CSS: ssä muuttaaksesi luettelomerkkityyppiä. Käytettävissä olevia luettelomerkkityyppejä ovat avoimet ympyrät, täytetyt levyt ja neliöt numeroimattomille, ei-aakkosjärjestetyille luetteloille. Tässä on esimerkki neliönmuotoisista luettelomerkeistä:
#mylist li {list-style: square;}
Kärki
Käytä
- tagin sijaan
- luodaksesi järjestettyjä listoja. Tämän jälkeen voit asettaa "luettelotyylisen" tyypin erilaisille numeroille tai kirjaimille.
- merkitse ei-toistuva, vasemmalle tasattu taustakuva. Lisää pehmusteet kunkin vasemmalle puolelle
- -tagia siirtääksesi tekstin päälle, muuten se menee päällekkäin kuvan kanssa.
Luo kuvamerkit määrittämällä "list-style"-attribuutille "ei mitään" ja anna sitten jokainen
