• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Картинки вместо маркера списка на CSS (Как вместо символа маркера использовать картинку)
Картинки вместо маркера списка на CSS
Kosten
Дата: Среда, 2019-10-23, 18:47 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25120
Награды: 57


В этой статье узнаем, как произвести установку картинки или изображение вместо маркера списка. И для того, чтоб прописать изображение рисунка, чтоб списки выглядели красиво и оригинально, то здесь нужно задействовать свойством list-style-image, которое нужно прописать к заданному селектору, где идет обозначение ul или li.

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

Вариант №1. Картинка вместо маркеров



HTML

Код
<ul>
    <li>Первый список</li>
    <li>Второй список</li>
    <li>Тритий список</li>
   </ul>

CSS

Код
ul {
    list-style-image: url(http://zornet.ru/design_43/f_ico/lastpost.gif); /* Изображение маркера */
   }

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

Вариант №2. Фоновый рисунок



HTML

Код
<ul>
    <li>Первый список</li>
    <li>Второй список</li>
    <li>Тритий список</li>
   </ul>

CSS

Код
  li {
    list-style: none; /* Убираем исходные маркеры */
    background: url(http://zornet.ru/niz_ik2/thread.gif) no-repeat 0 50%; /* Параметры фона */
    padding-left: 35px; /* Смещаем текст вправо */
   }

Здесь задействовали свойство background, что позволяет поставить изображение как фоновый рисунок.
Прикрепления: 3641444.png(14.0 Kb) · 2175002.png(14.3 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Картинки вместо маркера списка на CSS (Как вместо символа маркера использовать картинку)
  • Страница 1 из 1
  • 1
Поиск: