Красивые списки являются одним из элементов красивого дизайна. Приступим сразу к делу.

Вводное замечание: Делать эти списки мы будем с помощью CSS. В уроке будет рассмотрено несколько практических примеров.

Комплект изображений для этого урока, можете скачать здесь.

ДЕНЬГИ СОЗДАЮТ ДОБРО! ДЕНЬГИ СОЗДАЮТ КОМФОРТ! ДЕНЬГИ ПРЕКРАСНЫ И ХОРОШИ! БОГАТСТВО ЭТО ЧИСТАЯ ЭНЕРГИЯ! Я ЛЮБЛЮ ДЕНЬГИ! ДЕНЬГИ ПРИНОСЯТ МНОГО ХОРОШЕГО! ДЕНЬГИ ПРИНОСЯТ СЧАСТЬЕ!

Прописываем в css файле следующие строки:

/*Говорим, что кружки надо заменить картинкой arrow.gif*/
.arrow {
list-style-image: url(img/tools/arrow.gif); /*Путь пишите свой*/
}
/* Чтобы появился зелёный фон прописываем следующее*/
.li {
background-color: #C8F612;
}

В html файл пишем следующее:

<ul class="arrow">
<li class="li">ДЕНЬГИ СОЗДАЮТ ДОБРО!</li>
<li>ДЕНЬГИ СОЗДАЮТ КОМФОРТ!</li>
<li class="li">ДЕНЬГИ ПРЕКРАСНЫ И ХОРОШИ!</li>
<li>БОГАТСТВО ЭТО ЧИСТАЯ ЭНЕРГИЯ!</li>
<li class="li">Я ЛЮБЛЮ ДЕНЬГИ!</li>
<li>ДЕНЬГИ ПРИНОСЯТ МНОГО ХОРОШЕГО!</li>
<li class="li">ДЕНЬГИ ПРИНОСЯТ СЧАСТЬЕ!</li>
</ul>

You truly can have anything you can imagine.  Ты действительно можешь добиться всего, что только можешь себе представить.

Прописываем в css файле следующие строки:

/*Говорим, что кружки надо заменить картинками и сделать отступы*/
.arrow_clock {
list-style-image: url(img/tools/clock.png); /*Путь пишите свой*/
margin-top: 7px;
margin-bottom: 7px;
}
.arrow_on {
list-style-image: url(img/tools/public.png); /*Путь пишите свой*/
margin-top: 7px;
margin-bottom: 7px;
}

В html файл пишем следующее:

<ul>
<li class="arrow_clock">You truly can have anything you can imagine.</li>
<li class="arrow_on">Ты действительно можешь добиться всего, что только
можешь себе представить.</li>
</ul>

В завершении урока, хотел бы дать вам один небольшой совет: Прежде чем использовать изображения в качестве маркеров, обязательно оптимизируйте их в Fireworks MX или Photoshop.