In HTML, gli utenti possono inserire dati in molte forme, tra cui "elenchi","tavoli","paragrafi", e così via. Inoltre, puoi anche aggiungere dati sotto forma di elenchi, come elenchi ordinati e liste non ordinate. Inoltre, HTML consente ai suoi utenti di creare elenchi nidificati per gestire correttamente i dati. L'elenco ordinato visualizza i dati in numeri e l'elenco non ordinato mostra i dati in forma di proiettile.

Questo blog spiegherà:

• Come fare un elenco di HTML-nidificato?
• Come applicare lo stile sull'elenco nidificato in CSS?

Come fare un elenco di HTML-nidificato?

Per creare un elenco nidificato HTML, seguire la procedura passo-passo data.

Passaggio 1: inserire un'intestazione

Innanzitutto, inserire un'intestazione utilizzando qualsiasi etichetta di intestazione da "

" A "

". In questo scenario, abbiamo usato il "

Passaggio 2: crea un contenitore "div"

Successivamente, crea un contenitore div con l'aiuto di ""Elemento e inserire un"id"Attributo all'interno del tag di apertura Div con un nome particolare.

Passaggio 3: Aggiungi elenco non ordinato

Ora, utilizza il "

"Tag per l'aggiunta di un elenco non ordinato. Quindi, aggiungi il test con l'aiuto di "
• "Tag. Successivamente, aggiungi un elenco non ordinato nidificato e aggiungi dati per l'elenco tra "
  "Tag.

  Passaggio 4: crea un elenco ordinato

  Successivamente, all'interno del primo elenco non ordinato, crea un elenco ordinato utilizzando "

  "Tag e incorpora i dati sotto forma di un elenco ordinato con"
  1. "Tag:

     Elenco nidificato adeguato

     
     
     
     
     
     • Corsi di informatica
     
     
     
     
     • Struttura dati
     
     
     • Sistema di gestione del database
     
     
     • Sistema operativo
     
     
     • Programmazione orientata agli oggetti
     
     
     
     
     • Categorie di informatica
     
     
     
     
     1. finestre
     
     
     2. Reagire js
     
     
     3. CSS
     
     
     4. Idiota
     
     
     5. Bootstrap
     
     
     6. JavaScript
     
     
     
     
     
     

     Si può osservare che l'elenco nidificato HTML è stato creato con successo:

     Se l'utente desidera applicare lo stile nell'elenco, spostati verso la sezione successiva.

     Come applicare lo stile sull'elenco nidificato in CSS?

     Per applicare lo stile su un elenco nidificato in CSS, controlla i passaggi dati.

     Passaggio 1: intestazione di stile

     Accedi all'intestazione utilizzando il "H1"Nome tag e applicare le proprietà fornite:

     H1
     Centro allineato al testo;
     colore blu;
     

     Qui:

     • "allineamento"È utilizzato per l'impostazione dell'allineamento centrale del testo.
     • Il CSS "colore"La proprietà specifica il colore del testo definito.

     Passaggio 2: contenitore Style Main Div

     Accedere al div principale con l'aiuto del nome di "id" COME "#elenco nidificato"E applica le seguenti proprietà menzionate nel blocco del codice:

     #list nidificato
     Background-color: RGB (182, 250, 227);
     Margine: 20px 70px;
     imbottitura: 30px;
     Bordo: blu punteggiato;
     

     I dettagli delle proprietà sopra dichiarate sono i seguenti:

     • "colore di sfondo"La proprietà viene utilizzata per impostare il colore sul retro dell'elemento.
     • "margine"Specifica lo spazio al di fuori del confine definito.
     • "imbottitura"Viene utilizzato per aggiungere spazio all'interno dell'elemento definito.
     • "confine"Determina un limite attorno all'elemento.

     Produzione

     Questo è il modo di proprietà per fare un elenco nidificato HTML.

     Conclusione

     Per fare un elenco nidificato, gli utenti possono utilizzare elenchi ordinati e non ordinati. Per fare ciò, inserisci il primo elenco con l'aiuto di "

     " O "
     "Tag e incorpora i dati. Quindi, definisci un altro elenco all'interno del primo elenco. Questo articolo ha esaminato la procedura per effettuare l'elenco nidificato corretto in HTML.