• Страница 1 из 1
  • 1
Установка цвета маркеров в списках UL + LI
Kosten
Пятница, 22 Марта 2019, 20:11 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Давайте подробно разберем, как можно установить цвета маркеров в списках HTML UL или LI, где все производится через стилистику CSS, без добавление различных изображений, который бы добавляли палитру цвета.

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

Так смотрится без стилистики CSS:



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



Установка:

HTML

Код
<ul class="detupogdsam">
  <li>Первый элемент</li>
  <li>Второй элемент</li>
  <li>Третий элемент
    <ul>
      <li>Этот элемент вложен под первый уровень
        <ul>
                   <li>Этот элемент вложен под второй уровень</li>
          <li>Этот элемент вложен под третий уровень</li>
          <li>Этот элемент вложен под четвертый уровень</li>
        </ul>
      </li>
      <li>Продолжаем вложение элементов</li>
      <li>Где аналогичным способом происходит</li>
    </ul>
  </li>
  <li>Пятый элемент на сайте</li>
  <li>Шестой элемент на сайте</li>   
</ul>

CSS

Код
ul li {color: #ef1616; font-size: 1.3em}
ul li ul li {color: #0b53da; font-size: initial;}
ul li ul li ul li{color: #087108;}

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

Демонстрация
Прикрепления: 2477338.png (19.3 Kb) · 7623348.png (26.1 Kb)
Страна: (RU)
Kosten
Пятница, 22 Марта 2019, 20:27 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Это продолжение первого поста, так как здесь ставим цветные точки, которые также выставлены впереди описание.



HTML

Код
<ul>
    <li>Первый</li>
    <li>Второй</li>
    <li>Если вы уже годами пишете качественный контент, вы не заметите «понижения» в своем текущем рейтинге. Если, с другой стороны, вы воспользовались преимуществами наполнения ключевыми словами, то ваш веб-сайт сейчас, вероятно, не так хорошо работает, не так ли?</li>
</ul>

CSS

Код
ul {
    list-style: none;
    padding:0;
    margin:0;
}

li {
    padding-left: 0.8em;
    text-indent: -.5em;
}

li:before {
    content: "• ";
        color: #e60909;
}


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

Демонстрация
Прикрепления: 7353428.png (12.3 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: