Блог Сергея Князева

Юзабилити
Нумерованные списки на HTML и CSS

Нумерованные списки на HTML и CSS

13.12.20171598
Продолжая тему улучшения внешнего вида текста, я дошёл до нумерованных и маркированных списков. Стандартный вид выглядит плохо. Я предлагаю рассмотреть 6 вариантов таких списков.

Предназначение

Нумерованные списки необходимы для перечисления однотипных данных с обозначение порядковых номеров. Маркированные списки отличаются от предыдущих тем, что вместо цифр стоят картинки или символы.


Первые пункты в вашем списке должны завершаться « ; » (точкой с запятой). Последний пункт завершается точкой. Такой принцып называется «ёлочка».


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


Установка

Для начала необходимо определиться с видом ваших списков. В нумерованных списках необходимо будет вручную проставлять цифры.

После выбора, устанавливаем код HTML в текст вашей статьи. Для лучшего отображения необходимо устанавливать в середине текста. Таких списков может быть в статье из расчёта – 1к1500, то есть один список на 1500 символов текста.


Первый вариант (Нумерованный)

Код
<ul class="li">
<li><span><b>1</b></span> ваш текст №1;</li>
<li><span><b>2</b></span> ваш текст №2.</li>
</ul>

Второй вариант (Маркированный)

Код
<ul class="li">
<li>ваш текст №1;</li>
<li>ваш текст №2;</li>
<li>ваш текст №3;</li>
<li>ваш текст №4;</li>
<li>ваш текст №5.</li>
</ul>

После установки кода, выбираем цветовой вариант и вставляем его в файл CSS стилей сайта. Если вы не нашли в статье нужного цветового решения, измените цвет заливки background .

Для наклона текста в списках, установите дополнительно следующий код:


Код
li{font-style: italic;list-style-type: none;}  
.li b{font-family: none!important;}

Вариант №1

Вариант №1 - Нумерованные списки

Код
.li span {
  counter-increment: point 1;
  margin-left: -36px;
  width: 23px;
  margin-top: 8px;
  background: #435173;
  content: counter(point);
  text-align: center;
  position: absolute;
  color: #fff;
  border-radius: 2px;
  font: 11px Arial,"Helvetica Neue",Helvetica,sans-serif;
  padding: 1px;
}
.li1 span b{background:#435173;}

Вариант №2

Вариант №2 - Нумерованные списки

Код
.li span {
counter-increment: point 1;
  margin-left: -36px;
  width: 23px;
  margin-top: 4px;
  background: #6e964a;
  content: counter(point);
  text-align: center;
  position: absolute;
  color: #fff;
  border-radius: 22px;
  font: 11px Arial,"Helvetica Neue",Helvetica,sans-serif;
  padding: 5px 0px 5px 0px;
}
.li2 span b{background:#6e964a;}

Вариант №3

Вариант №3 - Нумерованные списки

Код
.li li:after {
  content: '';
  height: 5px;
  width: 5px;
  margin-left: -15px;
  margin-top: 14px;
  float: left;
  background: #f24444;
  border-radius: 100%;
}

Вариант №4

Вариант №4 - Нумерованные списки

Код
.li span {
  counter-increment: point 1;
  margin-left: -36px;
  width: 23px;
  margin-top: 8px;
  background: #20a544;
  content: counter(point);
  text-align: center;
  position: absolute;
  color: #fff;
  border-radius: 2px;
  font: 11px Arial,"Helvetica Neue",Helvetica,sans-serif;
  padding: 1px;
}
.li span b{background:#20a544;}

Вариант №5

Вариант №5 - Нумерованные списки

Код
.li span {
  counter-increment: point 1;
  margin-left: -36px;
  width: 23px;
  margin-top: 4px;
  background: #1693ef;
  content: counter(point);
  text-align: center;
  position: absolute;
  color: #fff;
  border-radius: 22px;
  font: 11px Arial,"Helvetica Neue",Helvetica,sans-serif;
  padding: 5px 0px 5px 0px;
}
.li span b{background:#1693ef;}

Вариант №6

Вариант №6 - Нумерованные списки

Код
.li li:after {
  content: '';
  height: 5px;
  width: 5px;
  margin-left: -15px;
  margin-top: 14px;
  float: left;
  background: #3da200;
  border-radius: 100%;
}

После публикации вашей статьи вы заметите, как она преобразилась в лучшую сторону.


Каждый пункт в списке должен быть с маленькой буквы.


Бонусные варианты

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


Зимний вариант

Вариант №7 - Нумерованные списки

Заливка выполнена в виде голубой снежинки. Отлично преобразит ваш сайт в преддверии нового года.

Код
.li span {
width: 30px;
  height: 25px;
  display: inline-flex;
  margin: 0px 5px 0px -20px;
  background: URL(http://center-wd.ru/blog-materials/118/snijinka.png) no-repeat;
  text-align: center;
  color: #fff;
  font: 11px Arial,"Helvetica Neue",Helvetica,sans-serif;
  padding: 5px 0px 5px 0px;
}
.li span b{
  background: #469ace;
  padding: 4px 5px;
  height: 10px;
  margin: 1px 0px 0px 6px;
  border-radius: 22px;
}

Вариант для 9 мая

Вариант №8 - Нумерованные списки

Красивое решение для установки на сайт перед праздником Великой победы.

Код
.li span {
width: 30px;
  height: 25px;
  display: inline-flex;
  margin: 0px 5px 0px -20px;
  background: URL(http://center-wd.ru/blog-materials/118/9mai.png) no-repeat;
  text-align: center;
  color: #fff;
  font: 11px Arial,"Helvetica Neue",Helvetica,sans-serif;
  padding: 5px 0px 5px 0px;
}
.li span b{
  background: #dc7c03;
  padding: 2px 2px;
  height: 10px;
  margin: 0px 0px 0px 9px;
  border-radius: 22px;
}

Вариант для осени

Вариант №9 - Нумерованные списки

Осенний лист добавит в вашу статью осенних красок.

Код
.li span {
width: 30px;
  height: 25px;
  display: inline-flex;
  margin: 0px 5px 0px -20px;
  background: URL(http://center-wd.ru/blog-materials/118/list.png) no-repeat;
  text-align: center;
  color: #fff;
  font: 11px Arial,"Helvetica Neue",Helvetica,sans-serif;
  padding: 5px 0px 5px 0px;
}
.li span b{background: #e3502f;
  padding: 2px 3px;
  height: 10px;
  margin: 0px 0px 0px 9px;
  border-radius: 22px;
}

Вариант для лета

Вариант №10 - Нумерованные списки

Я очень люблю лето, поэтому я не могу не сделать летний вариант списков.

Код
.li span {
width: 30px;
  height: 25px;
  display: inline-flex;
  margin: 0px 5px 0px -20px;
  background: URL(http://center-wd.ru/blog-materials/118/list_lito.png) no-repeat;
  text-align: center;
  color: #fff;
  font: 11px Arial,"Helvetica Neue",Helvetica,sans-serif;
  padding: 5px 0px 5px 0px;
}
.li span b{background: #619a0d;
  padding: 3px 3px;
  height: 10px;
  margin: 2px 0px 0px 9px;
  border-radius: 22px;
}

Заключение

Читать понятные и красивые статьи намного интереснее, чем неоформленный текст. Но также важно помнить, что текст должен быть не только красивым, но и грамотно написанным. Поэтому не стоит заказывать тексты на Advego за 50 рублей в 1000 знаков. Такие тексты только погубят ваш сайт.

Просьба к тем, кому понравились данные варианты. Помогите мне распространить эту статью. Добавьте её себе в соц. Сети или отправьте друзьям и знакомым. Этим вы поможете мне.

Нашли ошибку в тексте?
Выделите её и нажмите Ctrl+Enter. Сообщая мне об ошибке вы помогаете сделать мой блог лучше.
Автор материала
Сохраните в социальную сеть
Комментарии (8)
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Не работает копирование кода при нажатие. Нужно исправить. Трудно скопировать нужный код.
0
Исправлю
0
У меня на сайте практически все статьи с биржи копирайта таких как etxt.ru и text.ru unsure
-1
Не стоит там покупать. Тексты не отвечают на требования людей и пишутся на от***ь. Алгоритмы поисковиков сейчас такие, что определяют такие "негодные" тексты и выкидывают их.

Если и заказывать тексты то в проверенных копирайт студиях. Там тексты пишут для людей. Но такие трудно найти
1
По поводу ПС и ранжирования сайта проблем ещё не наблюдал, сайт конечно после восстановления и ещё не набрал обороты,на старом домене посещалка была не плохая и тиц под 50 был.
0
Правильно..Алгоритмы придумали недавно
0
да и кстати по поводу текстов для людей, сделай текст вводимый в комментариях более видимым, а то слепой полупрозрачный текст получается
2
Исправил
0