HTML-listestiler - Typer av listestiler i HTML med eksempler

Introduksjon til HTML-listestiler

Lister er det vanlige kravet for å plassere dataene på en formatert måte, som om du har laget en webside der du trenger å vise innholdet på pizzamenyen til et hotell, og sannsynligvis vil det være en HTML-listestil, som skal vises i på en tydelig og diskret måte.
Et annet tilfelle kan være der du har et sett med rangeringer av elever som dukket opp blant topputøvere i klassen, i denne sammenhengen vil kravet være å plassere rang 1-studenten øverst og andre under den i en økende rangordning. at vi trenger å formatere dette til en sortert liste.
En annen type kan være egendefinerte lister som du kan lage ved hjelp av javascript og html sammen, der dynamikken i objektene også kan settes opp og listene kan ta noen tilpassede synspunkter.

Ulike listestiler i HTML:

Nedenfor er de forskjellige HTML-listestilene som følger -

1) Uordnede lister -

Her er ikke rekkefølgen på visning av innholdet noe vi trenger å bry oss om, bare vi trenger å plassere tingene godt, slik at HTML-siden gjør at de blir plassert foran brukeren på en godt formatert og tydelig måte.

Det er to koder på HTML-språk som håndterer disse listene, og sannsynligvis kan du også lage navigeringslinje og vertikal sidefelt ved å bruke disse kodene.

- : dette representerer listeelementene, settet med elementer som skal plasseres i den uordnede listen, dvs. under
  - stikkord. Elementene som er merket med disse merkingene, vil automatisk ha noen kuler eller sirkler i begynnelsen, dette er de grunnleggende HTML-funksjonene.

La oss nå se et stykke kode for

baserte uordnede lister og hvordan HTML-siden vil se ut, når du har kjørt filen, må du merke deg at du kan skrive i redigeringsprogram som notisblokk og lagre fil med ".html" -utvidelse, og dermed kan den åpnes med hvilken som helst av nettleserne.

Eksempelutdrag -
HTML Lists list of pizzas farmhouse peppy paneer onion pizza
HTML Lists list of pizzas farmhouse peppy paneer onion pizza
HTML Lists list of pizzas farmhouse peppy paneer onion pizza
- HTML Lists list of pizzas farmhouse peppy paneer onion pizza
- HTML Lists list of pizzas farmhouse peppy paneer onion pizza
- HTML Lists list of pizzas farmhouse peppy paneer onion pizza
HTML Lists list of pizzas farmhouse peppy paneer onion pizza

Utgang -
2) Bestilte lister -

Nå vil se et tilfelle der vi ønsker å plassere elevene på en ordnet måte basert på deres rekker i klassen, og dette vil vises på en sortert måte ved å bruke
1. koder, de vil ha listeelementene i seg.
  1. tags.
  2. taggen er blitt forklart over.
    
    La oss se et eksempel nå også for denne saken, og du må lagre dette akkurat som gjort ovenfor.
    
    Eksempelkode -
    
    HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    1. HTML Lists list of students John Harris Plunket
    2. HTML Lists list of students John Harris Plunket
    3. HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    
    Output / HTML-side -
    
    La oss nå se noen varianter av disse der vi kan tilpasse eller godt formatere disse listene bare ved å legge til noen CSS-egenskaper på HTML-siden, noe som vil gjøre at utseendet til siden ser bedre ut.
    1. I de uordnede listene har vi følgende egenskaper som kan gis -
    2. List-stil-type - kan være plate, sirkel, firkant eller ingen. Så sirklene du så i uordnede listeelementer vises ikke hvis vi velger ingen her, la oss gjøre det.
    Eksempel -
    
    HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    - HTML Lists list of students John Harris Plunket
    - HTML Lists list of students John Harris Plunket
    - HTML Lists list of students John Harris Plunket
    HTML Lists list of students John Harris Plunket
    
    Output / HTML-side -
    
    Så sirkelkulene eksisterer ikke lenger, du kan tilpasse dem med alternativene ovenfor.
    
    Tilsvarende i ordrelistene er det en bestemmelse som skal velge om ordrelisteverdiene skal vises med tall eller romere eller alfabeter.
    
    Du kan angi eiendomstypen i