Наверняка вы часто видили, как на сайтах, в списках, типа меню, построенных на тегах ul и li стоят не некрасивые кружки, а какие то симпотичные иконочки.
Сейчас я расскажу как вы можете легко и быстро изменить некрасивый кружок (либо просто спрятать его вовсе).
Напишем стандартный код: Code <ul> <li>Пункт 1</li> <li>Пункт 2</li> </ul> Эти самые кружки меняются очень просто:
В ваш файл с CSS пишем следующее:
Code
ul.ur {
list-style: none;
margin: 0 0 0 0;
padding-left: 0px;
}
Определим для нашего списка класс:
Code <ul class="ur"> <li>Пункт 1</li> <li>Пункт 2</li> </ul> Этим мы пока лишь только убрали этот черный кружек и убрали отступ от левого края (margin и padding).
Для того, чтобы появилась наша картинка, пишем в CSS это:
Code
li.mli {
margin: 0;
padding: 3px 3px 3px 25px;
background: url('libg.png') left no-repeat center;
}
В значении padding ключевым является последнее число, т.к. оно отвечает за отступ слова (Главная, Внетренняя) от нашей иконки. left и no-repeat отвечает за прижатие иконки к левой стороне и запрещает повторятся иконке во всех плоскостях.
Для наших тегов li припишим класс:
Code <ul class="ur"> <li class="mli">Пункт 1</li> <li class="mli">Пункт 2</li> </ul> Вот и все. ДЕМО Всем спасибо за внимание и спасибо за ваши коментарии 
|
