W HTML użytkownicy mogą wstawić dane w wielu formularzach, w tym „listy”,„tabele”,„akapity", i tak dalej. Ponadto możesz również dodawać dane w postaci list, takich jak uporządkowane listy i listy nieopisane. Ponadto HTML pozwala użytkownikom tworzyć zagnieżdżone listy w celu poprawnego obsługi danych. Lista uporządkowana wyświetla dane w liczbach, a lista nieopisana pokazuje dane w formularzu pocisku.

Ten blog wyjaśni:

• Jak stworzyć listę zagrożoną HTML?
• Jak zastosować styl na liście zagnieżdżonych w CSS?

Jak stworzyć listę zagrożoną HTML?

Aby stworzyć listę zagnieżdżoną HTML, postępuj zgodnie z podaną procedurą krok po kroku.

Krok 1: Wstaw nagłówek

Najpierw wstaw nagłówek, używając dowolnego znacznika nagłówka z „

" Do "

". W tym scenariuszu użyliśmy „

Krok 2: Utwórz pojemnik „Div”

Następnie utwórz kontener DIV za pomocą „”Element i wstaw„ „ID”Atrybut wewnątrz znacznika otwierającego div o konkretnej nazwie.

Krok 3: Dodaj listę nieuporządkowaną

Teraz skorzystaj z „

”Tag do dodania listy nieuporządkowanej. Następnie dodaj test za pomocą „
• ”Tag. Następnie dodaj zagnieżdżoną listę nieoporządkowaną i dodaj dane dla listy pomiędzy „
  ”Tag.

  Krok 4: Utwórz uporządkowaną listę

  Następnie, wewnątrz pierwszej listy nieopisanej, utwórz uporządkowaną listę za pomocą „

  ”Oznacz i osadzaj dane w postaci uporządkowanej listy z„
  1. ”Tag:

     Właściwa zagnieżdżona lista

     
     
     
     
     
     • Kursy informatyczne
     
     
     
     
     • Struktura danych
     
     
     • System zarządzania bazą danych
     
     
     • System operacyjny
     
     
     • Programowanie zorientowane na obiekt
     
     
     
     
     • Kategorie informatyki
     
     
     
     
     1. Okna
     
     
     2. React JS
     
     
     3. CSS
     
     
     4. Git
     
     
     5. Bootstrap
     
     
     6. JavaScript
     
     
     
     
     
     

     Można zauważyć, że lista zagnieżdżona HTML została pomyślnie utworzona:

     Jeśli użytkownik chce zastosować styl na liście, przejdź do następnej sekcji.

     Jak zastosować styl na liście zagnieżdżonych w CSS?

     Aby zastosować styl na zagnieżdżonej liście w CSS, sprawdź podane kroki.

     Krok 1: Style nagłówka

     Uzyskaj dostęp do nagłówka za pomocą „H1„Nazwa znacznika i zastosuj podane właściwości:

     H1
     Centrum realizacji tekstu;
     kolor niebieski;
     

     Tutaj:

     • "tekst-align”Jest wykorzystywany do ustawiania wyrównania środkowego tekstu.
     • CSS „kolor„Właściwość określa kolor zdefiniowanego tekstu.

     Krok 2: Główny kontener Div Style

     Uzyskaj dostęp do głównej div za pomocą nazwy „ID" Jak "#zagnieżdżona lista”I zastosuj następujące właściwości wymienione w bloku kodu:

     #zagnieżdżona lista
     kolor tła: RGB (182, 250, 227);
     Margines: 20px 70px;
     Wyściółka: 30px;
     Border: kropkowany niebieski;
     

     Szczegóły wyżej wymienionych nieruchomości są następujące:

     • "kolor tła„Właściwość jest wykorzystywana do ustawiania koloru na tylnej części elementu.
     • "margines”Określa przestrzeń poza zdefiniowaną granicą.
     • "wyściółka”Służy do dodawania przestrzeni wewnątrz zdefiniowanego elementu.
     • "granica”Określa granicę wokół elementu.

     Wyjście

     To jest nieruchomość do tworzenia listy zagnieżdżonych HTML.

     Wniosek

     Aby stworzyć zagnieżdżoną listę, użytkownicy mogą korzystać z list zamówionych i nieopisanych. Aby to zrobić, wstaw pierwszą listę za pomocą „

     " Lub "
     ”Tag i osadzaj dane. Następnie zdefiniuj inną listę w pierwszej liście. W tym zapisie zbadano procedurę tworzenia właściwej zagnieżdżonej listy w HTML.