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

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

 

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

 

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

 

Установка

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

После выбора, устанавливаем код 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 знаков. Такие тексты только погубят ваш сайт.

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