HTML-liststilar - Typer av liststilar i HTML med exempel

Introduktion till HTML-liststilar

Listor är det vanliga kravet för att placera informationen på ett formaterat sätt, som om du har skapat en webbsida där du behöver visa innehållet i ett pizzmeny på ett hotell, då är det troligtvis en HTML-liststil som ska visas i på ett tydligt och diskret sätt.
Ett annat fall kan vara där du har en uppsättning med elever som uppträdde bland klassens topputövare, i detta sammanhang kommer kravet att placera rank 1-studenten överst och andra under den i en ökande rangordning. att vi måste formatera detta till en sorterad lista.
En annan typ kan vara anpassade listor som du kan skapa med hjälp av javascript och html tillsammans, där dynamiken i objekten också kan ställas in och listorna kan få vissa anpassade synpunkter.

Olika liststilar i HTML:

Nedan visas de olika HTML-liststilarna enligt följande -

1) Oordnade listor -

Här är ordningen för visning av innehållet inte något som vi behöver ta hand om, vi måste bara placera sakerna så att HTML-sidan gör att de placeras framför användaren på ett välformaterat och tydligt sätt.

Det finns två taggar på HTML-språk som hanterar dessa listor och du kan troligtvis skapa navigeringsfält och vertikal sidofält med bara dessa taggar.

- : detta representerar listobjekten, uppsättningen objekt som ska placeras i den oordnade listan, dvs under
  - märka. Objekten markerade med dessa markeringar kommer automatiskt att bära några kulor eller cirklar i början, det här är de grundläggande HTML-funktionerna.

Nu kan vi se en kodkod för

baserade oordnade listor och hur HTML-sidan kommer att se ut, när du kör den filen, notera att du kan skriva i redaktör som anteckningsblock och spara fil med ".html" -förlängning, varför den kan öppnas med någon av webbläsarna.

Exempelavsnitt -
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

Utgång -
2) Beställda listor -

Nu kommer att se ett fall där vi letar efter att placera eleverna på ett ordnat sätt baserat på deras rang i klassen och detta kommer att visas på ett sorterat sätt med hjälp av
1. taggar, de kommer att ha listobjekten i den.
  1. taggar.
  2. taggen har förklarats ovan.
    
    Låt oss se ett exempel nu också för det här fallet och du måste spara det precis som gjort ovan.
    
    Exempelkod -
    
    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-sida -
    
    Låt oss nu se några varianter av dessa där vi kan anpassa eller formatera dessa listor bara genom att lägga till några CSS-egenskaper på HTML-sidan, vilket gör att sidans utseende ser bättre ut.
    1. I de oordnade listorna har vi följande egenskaper som kan ges -
    2. List-stil-typ - kan vara skiva, cirkel, fyrkant eller ingen. Så de cirklar du såg i oordnade listobjekt visas inte om vi väljer ingen här, låt oss göra det.
    Exempel -
    
    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-sida -
    
    Så cirkelkulorna finns inte längre, du kan anpassa den med ovan angivna alternativ.
    
    På beställningslistan finns det också en bestämmelse för att välja om ordningslistan ska visas med siffror eller romare eller alfabet.
    
    Du kan ställa in egenskapstypen i