Kuinka luoda monitasoinen luettelo HTML: ssä

Monitasoisen luettelon luominen HTML: ssä on vaikeampaa kuin monitasoisen luettelon luominen tekstinkäsittelyohjelmassa, mutta se voidaan silti saavuttaa käyttämällä HTML: ää ja CSS: ää. Alla on ohjeita monitasoisen luettelon luomiseksi HTML-muodossa CSS: n avulla.

Ennen kuin yrität suorittaa seuraavat vaiheet, huomaa, että luodaksesi monitasoisen luettelon HTML: ssä sinun täytyy sijoittaa luettelo toiseen listayksikköön. Lisäksi koska HTML: ssä on vain luettelolista tai numeroluettelo, jos haluat muuttaa luettelon tyyppiä, sinun on käytettävä CSS: tä uuden tyylityypin luomiseksi.

HTML-esimerkki

Alla on esimerkki siitä, kuinka monitasoinen lista voidaan tehdä HTML: ssä HTML- ja HTML-tunnisteissa määritetyn CSS-tyylin avulla. Tässä esimerkissä meillä on kaksi listayksikköä ja toisessa listassa toinen tilattu lista, jossa on alempi-alfa-listatyyppinen a-, b- jne -luettelon luominen.

  1. Ensimmäinen
  2. Toinen 
    1. Toisen toisen osa
    2. Toinen Sub
  3. kolmas
  4. Neljäs

Huomautus: Yllä olevassa esimerkissä käytämme joitakin ylimääräisiä pehmuste- ja marginaalisävyjä, jotka auttavat sopeutumaan maailmanlaajuisiin CSS-arvoihimme ja antamaan esimerkin siitä, miten voit lisätä tai vähentää tilaa ja syvennystä.

Esimerkki lähdöstä

  1. Ensimmäinen
  2. Toinen
    1. Toisen toisen osa
    2. Toinen Sub
  3. kolmas
  4. Neljäs

CSS ja HTML esimerkki

Yllä oleva ratkaisu toimii hyvin, jos sinun tarvitsee vain luoda monitasoinen luettelo muutaman kerran. Jos kuitenkin aiot käyttää useita monitasoisia luetteloita sivustossasi, olisi parempi ajatus sisällyttää CSS-koodi, kuten alla oleva esimerkki, CSS-tiedostoosi. Esimerkissämme luotiin kaksi luokkaa "roman" ja "neliö" ja kutsuimme ne HTML-koodissa.

CSS-koodi 

 .roman {list-style-type: low-roman;}. square {list-style-type: neliö; margin-left: -2em;}

HTML-koodi 

  • Ensimmäinen
  • Toinen 
    • Toisen toisen osa
    • Toinen Sub
  • kolmas
  • Neljäs

Esimerkki lähdöstä

  • Ensimmäinen
  • Toinen
    • Toisen toisen osa
    • Toinen Sub
  • kolmas
  • Neljäs

Saatavilla olevat CSS-listatyyppiset arvot

Alla on luettelo muista CSS-listatyyppisistä arvoista, joita voidaan käyttää aikaisempien esimerkkien sijasta. Olemme myös sisällyttäneet lyhyen kuvauksen kustakin arvosta.

Huomautus: Kaikki nämä arvot eivät toimi tai näkyvät samoina kaikissa selaimissa.

levy - Pieni kiinteä ympyrä (yllä).

ympyrä - Pieni tyhjä ympyrä (yllä).

neliö - Kiinteä neliö.

desimaali - desimaaliluku alkaen "1." (yllä esitetty).

desimaaliluku-nolla - desimaaliluku, joka alkaa 0: lla (esim. 01, 02, 03 jne.).

alempi-roomalainen - pienet romanilaiset numerot alkavat sanalla "i.".

ylemmän romanin kieli - ranskalainen numero numero, joka alkaa sanalla "I.".

alempi-kreikka - pienet kreikkalaiset.

low-latin - Latinalainen kirjain

ylempi latina - ruotsinkielinen

armenialainen - perinteinen armenialainen numerointi

georgialainen - perinteinen Georgian numerointi

alpha - pienet kirjaimet, jotka alkavat kirjaimella "a". (yllä esitetty).

ylempi alpha - Aakkosellinen kirjain, joka alkaa kirjaimella "A.".

ei mitään - Näytä mitään.