Kako ustvariti seznam na več ravneh v HTML-ju

Ustvarjanje seznama na več ravneh v HTML-ju je težje kot ustvarjanje seznama na več ravneh v urejevalniku besedil, vendar je še vedno mogoče doseči z uporabo HTML in CSS. Spodaj so opisani koraki za ustvarjanje seznama na več ravneh v HTML-ju s pomočjo CSS-ja.

Preden poskusite z naslednjimi koraki, se zavedajte, da morate ustvariti seznam na več ravneh v HTML, zato morate seznam vstaviti v drug element seznama. Ker ima HTML samo seznam znakov ali seznam številk, če želite spremeniti vrsto seznama, morate uporabiti CSS, da ustvarite novo vrsto sloga.

Primer HTML

Spodaj je primer, kako lahko na več ravneh naredimo seznam v HTML-ju z uporabo HTML-ja in stila CSS, definiranega v oznakah HTML. V tem primeru imamo dva elementa seznama in v drugem elementu seznama še en urejen seznam z nizom alfa list-style-type za ustvarjanje sloga seznama a, b, itd.

  1. Prvič
  2. Drugič 
    1. Sub of Second
    2. Druga podm
  3. Tretjič
  4. Četrtič

Opomba: V zgornjem primeru uporabljamo nekatere dodatne sloge za oblazinjenje in robove, da se lahko prilagodimo našim globalnim vrednostim CSS in navedemo primer, kako lahko dodate ali zmanjšate prostor in zamik.

Primer proizvodnje

  1. Prvič
  2. Drugič
    1. Sub of Second
    2. Druga podm
  3. Tretjič
  4. Četrtič

Primer CSS in HTML

Zgornja rešitev je odlična, če morate nekajkrat ustvariti seznam na več ravneh. Če pa želite na vašem spletnem mestu imeti več seznamov na več ravneh, bi bilo bolje vključiti kodo CSS, podobno kot spodnji primer, v datoteko CSS. V našem primeru smo ustvarili dva razreda, imenovanih »roman« in »kvadrat«, in ju klicali v HTML kodo.

Koda CSS 

 .roman {list-style-type: spodnja-romanska;}. kvadratna {list-style-type: kvadrat; margina levo: -2em;}

HTML koda 

  • Prvič
  • Drugič 
    • Sub of Second
    • Druga podm
  • Tretjič
  • Četrtič

Primer proizvodnje

  • Prvič
  • Drugič
    • Sub of Second
    • Druga podm
  • Tretjič
  • Četrtič

Vrednosti, ki so na voljo za slog seznama CSS

Spodaj je naveden seznam drugih vrednosti v stilu CSS, ki jih lahko uporabite namesto primerov, ki smo jih pokazali prej. Vključili smo tudi kratek opis vsake vrednosti.

Opomba: Vse te vrednosti ne delujejo ali so enake v vseh brskalnikih.

disk - majhen krog (prikazan zgoraj).

krog - majhen prazen krog (prikazano zgoraj).

kvadrat - Trden kvadrat.

decimal - decimalno število, ki se začne z "1." (prikazano zgoraj).

decimalno vodilno ničlo - decimalno število, ki se začne z 0 (npr. 01, 02, 03 itd.).

spodnja-romanska - Spodnja romanska številka se začne z "i.".

zgornji-roman - Velike rimske številke, ki se začnejo z "I.".

Spodnja grščina - Spodnja grščina.

spodnja latinska - Mala latinščina

zgornji latinski - Velika črka

armenščina - Tradicionalno armensko številčenje

gruzijsko - tradicionalno gruzijsko oštevilcenje

lower-alpha - Abecedna črka z malimi črkami, ki se začne z "a." (prikazano zgoraj).

upper-alpha - Abecedna črka z velikimi črkami, ki se začne z "A.".

nobena - nič ne pokaže.