Mi az a listastílus típusa és hogyan kell használni a Tailwindben?

Ez a cikk bemutatja:

• Mi a listastílus típusa a Tailwind CSS-ben?
• Hogyan kell használni a listastílus típust a Tailwind CSS-ben?

Mi a listastílus típusa a Tailwind CSS-ben?

A listastílustípus egy CSS-tulajdonság, amely a listaelem-jelölők megjelenésének testreszabására szolgál a rendezett

és az
rendezetlen listákban. Meghatározza a listaelemekhez használandó felsorolás típusát vagy számozási stílusát.

---





---






A listastílustípus három osztályt tartalmaz, például:





lista-lemez

A „list-style-type” tulajdonságot a lemezre állítja, amely egy kitöltött kört jelenít meg a rendezetlen listák jelölőjeként.

”




lista-tizedes

A 'list-style-type' tulajdonságot decimálisra állítja, amely numerikus decimális értékeket (1, 2, 3, stb.) jelenít meg a rendezett listák jelzőjeként '

”.

---





---

lista-nincs

A „list-style-type” tulajdonságot none értékre állítja, ami azt jelenti, hogy nem jelenik meg jelölő a listaelemekhez.

Hogyan kell használni a listastílus típust a Tailwind CSS-ben?

A listastílustípus használatához a Tailwind CSS-ben először készítsen egy HTML programot, és használja fel a benne lévő listaelemeket a „ lista-lemez ” és „ lista-tizedes ' segédprogramok. Ezután futtassa a HTML programot, és ellenőrizze a kimenetet:





1. lépés: Hozzon létre HTML weboldalt listaelemek segítségével

Először készítsünk egy HTML programot, és használjuk fel a benne lévő listaelemeket a „list-disc” és „list-decimal” segédprogramok segítségével. Például a következő elemeket használtuk:

< test >

< div osztály = 'h-screen ml-10' >

< ul osztály = 'lista-lemez' >

< hogy > 1. listaelem < / hogy >

< hogy > 2. listaelem < / hogy >

< hogy > 3. listaelem < / hogy >

< / ul >

< br >

< ol osztály = 'lista-tizedes' >

< hogy > 1. listaelem < / hogy >

< hogy > 2. listaelem < / hogy >

< hogy > 3. listaelem < / hogy >

< / ol >

< br >

< ul >

< hogy > 1. listaelem < / hogy >

< hogy > 2. listaelem < / hogy >

< hogy > 3. listaelem < / hogy >

< / ul >

< / div >

< / test >

Itt,

• Az első, '
  ” van alkalmazva a „lista-lemez” osztály, amely minden listaelemhez kitöltött körjelzőket jelenít meg.
  • A második, '
    ” a „list-decimal” osztályt alkalmazza, amely numerikus decimális értékeket jelenít meg markerként.
    1. Az utolsó '
       ” nem alkalmaz semmilyen segédprogram-osztályt, ezért az alapértelmezett listajelölő stílust fogja használni.

       2. lépés: Tekintse meg a HTML weboldalt

       Ezután futtassa a HTML programot, és tekintse meg a weboldalt a kimenet ellenőrzéséhez:

       

       A fenti kimenet megjeleníti azokat a listákat, amelyek szerint stílusozták őket.

       Következtetés

       A listastílustípus egy CSS-tulajdonság, amelyet a listaelem-jelölők megjelenésének testreszabására használnak rendezett és rendezetlen listákban. Meghatározza a listaelemekhez használandó felsorolás típusát vagy számozási stílusát. Használható a Tailwindben a „ lista-lemez ” és „ lista-tizedes ' segédprogramok. Ez a cikk ismerteti a listastílus típusát és annak használatát a Tailwindben.