Hogyan készítsünk Bullet Pointokat a HTML-ben

A felsorolásjelek segítségével nagy szövegrészeket bonthat szét, és a hasznos információk listáira mutathat rá. A felsorolásjelek könnyen létrehozhatók szövegszerkesztő szoftverben, de amikor HTML-dokumentumot ír be, ismernie kell a kódot a létrehozásukhoz. Nem sok kódra van szükség egy felsorolás létrehozásához. Csomagolja be az egyes listákat

-be

címkéket, majd csomagolja a teljes listát

vagy "rendezetlen lista" címkékbe. Ezután bármit megtehet a felsorolásjelekkel a lépcsőzetes stíluslap kódjával.

1. lépés

Írd le a pontok szövegét! Kezdje el minden pontot a saját egyenesén. Törölje az egyes sorokat

-be

és

ilyen címkék:

Ez egy felsorolásjeles pont

Ez egy újabb pont

2. lépés

Hozzon létre egy üres sort a felsorolásjeles lista fölé, majd írjon be egy nyitó

-t

címkét ezen a sorban. Keresse meg a felsorolásjeles lista végét, és hozzon létre ott egy másik üres sort. Írjon be egy lezárást

címke azon a sorban. Ha a listát később CSS-sel szeretné stílusozni, adjon hozzá egy osztály vagy azonosító attribútumot a nyitó

címkéhez. Íme egy példa egy azonosító attribútumot tartalmazó rövid felsorolásjelre:

• Első pont
• Kettes pont

3. lépés

A "stílus" használatával CSS-kóddal hozhatja létre a listát. Adjon hozzá CSS-kódot a

közé címkék között és címkéket, vagy beírhatja a CSS-kódot egy külső .CSS-fájlba, és beágyazhatja a fájlt egy ehhez hasonló címkével:. Módosítsa a "path/to/stylesheet.css" fájlt a létrehozott .CSS fájl elérési útjával. Használja az ID vagy class attribútumot a felsorolások kiválasztásához, például:

#mylist li { font-style:dőlt; }

A fenti kód kijelöli az összes

-t

címkéket a „mylist” azonosítójú címkén belül. Cserélje ki a hash jelet egy pontra, ha osztály attribútum alapján választ ki.

4. lépés

A felsorolás típusának módosításához használja a CSS "list-style" tulajdonságát. A rendelkezésre álló felsorolástípusok közé tartoznak a nyitott körök, a kitöltött korongok és a négyzetek a nem számozott, nem betűrendes listákhoz. Íme egy példa a négyzetes felsorolásjelekre:

#mylist li {list-style:square;}

Tipp

Használja a

-t

címkét az
helyett a rendezett listák létrehozásához. Ezután beállíthatja a "lista-stílusú" típust különböző típusú számokhoz vagy betűkhöz.

Hozzon létre képjeleket úgy, hogy a "list-style" attribútumhoz adja meg a "none" értéket, majd adjon meg minden

• címkézz meg egy nem ismétlődő, balra igazított háttérképet. Adjon kitömítést mindegyik bal oldalához
• címkével áthelyezheti a szöveget, különben átfedi a képet.