Css, hogyan kell létrehozni grafikus vagy szöveg a marker listán, css
Válogatás a szokásos markerek listákon általában alacsony, különösen, ha beszélünk rendezetlen listákat. Mi van, ha a feladat az, hogy hozzon létre és használják saját markerek, szöveg vagy kép? Ez a probléma teljesen megoldódott ....
Igaz fenntartás egyszerre, hogy az első megbeszéljük több elméleti alapjait, mivel van egy böngésző nazvanIEkotorogo tud mindent. A rendes megoldás alapja a használata automatikusan generált tartalom felett böngésző (hogy őszinte legyek a végén - nem csak ő) nem támogatja ezt a funkciót. De ez jól működik a Mozilla, Firefox, Netscape 6+, az Opera és a Safari. És aztán elemezni és univerzális megoldást. Sajnos nem annyira elegáns.
Nézd meg a CSS-kód:
Kezdeni elrejtése lista token, amely alapbeállítás szerint a list-style: none; akkor állítsa be a bal francia 1em, de eltolja a szöveget balra azonos mennyiségű, azaz -1em a „push” standard marker az elemet a listából. Segítségével: mielőtt létrehoz egy szöveges marker. A tartalom tulajdonság kívánt karakterek vannak megadva hexadecimális Unicode vetítve, amint azt a CSS2.1 specifikáció. A példában generált karaktersorozatot a kettős nyíl karácsonyfák és a tér. Elegáns, egyszerű és szép, de nem IE ...
... és olyan megoldást, amely alkalmas minden böngészőben. Sajnos, már nem olyan szép. Szöveges markerek egyszerűen beilleszti az összes listaelemet. Amint alább látható:
stíluslap ezt az opciót kell kis változás. Íme:
Azonban ez a módszer, van egy hátránya, bár nem túl kritikus. Ha a felhasználó a böngésző nem támogatja a CSS, látni fogja a két marker a lista egyes elemeihez - a token által generált böngésző és a jelölő van hozzá kézzel.
Nézzük meg egy másik kérdés: hogyan lehet egy marker segítségével a kép?
Alkalmazni a grafikai marker használatát list-style-image tulajdonság. amint azt az alábbi példában
Az ingatlan list-style-type itt használt csak abban az esetben, ha a felhasználó böngészője nem tudja használni a képet. És a tulajdon list-style-image határozza meg az utat, hogy a kívánt képet. Irányítsd a méret a kép, amely a használt marker a lista CSS táblázatok, nem tudjuk, és ezért szükséges annak biztosítása, hogy a kép nem megfelelő méretű. Egy másik részlet, hogy az értékek a grafikus markerek öröklődnek, és ha létre beágyazott listák és szeretné feladni a kép a marker őket, akkor szükséges, hogy a list-style-image tulajdonság újra. Így:
És ha azt szeretnénk, hogy egy szép nagy kép, ez a módszer nem alkalmas marker lista részeként a képet lehet egyszerűen „vész”. Ahhoz, hogy ezt a korlátozást meg kell csinálni egy kicsit másképp:
Először a munkapont a bal margó és a bal margó lista (miért, elmagyaráztam egy korábbi cikkben). Ezután távolítsa el a marker alapértelmezett. Most a legfontosabb dolog: padding: 0 0.5em 0.5em 54px; - tesszük szoba balra listatétel, annak érdekében, hogy a mi nagy kép (pl 54h54 pixel), majd adja font tulajdonság, hogy a szöveg a lista elem nem disszonáns a méret a kép a marker, és végül használja a tulajdonság háttérben. szúrni a képet listaként marker.