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

Красивое оформление нумерованного списка CSS

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

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

Сам список будет состоять под тегами ol, что отличается от микро разметки и его списка, что идет на ul, и где оформление делать не так легко. А здесь вы можете поставить как буквы, или цифры, не говоря об римские цифр. Чтоб изначально поставить список, то в самом начале нужно сделать отмену одного свойство list-style, которое присутствует по умолчанию. Далее сбросим счетчик, что можно сделать при помощи counter-reset, где не нужно забыть прописать идентификатор, и безусловно с ним начальное значение. Также, чтоб показать результат, это вывести на монитор, то задействуем before или after, а точнее псевдоэлемент.

Приступаем к установке:

HTML

Код

<ol class="zutiposedly-responsible">
  <li>Скрипты для uCoz</li>
  <li>Шаблоны для uCoz</li>
  <li>Меню для сайта uCoz</li>
  <li>Мини профиль для uCoz</li>
  <li>Ajax окна для uCuz</li>
</ol>

CSS

Код

ol.zutiposedly-responsible {
  display: block;
  counter-reset: wslist1;
  color:#5f5a5a;
  list-style: none;
}
ol.zutiposedly-responsible > li {
  margin: 0 0 1.3em 1.7em;
  position:relative;
}
ol.zutiposedly-responsible > li::before {
  background: #674FB6;
  border-radius: 95%;
  color: #e4e4e4;
  content: counter(wslist1);
  counter-increment: wslist1;
  display: inline-block;
  height: 19px;
  left: -41px;
  line-height: 19px;
  padding: 7px;
  position: absolute;
  text-align: center;
  top: 0;
  transition: all 0.3s ease 0s;
  width: 19px;
}

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

Все выстраивается на стилях, где также можно поменять, как шрифт, так палитру цвета.

Демонстрация

02 Июля 2018 Просмотров: 1834 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0