ZorNet.Ru — сайт для вебмастера » HTML и CSS » Как заменить символы маркера на картинку CSS

Как заменить символы маркера на картинку CSS

Как заменить символы маркера на картинку CSS
Здесь разберем, как можно заменить стандартные маркеры на свою картинку или кнопку иконки, что можно вывести с помощью стилей CSS. Возможно вы встречали в описание, что больше применяется, также в различных мануалах. Все понять быстро, как было изменено, просто если кнопки иконка на ссылке в коде установлена, то ее можно скопировать и вывести на рабочий стол. Здесь же все будет строится через CSS, что простое копирование не поможет, но это так для развитие, приступаем, как можно все сделать красивое изменение.

Первое, что нужно сделать, это создать картинку, и как понимаете, по размеру она будет небольшой. Формат ее должен быть PNG или GIF, чтоб отлично на фоне смотрелось.



Также на тематических ресурсах можно увидеть по разному.



Здесь по этому коду так визуально смотрится.



Теперь переходим к списку, где zornet_ruger будет отвечать за вывод.

Код
<ul id="zornet_ruger">
  <li>ZORNET.RU - первый пункт</li>
  <li>ZORNET.RU - второй пункт</li>
  <li>ZORNET.RU - третий пункт</li>
  </ul>

В CSS прописываем ссылку на тот знак или фигуру, что решили поставить.

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

Здесь изначально поставили полный упр на изображение:

Код
#zornet_ruger{
list-style-image:url(http://zornet.ru/Aben/ABGDA/zornet_ru/css62.gif);
}

Вот после как все сделали и сохранили, мы видим такой вид.
27 Ноября 2017 Просмотров: 2283 Комментариев: (1)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 27 Ноября 2017 20:011
0
С целью нумерованных списков список наиболее обширен, нежели в HTML, однако никак не все без исключения значимости удерживаются абсолютно всеми браузерами. По этой причине сейчас рекомендовано применять только лишь последующие

decimal - десятичные числа.

lower-roman - строчные римские цифры;

upper-roman - прописные римские цифры;

lower-alpha - строчные латинские буквы;

Давайте взглянем, как они смотрятся в браузере. С целью данного сделаем 4 схожих перечня, однако любому в манерах установим собственное значимость качества.

Итак, шифр html-странички:

Код
  <ol id="rimuganetu1">
  <li>ZORNET.RU-Первый пункт</li>
  <li>ZORNET.RU-Второй пункт</li>
  <li>ZORNET.RU-Третий пункт</li>
  </ol>
  <ol id="rimuganetu2">
  <li>ZORNET.RU-Первый пункт</li>
  <li>ZORNET.RU-Второй пункт</li>
  <li>ZORNET.RU-Третий пункт</li>
  </ol>
  <ol id="rimuganetu3">
  <li>ZORNET.RU-Первый пункт</li>
  <li>ZORNET.RU-Второй пункт</li>
  <li>ZORNET.RU-Третий пункт</li>
  </ol>
  <ol id="rimuganetu4">
  <li>ZORNET.RU-Первый пункт</li>
  <li>ZORNET.RU-Второй пункт</li>
  <li>ZORNET.RU-Третий пункт</li>
  </ol>


Код страницы style.css:

Код
#rimuganetu1{
list-style-type:decimal;
}
#rimuganetu2{
list-style-type:lower-roman;
}
#rimuganetu3{
list-style-type:upper-roman;
}
#rimuganetu4{
list-style-type:lower-alpha;
}


В результате, так получится:

Войдите:
avatar