Style list HTML - Rodzaje stylów list w HTML z przykładami

Wprowadzenie do stylów list HTML

• Listy są powszechnym wymogiem umieszczania danych w sformatowany sposób, na przykład jeśli utworzyłeś stronę internetową, na której chcesz wyświetlić zawartość menu pizzy w hotelu, prawdopodobnie byłby to styl listy HTML, który powinien pojawić się w jasny i dyskretny sposób.
• Innym przypadkiem może być zestaw szeregów studentów, którzy pojawili się wśród najlepszych w klasie, w tym kontekście wymagane będzie umieszczenie studenta na pierwszym miejscu na szczycie, a innych poniżej, w kolejności rosnącej, dla że musimy sformatować to w posortowaną listę.
• Innym typem mogą być niestandardowe listy, które można tworzyć za pomocą javascript i HTML razem, w których można również ustawić dynamikę w obiektach, a listy mogą mieć spersonalizowany wygląd.

Różne style list w HTML:

Poniżej znajdują się różne style list HTML w następujący sposób:

1) Listy nieuporządkowane -

Tutaj porządek wyświetlania treści nie jest czymś, na czym musimy się zwracać, po prostu musimy dobrze umieścić rzeczy, tak aby strona HTML umieszczała je przed użytkownikiem w dobrze sformatowany i przejrzysty sposób.

Istnieją dwa znaczniki w języku HTML, które obsługują te listy, i prawdopodobnie można również utworzyć pasek nawigacyjny i pionowy pasek boczny, używając tylko tych tagów.

1. : reprezentuje to nieuporządkowaną listę, ilekroć nie musimy nic uszeregowywać ani szukać w losowej kolejności, ten tag jest dołączany.
   • : reprezentuje elementy listy, zestaw elementów, które mają zostać umieszczone na liście nieuporządkowanej, tj. pod
     Tag pojawia się wewnątrz
     • etykietka. Przedmioty oznaczone tymi znacznikami będą automatycznie nosić na początku niektóre kule lub koła, są to podstawowe funkcje HTML.

Teraz pozwala zobaczyć fragment kodu dla

i
• oparte na nieuporządkowanych listach i wyglądzie strony HTML, po uruchomieniu tego pliku, pamiętaj, że możesz pisać w edytorze takim jak notatnik i zapisywać plik z rozszerzeniem „.html”, dlatego można go otworzyć w dowolnej przeglądarce.

  Przykładowy 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


  
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



  Wynik -

  

  2) Listy uporządkowane -

  Teraz zobaczymy przypadek, w którym chcemy umieścić uczniów w uporządkowany sposób na podstawie ich rang w klasie, a to pojawi się w uporządkowany sposób za pomocą

  tag html i będzie zawierać wiele
  1. tagi, będą one zawierały elementy listy.
     : ten znacznik służy do ustawienia uporządkowanej listy, a wszystkie elementy są w niej umieszczone, wewnątrz
     1. tagi.
     2. Tag został wyjaśniony powyżej.

        Zobaczmy teraz także przykład dla tej sprawy i musisz zapisać to tak jak powyżej.

        Przykładowy kod -

        
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


        1. 
HTML Lists
list of students
John
Harris
Plunket


        
HTML Lists
list of students
John
Harris
Plunket


        2. 
HTML Lists
list of students
John
Harris
Plunket


        
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



        
HTML Lists
list of students
John
Harris
Plunket



        Strona wyjściowa / HTML -

        

        Zobaczmy teraz kilka wariantów tych, w których możemy dostosować lub dobrze sformatować te listy tylko poprzez dodanie niektórych właściwości CSS do strony HTML, co poprawi wygląd strony.

        1. Na listach nieuporządkowanych mamy następujące właściwości, które można podać -
        2. Typ listy - może być tarczą, okręgiem, kwadratem lub brakiem. Tak więc kręgi, które widziałeś w nieuporządkowanych elementach listy, nie pojawią się, jeśli nie wybierzemy tutaj żadnego, zróbmy to.

        Przykład -

        
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


        
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



        Strona wyjściowa / HTML -

        

        Pociski koła już nie istnieją, można je dostosować za pomocą powyższych opcji.

        Podobnie na listach zamówień istnieje przepis umożliwiający wybranie, czy wartości listy zamówień będą wyświetlane z cyframi, Rzymianami czy alfabetami.

        Możesz ustawić typ właściwości w

        tag dla tego samego, a typ może przyjąć następujące wartości

        Wpisz: „1”, „A”, „a”, „I”, „i”

        Zobaczmy przykładowy kod dla tego samego -

        Przykład -
        
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


        1. 
HTML Lists
list of students
John
Harris
Plunket


        
HTML Lists
list of students
John
Harris
Plunket


        2. 
HTML Lists
list of students
John
Harris
Plunket


        
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



        
HTML Lists
list of students
John
Harris
Plunket



        Strona wyjściowa / HTML -

        

        Podobnie, mamy również listy opisów, w których możemy zdefiniować element, w stosunku do którego musimy umieścić opis, załóżmy, że tworzysz stronę, na której musisz umieścić definicje niektórych słów kluczowych, a następnie możesz wybrać listy opisów.

        Mamy następujące tagi do obsługi tego samego.

        - ten znacznik określa listę opisu

        - ten tag poda opis terminu

        - ten tag zawiera opis każdego terminu

        Przykład -

        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        
HTML Lists
list of students
Docker
-: this is used to make environment portable application containers

Kubernetes
-: this is an orchestrator for those containers make by docker



        Strona wyjściowa / HTML -

        

        Na uporządkowanych listach możesz również zdefiniować właściwość start w

        tag, który mówi, od czego zaczyna się liczenie. Zobaczmy przykład tego samego -

        
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


        10. 
HTML Lists
list of students
John
Harris
Plunket


        
HTML Lists
list of students
John
Harris
Plunket


        11. 
HTML Lists
list of students
John
Harris
Plunket


        
HTML Lists
list of students
John
Harris
Plunket


        12. 
HTML Lists
list of students
John
Harris
Plunket


        
HTML Lists
list of students
John
Harris
Plunket



        Wynik -

        

        Wniosek

        Więc widzieliśmy różne listy, na których możemy umieszczać dane, dane te można renderować z modelu, aby wyświetlić za pomocą ram javascript, to, co pokazaliśmy, jest statyczną stroną i może być dynamiczne za pomocą JS. Listy te można sformatować za pomocą bootstrap, aby wyglądały jak paski nawigacyjne lub paski boczne.

        Polecane artykuły

        To był przewodnik po stylach list HTML. Tutaj omawiamy wprowadzenie i różne typy stylów HTML za pomocą odpowiedniego przykładowego kodu. Możesz także przejrzeć nasze inne sugerowane artykuły, aby dowiedzieć się więcej -

        1. Tagi w formacie HTML
        2. Atrybuty HTML
        3. Co to jest XHTML?
        4. Arkusze stylów HTML
        5. Ramki HTML
        6. Bloki HTML
        7. Ustaw kolor tła w HTML za pomocą przykładu