Käytä CSS-koodia kohdistaaksesi luettelomerkityt luettelot HTML: ssä.
Verkkosuunnittelijat käyttävät luettelomerkkiluetteloita muuhunkin kuin vain luettelomerkkien ja tekstin lisäämiseen. Luetteloluetteloiden luomiseen käytetty HTML-tunniste on kätevä valikoiden luomisessa tai kuvien järjestämisessä, jotta JavaScript voidaan ladata diaesitykseen. Oppiminen käyttämään peräkkäistä tyylisivukoodia yhdessä luettelomerkkiluetteloiden kanssa, joita kutsutaan "järjestämättömiksi luetteloiksi" HTML-slangissa, avaa useita jännittäviä Web-suunnittelumahdollisuuksia.
Vaihe 1
Avaa luettelomerkityn luettelon sisältävä HTML-tiedosto ja katso ja -tunnisteiden väliä koodin yläreunaan. Lisää tunnisteita, jos niitä ei vielä ole. Jos koodisi sisältää a tunniste jossain tagin jälkeen ja se sisältää viittauksen CSS-tiedostoon, avaa tiedosto sen sijaan. CSS-koodisi menee tagien väliin tai CSS-tiedostosi uudelle riville.
Päivän video
Vaihe 2
Tasaa teksti kaikkien luettelomerkkien sisällä asettamalla tekstin tasaus
- tag. The
- ja -tunnisteita määrittääksesi ne osaksi yhtä luetteloa. Kun kohdistat tekstin
- tag kiertyy ympärille
- -tunnisteen, tasaus vaikuttaa jokaisen luettelomerkin tekstiin, mutta ei kohdista itse luetteloa sivun vasemmalle tai oikealle puolelle. Tässä on esimerkki CSS-koodista "text-align"-asetukseen:
ul {text-align: right;}
Huomaa, että luodit eivät liiku tekstin mukana. Luodit jäävät tässä tapauksessa vasemmalle.
Vaihe 3
Tasaa koko luettelo sivun vasemmalle tai oikealle puolelle asettamalla "float" -asetukseksi
- tag. Kun "float" on asetettu vasemmalle tai oikealle kohdassa a
- -tunnistetta, se siirtää koko luettelomerkityn luettelon sivun vasemmalle tai oikealle puolelle. Aseta float näin:
ul {kellu: oikea;}
Voit asettaa "kelluke" vasemmalle tai oikealle, mutta ei keskelle.
Vaihe 4
Kääri omasi
- tunnisteet sisään
ja
-tageja luodaksesi kääreen, joka keskittää luettelomerkityn luettelon sivullesi. Tuloksena oleva koodi näyttää tältä:- Luettelokohde
- Luettelokohde
The
tag ei keskitä mitään itsestään; sinun on käytettävä CSS: ää kaiken keskittämiseen. Lisää seuraava koodi välillesi
