Mis on loendi stiili tüüp ja kuidas seda Tailwindis kasutada?

See artikkel illustreerib:

• Mis on Tailwind CSS-i loendi stiili tüüp?
• Kuidas kasutada Tailwind CSS-is loendi stiili tüüpi?

Mis on Tailwind CSS-i loendi stiili tüüp?

Loendi stiilitüüp on CSS-i atribuut, mida kasutatakse järjestatud loendite

ja järjestamata loendite
loendiüksuste markerite välimuse kohandamiseks. See määrab loendiüksuste jaoks kasutatava täpi või nummerdamislaadi tüübi.

---





---






Loendi stiilitüüp sisaldab kolme klassi, näiteks:





list-plaat

See määrab atribuudi 'list-style-type' kettale, mis kuvab järjestamata loendite markerina täidetud ringi.

”




loend-koma

See seab atribuudi 'loendi stiili tüüp' kümnendarvuks, mis näitab järjestatud loendite markeritena arvulisi kümnendväärtusi (1, 2, 3 jne)

”.

---





---

nimekiri-pole

See määrab atribuudi 'loendi stiili tüüp' väärtuseks None, mis tähendab, et loendiüksuste jaoks ei kuvata markerit.

Kuidas kasutada Tailwind CSS-is loendi stiili tüüpi?

Tailwind CSS-is loendi stiili tüübi kasutamiseks looge esmalt HTML-programm ja kasutage selles olevaid loendi elemente, määrates ' list-plaat ” ja „ loend-koma ” kommunaalteenused. Seejärel käivitage HTML-programm ja vaadake kontrollimiseks väljundit:





1. samm: looge loendiüksuste abil HTML-i veebileht

Esiteks looge HTML-programm ja kasutage selles olevaid loendielemente, kasutades utiliite “list-disc” ja “list-decimal”. Näiteks oleme kasutanud järgmisi elemente:

< keha >

< div klass = 'h-screen ml-10' >

< ul klass = 'nimekiri-plaat' >

< et > Loendi üksus 1 < / et >

< et > Loendi punkt 2 < / et >

< et > Loendi punkt 3 < / et >

< / ul >

< br >

< ol klass = 'loend-koma' >

< et > Loendi üksus 1 < / et >

< et > Loendi punkt 2 < / et >

< et > Loendi punkt 3 < / et >

< / ol >

< br >

< ul >

< et > Loendi üksus 1 < / et >

< et > Loendi punkt 2 < / et >

< et > Loendi punkt 3 < / et >

< / ul >

< / div >

< / keha >

Siin

• Esimene, '
  ” on rakendatud klass „list-disc”, mis kuvab iga loendiüksuse jaoks täidetud ringimarkerid.
  • Teine, '
    ” on rakendatud klassi „list-decimal”, mis kuvab markeritena kümnendväärtusi.
    1. Viimane '
       ” pole ühtegi utiliidiklassi rakendatud, seega kasutab see loendi vaikemarkeri stiili.

       2. samm: vaadake HTML-i veebilehte

       Seejärel käivitage HTML-programm ja vaadake väljundi kontrollimiseks veebilehte:

       

       Ülaltoodud väljundis on kuvatud loendid, mille järgi need on kujundatud.

       Järeldus

       Loendi stiilitüüp on CSS-i atribuut, mida kasutatakse järjestatud ja järjestamata loendite loendiüksuste markerite välimuse kohandamiseks. See määrab loendiüksuste jaoks kasutatava täpi või nummerdamislaadi tüübi. Seda saab kasutada Tailwindis, määrates ' list-plaat ” ja „ loend-koma ” kommunaalteenused. Selles artiklis on selgitatud loendi stiili tüüpi ja selle kasutamist Tailwindis.