I HTML kan brukere sette inn data i mange former, inkludert "lister”,“bord”,“avsnitt", og så videre. Videre kan du også legge til data i form av lister, for eksempel bestilte lister og uordnede lister. Dessuten tillater HTML brukerne å lage nestede lister for å håndtere dataene riktig. Den bestilte listen viser dataene i tall, og den uordnede listen viser data i skjemaet.

Denne bloggen vil forklare:

• Hvordan lage en HTML-nestet liste?
• Hvordan bruke styling på nestet liste i CSS?

Hvordan lage en HTML-nestet liste?

Følg den gitte trinn-for-trinns prosedyre for å lage en HTML-liste.

Trinn 1: Sett inn en overskrift

Først sett inn en overskrift ved å bruke en hvilken som helst overskriftskode fra “

" til "

”. I dette scenariet har vi brukt “

Trinn 2: Lag “div” container

Deretter lager du en DIV -beholder ved hjelp av “”Element og sett inn en“id”Attributt inne i div åpningskoden med et bestemt navn.

Trinn 3: Legg til uordnet liste

Nå, bruk "

”Tag for å legge til en uordnet liste. Legg deretter til testen ved hjelp av "
• " stikkord. Deretter legger du til en nestet uordnet liste og legger til data for listen mellom "
  " stikkord.

  Trinn 4: Opprett en bestilt liste

  Neste, inne i den første uordnede listen, oppretter du en bestilt liste ved å bruke "

  ”Tag og innebygde data i form av en bestilt liste med“
  1. " stikkord:

     Riktig nestet liste

     
     
     
     
     
     • Datavitenskapskurs
     
     
     
     
     • Data struktur
     
     
     • Databaseadministrasjonssystem
     
     
     • Operativsystem
     
     
     • Objektorientert programmering
     
     
     
     
     • Datavitenskapskategorier
     
     
     
     
     1. Vinduer
     
     
     2. React JS
     
     
     3. CSS
     
     
     4. Git
     
     
     5. Støvelhempe
     
     
     6. JavaScript
     
     
     
     
     
     

     Det kan observeres at HTML nestet listen er opprettet med hell:

     Hvis brukeren ønsker å bruke styling på listen, kan du gå mot neste avsnitt.

     Hvordan bruke styling på nestet liste i CSS?

     For å bruke styling på en nestet liste i CSS, sjekk ut de gitte trinnene.

     Trinn 1: Stiloverskrift

     Få tilgang til overskriften ved å bruke "H1”Tagnavn og bruk de gitte egenskapene:

     H1
     tekst-align senter;
     Farge: blå;
     

     Her:

     • “Tekstalign”Brukes for å stille senterinnretting av teksten.
     • CSS “farge”Eiendom spesifiserer fargen på den definerte teksten.

     Trinn 2: Style Main Div Container

     Få tilgang til hoveddiven ved hjelp av navnet "id" som "#nestet liste”Og bruk følgende egenskaper som er nevnt i kodeblokken:

     #nestet liste
     bakgrunnsfarge: RGB (182, 250, 227);
     Margin: 20px 70px;
     polstring: 30px;
     Border: prikket blå;
     

     Detaljene om de ovennevnte egenskapene er som følger:

     • “bakgrunnsfarge”Eiendom brukes til å sette fargen på baksiden av elementet.
     • “margin”Angir plass utenfor den definerte grensen.
     • “polstring”Brukes til å legge til plass inne i det definerte elementet.
     • “grense”Bestemmer en grense rundt elementet.

     Produksjon

     Det er eiendomsmåten for å lage html nestet liste.

     Konklusjon

     For å lage en nestet liste, kan brukere bruke bestilte og uordnede lister. For å gjøre det, sett inn den første listen ved hjelp av “

     ”Eller“
     ”Tag og innebygde data. Definer deretter en annen liste i den første listen. Denne oppskrivningen har undersøkt prosedyren for å lage riktig nestede liste i HTML.