Осъществяване куршум CSS, сериозен блог за сериозни

Здравейте приятели. Понякога е полезно да се върнем към основите на HTML. за да опресните паметта си и да се провери дали нещо не е забравен. И отида за проектиране на куршума в въпросната статия. И ако по-конкретен, а след това се опита да направи списък с маркери снимки. Да, точно така. Всички тези кръгове и квадрати, че не се интересуват, ще изготвят списъците на техните красиви. И там са 3 метод за преработка. Да започнем от самото начало. За да започнете, нека да си спомним, как са написани на списъците за HTML. И те са написани по този начин:

• параграф 1
• параграф 2
• т.3
• Позиция 4
• т.5

Това означава, че по подразбиране, без никаква регистрация, списъкът ще изглежда така, но кръговете са напълно черен маркер:

Така че, нека да се промени черните кръгове върху снимката. Използвах в примерното изображение на зелена отметка. Можете да изберете друго изображение, звезди, сърца, независимо. Само, че е желателно на размера на изображенията, е била малка, и най-добрите 16 × 16 пиксела. Надявам се, че знаете как да промените размера на изображението. Всичко, от което се нуждаете, е в CSS имота, за да зададете пътя до снимката.

И нека да видим какво сме дошли от него.
демонстрация

Като цяло, всичко е както трябва да бъде, нашия списък е станал много по-хубав и не изисква допълнително корекция. Въпреки това, аз говорих около три начина, а сега да преминем към втория, който също трябва да се знае.

Тя ще изглежда по същия начин, както в първия пример, но само малко ще бъде различна позиция на изображението е. За по-голяма яснота, направих втора страница. Обърнете внимание и сравни двете версии клирънс водещи списъци.

И накрая, третият начин и че е доста гъвкав. В него ние използваме псевдо-рано. Тоест, ние посочете в CSS. което ще бъде показано пред всеки елемент от списъка. Нека да разгледаме кода:

В допълнение към това ние използваме в този пример, относително позициониране, което ни позволява да поставите нашите маркери, както ви е удобно и ги поставете навсякъде. Вижте пример. Той на практика не се различава от втория вариант.

Вижте също: