Stiluri de listă HTML - Tipuri de stiluri de listă în HTML cu exemple

Introducere în stilurile de listă HTML

Listele sunt cerința obișnuită de a plasa datele într-un mod formatat, cum ar fi dacă ați făcut o pagină web unde trebuie să afișați conținutul meniului de pizza al unui hotel, atunci probabil că ar fi un stil de listă HTML, care va apărea în o manieră clară și discretă.
Un alt caz poate fi acela în care aveți un set de rânduri de studenți care au apărut printre cei mai performanți ai clasei, în acest context, cerința va fi de a plasa elevul de rangul 1 în vârf și alții sub acesta într-o ordine crescândă de clasare, pentru că trebuie să formatăm acest lucru într-o listă ordonată.
Un alt tip pot fi listele personalizate pe care le puteți realiza folosind javascriptul și html împreună, unde dinamica din obiecte poate fi configurată și listele pot avea unele perspective personalizate.

Stiluri diferite de listă în HTML:

Mai jos sunt prezentate diferitele stiluri de listă html după cum urmează -

1) Liste neordonate -

Aici ordinea de afișare a conținutului nu este ceva care trebuie să ne intereseze, ci trebuie să plasăm lucrurile bine, astfel încât pagina HTML să le facă să fie așezate în fața utilizatorului într-un mod bine formatat și clar.

Există două etichete în limbaj HTML care gestionează aceste liste și este posibil să faceți și bara de navigare și bara laterală verticală, folosind doar aceste etichete.

- : aceasta reprezintă elementele din listă, setul de articole care trebuie plasate în lista neordonată, adică sub
  - etichetă. Articolele marcate cu aceste marcaje vor purta automat câteva buline sau cercuri la început, acestea sunt caracteristicile HTML de bază.

Acum, să vedem o bucată de cod pentru

liste bazate pe neordonate și cum va arăta pagina HTML, odată ce executați acel fișier, rețineți că puteți scrie în editor ca blocul de notițe și să salvați fișierul cu extensia „.html”, deci poate fi deschis cu oricare dintre browsere.

Exemplu de fragment -
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

Rezultat -
2) Liste comandate -

Acum vom vedea un caz în care căutăm să îi plasăm pe elevi într-o manieră ordonată, pe baza rangurilor lor în clasă și acest lucru va apărea într-un mod ordonat folosind
1. etichete, acestea vor avea elementele din listă.
  1. Etichete.
  2. eticheta a fost explicată mai sus.
    
    Haideți să vedem un exemplu acum și pentru acest caz și trebuie să îl salvați la fel ca în cele de mai sus.
    
    Exemplu de cod -
    
    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
    
    Ieșire / pagină HTML -
    
    Acum să vedem câteva variante ale acestora în care putem personaliza sau formata bine aceste liste doar prin adăugarea unor proprietăți CSS în pagina HTML, ceea ce va face aspectul paginii să arate mai bine.
    1. În listele neordonate, avem următoarele proprietăți care pot fi date -
    2. Listă de tipuri de stil - poate fi disc, cerc, pătrat sau nu. Deci, cercurile pe care le-ați văzut în elementele din listă neordonate nu vor apărea dacă nu alegem niciunul aici, haideți să o facem.
    Exemplu -
    
    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
    
    Ieșire / pagină HTML -
    
    Deci, bulele de cerc nu mai există, îl puteți personaliza cu opțiunile oferite mai sus.
    
    În mod similar, în listele de comenzi, există o dispoziție pentru a alege dacă valorile listei de ordine vor apărea cu cifre sau cu romani sau alfabeturi.
    
    Puteți seta tipul de proprietate în