• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать нумерованный список на CSS (Как сделать нумерацию с определенного числа через стили)
Как сделать нумерованный список на CSS
Kosten
Дата: Среда, 2019-03-20, 13:48 | Сообщение 1
Администраторы
Сообщений:20795
Награды: 56


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

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

Так изначально выглядит на demo странице:



Здесь уже самостоятельно поменял всю палитру цвета:



Начинаем:

HTML

Код
<ol>
<li>ZorNet - портал для вебмастера</li>
<li>ZorNet - с описанием</li>
<li>ZorNet - кратко и по теме</li>
<li>ZorNet - аналогично пишем</li>      
</ol>


CSS

Код
ol {
  list-style: none;
  counter-reset: li;
  max-width: 298px
}
li {
    margin-bottom: 3px;
    position: relative;
    background: linear-gradient(90deg, #90136a, #1c405f);
    line-height: 38px;
    padding: 0 7px;
    color: #efe9e9;
    border-radius: 3px;
}
li:after {
  counter-increment: li;
  content: counters(li,".") ". ";
  margin-left: 8px;
  position: absolute;
  right: 8px;
  color: #f5cfd4;
}

Как можно заметить, что веб разработчик может поставить его на любой блог, и также немного похоже на вертикальное меню своей стилистикой.

Демонстрация
Прикрепления: 6982454.png(15.2 Kb) · 7097232.png(20.1 Kb) · zadet.zip(1.6 Kb)
Страна: (RU)
Kosten
Дата: Четверг, 2019-03-21, 00:09 | Сообщение 2
Администраторы
Сообщений:20795
Награды: 56


Следуя нашему самому популярному руководству по HTML, давайте теперь немного упростим руководство по CSS о том, как форматировать маркированные и нумерованные списки в CSS.

Страна: (RU)
Kosten
Дата: Четверг, 2019-03-21, 00:30 | Сообщение 3
Администраторы
Сообщений:20795
Награды: 56


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

Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать нумерованный список на CSS (Как сделать нумерацию с определенного числа через стили)
  • Страница 1 из 1
  • 1
Поиск: