]]>eTXT]]>


]]>]]>

Графические маркеры для списка

Для того, чтобы сделать элементы списка красивыми, часто используют маленькие картинки.

Заливаем наш художественный маркер на сервер и запоминаем путь. Пусть это будет images/pulka.jpg

Для формирования нашей картинки вместо дефолтного маркера в файле стилей добавим свойство list-style-image:

 

 ul { list-style-type: circle;
 list-style-image: url(images/pulka.jpg);
	}
 

Получим такой вид списка вместо стандартного:

Использование графических элементов в маркерах

 

В данном примере мы указали стиль типа кружок list-style-type: circle; - это для тех пользователей, у которых браузер не показывает изображения.

Обратите внимание на размер картинки пульки – он не должен быть слишком большим, обычно 10-25 пикселей.

 

В некоторых случаях графическое изображение добавляется через background.

Пример кода:

 

 background:url(images/pulka.jpg) no-repeat; 

 

 

Полный код ul li для вставки пользовательской картинки в качестве маркера:

 

  ul li{border-top:1px solid #c8c8c8; list-style-type:none; padding:10px 0px 0px 12px; background:#fff url(images/pulka.jpg)  no-repeat} 

 

Свойства списков css:

border-top – линия вокруг рамки (толщина, цвет, стиль – solid);

list-style-type – внешний вид., тип маркера.

Padding – отступы от содержимого сверху, снизу, справа, слева.

Background – фон в списке.

 

Не обязательно использовать их все.

 

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

 

          ul {
	  margin-left:10px;
	  padding-left:0px;
	  list-style:none;
	}
	li {
	  padding:0.5em 0 0.5em 54px;
	  font: 1.3em/1.6 Verdana, Arial, sans-serif;
	  background:url(maxpulka.png) no-repeat;
	}

 

Для того, чтобы в листе стилей css убрать точки в списке, используем list-style:none;.

В этом примере в качестве маркера используется большая картинка, к примеру 50 на 50 пикселей. Принцип такой: удаляем дефолтный маркер (list-style:none;), готовим место для большого изображения при помощи задания отступов, вставляем свой маркер (background:url(maxpulka.png) no-repeat;).

 

Если вас заинтересовали уроки css, то потренируйтесь с  расширенным вариантом курса от Евгения Попова.

 


Полный курс «Css практика»

]]>Видеокурс]]>

 

 

 

Знание CSS необходимо каждому вебмастеру, потому что это универсальный способ сделать качественный дизайн без перегрузки кода страницы. 

Для тех, кто хочет очень быстро научиться трюкам css стилей, ]]>рекомендую]]> расширенный курс "CSS практика" Евгения Попова.

 

 

 


На эту тему вы можете прочитать следующие обучающие статьи:

Отступ списка css.

Как поменять css цвет маркера списка, чтобы его цвет был отличным от цвета текста.

Вложенные списки. Как в css сделать горизонтальный список. Изменение стиля нумерованных списков.

Скачать красивые маркеры для списков сайта.

 

Tags: 

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

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
To prevent automated spam submissions leave this field empty.
CAPTCHA
Действительно ли вы человек?

Навигатор по интернету

Узнать простую, но эффективную систему для наращивания трафика. Плюс эта книга с правами перепродажи. 

Узнать подробнее!

Создание сайта

Сделать веб-сайт по приемлемым ценамЗаказать создание сайта под ключ. Цена: недорого.





Если вам понравилась статья, вы можете ]]>подписаться на RSS]]> или E-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму:

Введите Ваш email:

Подпишись с ]]>FeedBurner]]>

Другие сервисы почтовых рассылок

* Нажимая на кнопку "Подписаться!" я даю согласие на рассылку и соглашаюсь с политикой конфиденциальности