Авторизация на сайте

Последнее из портфолио

Как с нами связаться

  • 8 953 242 0439
  • +7 953 242 0439
  • ws-aprel@ya.ru
  • *******
  • Россия, г. Горячий Ключ
» » » Как сделать красивый маркер в списке

Как сделать красивый маркер в списке

galina2601 5-09-2016, 23:24 3 184 Уроки по CSS / Списки

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

  • Утро
  • День
  • Вечер
  • Ночь


Вопрос. Как это можно сделать?

 

Давайте разберем несколько самых простых способов.

 

Способ 1. Задать отдельно цвет текста и цвет маркера

Самый очевидный способ вложить внутрь тега <li> тег <span>.

Для начала зададим стили:

 <STYLE>

  LI {COLOR:RED;}

  SPAN{COLOR:BLUE}

 </STYLE>

Вот так   будет выглядеть сам список:

<UL>

  <LI><SPAN>Осень</SPAN></LI>

  <LI><SPAN>Зима</SPAN></LI>

  <LI><SPAN>Весна</SPAN></LI>

  <LI><SPAN>Лето</SPAN></LI>

</UL>

Вот фрагмент кода и вид списка:

 

Код

Список

Если мы основной цвет сделаем зеленым и для тега <UL type="circle"> укажем атрибут типа маркера:

 

код

 

получим вот такой список:

 

Список

С этим все понятно.

 

Способ 2. Создаем собственные маркеры.

 Первый способ хорош, если нам надо "раскрасить" один список. А если такая конструкция должна быть везде на сайте, способ не удобен, так как каждый раз к спискам придется добавлять тег <SPAN>.

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

Делается это с помощью свойства list-style-type.

Затем с помощью псевдоэлемента :before и свойства content задаем собственные маркеры.

Вот такой код пишем:

 

список

Вот такой список получаем. В качестве маркера используется звездочка.

 

Список

 


  

Способ 3.Вместо маркера использовать картинку

Ну и способ, который используется здесь на сайте.
В качестве маркера берем небольшую картинку.
И описываем следующие стили.
Задаем для тегов списка отдельный класс.
<style>
.bomb ul {margin: 0; padding: 0;}
.bomb li {list-style: none;}
.bomb ul li {background: url(../images/bomb.jpg) left 3px no-repeat; font: 14px Tahoma; color: #525252;
padding: 0 0 0 25px; margin: 0 0 10px 20px;}
</style>

И затем сам список помещаем в блок с классом .bomb
<div class="bomb">
<ul>
<li>Раз</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
<li>Пять</li>
</ul>

  • Раз
  • Два
  • Три
  • Четыре
  • Пять


Похожие новости

  • Как подключить стили к HTML-документу. Урок 2
  • Оформление таблиц
  • Урок 4. Создание списков
  • Урок 3. Горизонтальные линии и бегущая строка
  • Урок 2. Заголовки, абзацы, работа со шрифтами

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

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent
    Кликните на изображение чтобы обновить код, если он неразборчив