Иконка у списка с помощью CSS

	18.09.2013, 15:12
Реализуется данная идея очень легко, мы просто берём обычные списки, убираем стиль маркировки у тега li, прописываем нужные иконки и отступы. Шаг 1 - Установим HTML: Для начало, пропишем html код списков, в которых пропишем тегу ul class="spiski", а тегу li пропишем class="ico" id="ico_1", сделано это для того, чтобы нам не пришлось прописывать отдельно один и тот же стиль для каждой строки li. HTML-Code <ul class="spiski"> <li class="ico" id="ico_1"> - Уметь правильно верстать.</li> <li class="ico" id="ico_2"> - Потратить своё время правильно.</li> <li class="ico" id="ico_3"> - Задуматься о безопасности в интернете.</li> <li class="ico" id="ico_4"> - Стать настоящим администратором.</li> <li class="ico" id="ico_5"> - Найти новых пользователей.</li> </ul> Шаг 2 - Установим CSS: А в файл стиля css прописываем основу, во-первых убираем стиль маркировки у списка, во-вторых прописываем нужный размер шрифта и конечно же прописываем адрес иконок и незабываем об отступах между строками. CSS-Code `.spiski { list-style-type: none; font: 125%/1.5 Verdana,Arial,Helvetica, sans-serif; color:#555; } .ico { margin-top: 5px; padding: 0px 0px 0px 25px; } #ico_1 { background:url(fon_ico_1.png) no-repeat; } #ico_2 { background:url(fon_ico_2.png) no-repeat; } #ico_3 { background:url(fon_ico_3.png) no-repeat; } #ico_4 { background:url(fon_ico_4.png) no-repeat; } #ico_5 { background:url(fon_ico_5.png) no-repeat; }` Хочу отметить, что самая распространённая ошибка которую делают многие новички, так это: - ставят разные по-размеру и стилю иконки - не выравнивают текст списка по центру относительно самой иконки Хочу сразу сказать, что данный вариант списка с иконками можно рассмотреть и в качестве меню, не забывайте об этом.
1 2 3 4 5 Категория: HTML-CSS \| Добавил: tashkent97 \| Теги: CSS, HTML
Просмотров: 5732 \| Загрузок: 88 \| Источник: http://www.center-dm.ru/ \| Рейтинг: 5.0/1

Всего комментариев: 0