Графические маркеры для списка с помощью css

Многим хочется как то разнообразить свой сайт различными интересностями, сегодня как раз таки познакомимся с одним из них, а именно - мы научимся создавать графические маркеры для списка с помощью css.

Пример будет осуществляется на простых - ненумерованных списках, хотя тоже самое вы можете проделать со всеми другими видами списков.

Для начала создадим "каркас" списка в html:

<ul>
<li>Элемент списка №1</li>
<li>Элемент списка №2</li>
<li>Элемент списка №3</li>
</ul>

Как мы видим, маркеры списка получились как простые закрашенные кружочки, что не так красиво.

Графические маркеры

Теперь мы постараемся изменить стандартные маркеры на собственные.

Раньше это делали с помощью таблиц - создавали 2 столбца, в 1 столбце размещали строку текста, а в другом графическое изображение. Но мы поступим более умным способом.

Создадим таблицу стилей и пропишем в неё следующие строки:

<style type="text/css">
ul {
	padding-left:5px;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	list-style-type:disc;margin-left:20px;
	list-style:none;
}
li {
	background:url(images/29.gif) no-repeat; //Возможно у вас другой путь к картинкам!
	padding-left:30px;
	padding-bottom:5px;
	padding-top:5px;
	font-style:italic;
}
</style>

Теперь наш список выглядит так:

Графические маркеры для списка с помощью css

Вот таким не хитрым способом вы можете придать своему сайту интересный эффект для списков.
Ниже предоставлены прочие графические маркеры для списка, на тот случай - если маркер из урока вам не понравился.

Графические маркеры

Скачать все графические маркеры

Поделитесь ссылкой если мы вам помогли!

Читайте также:

Планирование сайта перед его созданием

Выбор темы самый важный этап при создании блога или сайта

Появляющийся и исчезающий блок с помощью javascript

Сумма значений таблицы и количество значений в столбце

Запуск shell сценария из php

Добавить комментарий:

Минимум 100 символов.
Модераторы detected!

Вы ввели сообщение длиной символов

Три + Пять ? =