HTML-luettelotyylit - HTML-luettelotyylejä ja esimerkkejä

• Johdanto HTML-luettelotyyleihin

Johdanto HTML-luettelotyyleihin

• Listat ovat yleinen vaatimus tietojen sijoittamisesta muotoillulla tavalla, kuten jos olet tehnyt verkkosivun, jossa sinun on näytettävä hotellin pizzavalikon sisältö, todennäköisesti se olisi HTML-luettelotyyli, joka näkyy selkeästi ja diskreettisesti.
• Toinen tapaus voi olla silloin, kun sinulla on joukko opiskelijaryhmiä, jotka esiintyivät luokan parhaiden esiintyjien joukossa, tässä yhteydessä vaatimuksena on sijoittaa 1. luokan opiskelija ylimpään ja muut sen alapuolelle kasvavassa järjestyksessä että meidän on muotoiltava tämä lajiteltuun luetteloon.
• Toinen tyyppi voi olla mukautetut luettelot, jotka voit tehdä käyttämällä javascriptiä ja html: ää yhdessä, jolloin myös objektien dynamiikka voidaan asettaa ja luettelot voivat viedä mukautettuja näkymiä.

Eri luettelotyypit HTML: ssä:

Alla on erilaisia ​​html-luettelotyylejä seuraavasti:

1) Järjestämättömät luettelot -

Tällöin sisällön esitysjärjestys ei ole asia, josta meidän on huolehdittava, vaan meidän on sijoitettava asiat hyvin siten, että HTML-sivu saattaa ne asettamaan käyttäjän eteen hyvin muotoillulla ja selkeällä tavalla.

HTML-kielellä on kaksi tunnistetta, jotka käsittelevät näitä luetteloita. Voit todennäköisesti tehdä myös navigointipalkin ja pystysuoran sivupalkin käyttämällä vain näitä tageja.

1. : Tämä edustaa järjestämätöntä luetteloa. Tämä tunniste on sisällytetty aina, kun meidän ei tarvitse luokitella mitään tai etsiä asettaa se satunnaisessa järjestyksessä.
   • : tämä edustaa luettelon kohteita, järjestämättömään luetteloon eli
     tunniste näkyy
     • tag. Näillä merkinnöillä varustetut kohteet kantavat automaattisesti joitain luoteja tai piirejä niiden alussa, nämä ovat HTML-perusominaisuuksia.

Nyt nähdään pala koodista

ja
• perustuvat järjestämättömät luettelot ja miten HTML-sivu näyttää, kun suoritat kyseisen tiedoston, huomaa, että voit kirjoittaa muokkaustyökaluun, kuten muistilappuun, ja tallentaa tiedoston “.html” -laajennuksella, joten se voidaan avata millä tahansa selaimella.

  Esimerkki katkelma -
  
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



  Tulos -

  

  2) Tilatut luettelot -

  Nyt nähdään tapaus, jossa haluamme sijoittaa oppilaat järjestäytyneellä tavalla luokan rivien perusteella, ja tämä ilmestyy lajiteltuina käyttämällä

  HTML-tunniste, ja se sisältää useita
  1. tunnisteet, niissä on luettelotiedot siinä.
     : tätä tagia käytetään tilatun luettelon laatimiseen ja kaikki elementit sijoitetaan sen sisälle
     1. tunnisteita.
     2. tunniste on selitetty yllä.

        Katsotaanpa nyt esimerkki myös tästä tapauksesta, ja sinun on tallennettava tämä samalla tavalla kuin yllä.

        Esimerkki koodi -

        
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



        Tulos / HTML-sivu -

        

        Katsotaan nyt joitain muunnelmia näistä, joissa voimme muokata tai muotoilla näitä luetteloita vain lisäämällä joitain CSS-ominaisuuksia HTML-sivulle, mikä parantaa sivun ulkoasua.

        1. Järjestämättömissä luetteloissa meillä on seuraavat ominaisuudet, jotka voidaan antaa -
        2. Listatyylityyppi - voi olla levy, ympyrä, neliö tai ei yhtään. Joten pilareita, jotka näit järjestämättömissä luettelokohteissa, ei tule näkyviin, jos emme valitse täällä yhtään, tehdään se.

        Esimerkki -

        
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



        Tulos / HTML-sivu -

        

        Joten, ympyräluettelomerkkejä ei enää ole, voit muokata sitä yllä annetuilla vaihtoehdoilla.

        Samoin tilausluetteloissa on määräys, jolla valitaan, näytetäänkö tilausluettelon arvot numeroilla vai roomalaisilla vai aakkosilla.

        Voit asettaa ominaisuustyypin sisään

        tunniste samalla, ja tyyppi voi ottaa seuraavat arvot

        Tyyppi: “1”, “A”, “a”, “I”, “i”

        Katsotaan saman mallin esimerkkiä -

        Esimerkki -
        
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



        Tulos / HTML-sivu -

        

        Samoin meillä on myös kuvausluetteloita, joissa voimme määritellä kohteen, johon meidän on sijoitettava kuvaus, sanotaan esimerkiksi, että olet tekemässä sivua, johon joudut sijoittamaan määritelmiä joihinkin avainsanoihin, niin voit valita kuvausluettelot.

        Meillä on seuraavat tunnisteet käsittelemään samoja.

        - tämä tunniste määrittelee kuvausluettelon

        - tämä tunniste antaa kuvaustermin

        - tämä tunniste sisältää kunkin termin kuvauksen

        Esimerkki -

        
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



        Tulos / HTML-sivu -

        

        Tilatuissa luetteloissa voit myös määrittää aloitusominaisuuden

        tunniste, joka kertoo mistä laskenta alkaa. Katsotaanpa esimerkki samasta -

        
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



        Tulos -

        

        johtopäätös

        Joten näimme erilaisia ​​luetteloita, joihin voimme sijoittaa tietoja, nämä tiedot voidaan tuottaa mallista tarkasteltavaksi javascript-kehyksillä, olemme osoittaneet, että se on staattinen sivu ja se voidaan tehdä dynaamiseksi JS: n avulla. Nämä luettelot voidaan alustaa käynnistysnauhalla, jotta ne näyttäisivät myös navigointipalkkeilta tai sivupalkeilta.

        Suositellut artikkelit

        Tämä on opas HTML-luettelotyyleihin. Tässä keskustellaan johdannosta ja erityyppisistä HTML-tyyleistä oikealla näytekoodilla. Voit myös käydä läpi muiden ehdotettujen artikkeleidemme saadaksesi lisätietoja -

        1. HTML-muotoiset tunnisteet
        2. HTML-määritteet
        3. Mikä on XHTML?
        4. HTML-tyylisivut
        5. HTML-kehykset
        6. HTML-esteet
        7. Aseta taustaväri HTML-muodossa esimerkillä