Efectuarea css bullet, blog serios despre grave

Bună prieteni. Uneori este util să se întoarcă la elementele de bază ale HTML. pentru a reîmprospăta memoria și pentru a verifica dacă nimic nu a fost uitat. Și du-te despre proiectarea glonțului în articolul în cauză. Și dacă mai specific, apoi încercați să facă o listă de markeri imagini. Da, exact. Toate aceste cercuri și pătrate nu ne interesează, vom întocmi listele de frumoase. Și există 3 metode de procesare. Să începem de la început. Pentru a începe, să ne amintim, cum sunt scrise în liste cu marcatori HTML. Și ei sunt scrise astfel:

• alineatul 1
• alineatul 2
• Postul 3
• Postul 4
• Postul 5

Aceasta este, în mod implicit, fără nici o înregistrare, lista va arata, dar cercurile sunt marcator complet negru:

Deci, hai să schimbăm cercurile negre pe imagine. Am folosit în exemplul imaginea bifă verde. Puteți alege o altă imagine, stele, inimi, oricare ar fi. Numai că este de dorit ca dimensiunea imaginilor a fost mic, iar cele mai bune 16 × 16 pixeli. Sper că știi cum să redimensiona imaginea. Tot ce trebuie este în proprietatea CSS pentru a seta calea către imaginea.

Și să vedem ce am ieșit din ea.
Demo

În general, totul a fost așa cum ar trebui să fie, lista noastră a devenit mult mai plăcut și nu necesită corecție suplimentară. Cu toate acestea, am vorbit despre trei moduri, iar acum trece la al doilea, care, de asemenea trebuie să știe.

Acesta va arata la fel ca și în primul exemplu, dar numai un pic va fi poziția diferită a imaginii este. Pentru claritate, am făcut a doua pagină. Aruncati o privire și să compare ambele versiuni clearance-ul liste cu marcatori.

În cele din urmă, a treia cale și este destul de flexibil. În ea folosim pseudo înainte. Asta este, vom specifica în CSS. care va fi afișat în fața fiecărui element din listă. Să ne uităm la codul:

În plus față de faptul că folosim în acest exemplu, de poziționare relativă, care ne permite de a plasa markeri noastre, este convenabil și puneți-le oriunde. A se vedea, de exemplu. El practic nu diferă de cea de a doua variantă.

A se vedea, de asemenea: