Красиво оформляем списки ul ol li на сайте

Всем привет!

Сегодня будет первая статья из рубрики «Дизайн», в которой покажу, как красиво оформить списки в тегах ul ol li.

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

Предисловие

По умолчанию, в большинстве шаблонов данные списки имеют оформление простых цифр (нумерованный список ol li) и обыкновенных квадратиков и кружков черного цвета (ненумерованный, маркерованный список ul li).

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

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

На моем блоге также списки оформлены. Ненумерованные имеют вид чек-боксов в рамке с чередованием цветов через один пункт.

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

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

Оформление нумерованного списка ol li

Прежде всего вы должны понимать, что каждый пункт списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol, который является общим для таблицы стилей (списка).

Например, если мы берем нумерованный список, то он будет иметь такую структуру с использованием тега ol.

<ol>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>

Ненумерованный же список заключается в общий тег ul.

<ul>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>

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

Также прописаны стили нумерации для каждого пункта списка.

Для маркерованного списка прописывают стиль в виде квадратиков или кружочков.

list-style-type: square; /*квадраты*/
list-style-type: circle; /*кружки*/

Для нумерованного списка применяется значение decimal для вывода стандартных арабских цифр (1, 2, 3…)

list-style-type: decimal; /*арабские цифры*/

Все значения данного тега вы можете найти на [urlspan]сайте-учебнике по HTML[/urlspan].

Также имеется и свойство для назначения изображения к каждому пункту списка, а именно:

list-style-image: url('путь к изображению');

Именно его мы и будем использовать в первом варианте (их будет 2) для оформления ненумерованного списка, а сейчас перейдем к оформлению нумерованного.

Способ 1

Как мы уже выяснили, то нумерованный список создается с помощью тегом ol li. К тегу ol могут быть прописаны любые стили (выравнивание, фон, отступы), а вот с тегом li имеются некоторые сложности, так как при стандартной верстке шаблона, в большинстве случаев не получится просто так сделать фон для цифр или наложить на них иконки. Практически во всех шаблонах со стандартной версткой, номера пунктов никак не выводятся в исходном коде и выводятся с помощью стилей. Это затрудняет задачу, так приходится идти сложным путем.

Если бы каждый номер пункта выводился в исходном коде и был заключен в тег span (например), то можно было бы просто к тегу span в списке пунктов добавить с помощью стилей какое-то изображение или фон.

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

На изображении моей верстки для списка вы видите, что номер не выводится. Цифры отображаются в стилях с помощью свойства list-style-type: decimal.

Придется заменить данное свойство на list-style-image. Тогда вместо цифр будут иконки, но вся загвоздка в том, что если мы пропишем данное свойство к общему тегу li, то будет отображаться одна и та же иконка для всех пунктов, а нам же необходимо своя иконка с цифрой на каждый пункт?

Для этого стоит в файл стилей добавить еще некоторые свойства для тега li, чтобы назначить на каждый пункт свою картинку с цифрой. Ниже можете видеть примера такого кода (под ним объясню его концепцию).

/*первый номер*/
ol li:first-child {
list-style-image: url(путь к изображению с цифрой 1);
}

/*второй номер*/
ol li:nth-child(2n) {
list-style-image: url(путь к изображению с цифрой 2);
}

/*третий номер*/
ol li:nth-child(3n) {
list-style-image: url(путь к изображению с цифрой 3);
}

/*четвертый номер*/
ol li:nth-child(4n) {
list-style-image: url(путь к изображению с цифрой 4);
}

/*Далее прописываем точно также только для следующих номеров пунктов*/

В первой строке кода к тегу li добавлен псевдокласс first-child, который обозначает первый номер. Далее к каждому следующему тегу добавлено свойство nth-child(An), где A — номер пункта в списке.

Таким образом нужно добавить в данный код все остальные номера пунктов и к каждому назначить свою уникальную иконку. Если в своих материалах вы иногда использовали 20 нумерованных пунктов в списках, то придется добавить минимум 20 раз псевдокласс nth-child(An). То есть последним псевдоклассом в стилях у вас будет nth-child(20n).

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

Итак, плагин действий для реализации такого способа следующий:

1. Находите в файле стилей строки, отвечающие за оформление нумерованного списка. Необходимо найти теги ol li;
2. Дописываете в него псевдокласс first-child, как показано в коде выше. Копируете один раз, изменяете данное свойство на nth-child(An) и копируете то количество раз, скольким номерам необходимо назначить свою иконку. Затем проставляете номера для пунктов;
3. К каждому номеру прописываете свойство list-style-image (см. выше) со своей уникальной иконкой.

После этого все должно работать, но имеется один момент. Иконки могут располагаться сильно далеко от пунктов или же накладываться. Тогда придется вам поработать с выравниванием и отступами иконок цифр или самого текста пунктов.

Теперь перейдем ко второму способу, который стоит у меня.

Способ 2

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

Будем использовать псевдоэлемент before, который выводит определенное содержимое перед элементом (в нашем случае пункт списка).

Кстати, с помощью before у меня выводится слово «содержание» в оглавлении. Таким образом оно нигде не отображается в исходном коде и не повторяется в каждой статье.

Реализация похожа с предыдущей:

1. Находим стили для общего тега таблицы стилей нумерованного списка (тег ol) и прописываем к нему свойства:

   list-style-type: none; /*отключает вывод стандартных цифр*/
   counter-reset: point; /*задает переменную для счетчика нумерации*/

2. Для тега каждого пункта внутри общей таблицы стилей (тег ol li) прописываем свойство для размещение нумерации возле самих пунктов — position: relative;
3. Последним шагом дописываем псевдоэлемент before (смотрите пример ниже) для тега ol li и прописываем к нему следующие стили:

   content: counter(point); /* выводит значение переменной */
   counter-increment: point 1; /* увеличивает счетчик на 1 */
   position: absolute;
   background: #BDC3C7; /* фон для цифр (может быть как простой цветовой фон, так и красивая иконка) */

На практике у вас должен получится примерно следующий код. В ваших стилях будет и другое содержимое (выравнивание, отступы, размер шрифта, цвет и так далее). Я же показал лишь то, что необходимо добавить или изменить в ваших стилях.

ol {
list-style-type: none;
counter-reset: point;
}

ol li {
position: relative;
}

ol li:before {
content: counter(point);
counter-increment: point 1;
position: absolute;
background: #BDC3C7;
}

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

ol {
padding: 0px 0 0 20px;
margin: 0.5em 0 1.571em 1.9em;
color: #2E2E2E;
list-style-type: none;
font: 15px/17px Verdana, Arial, Helvetica, sans-serif;
z-index: 2;
counter-reset: point;
}

ol li {
margin-bottom: 4px;
line-height: 1.6;
color: #2E2E2E;
position: relative;
}

ol li:before {
margin-bottom: 4px;
counter-increment: point 1;
line-height: 1.6;
height: 24px;
margin-left: -36px;
left: 0px;
width: 24px;
margin-top: 1px;
background: #BDC3C7;
content: counter(point);
text-align: center;
position: absolute;
font-weight: bold;
}

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

Вот эти 2 способа я сам протестировал и все получилось. Если у вас возникнут вопросы, то обращайтесь в комментариях, а сейчас переходим к ненумерованному (маркерованному) списку.

Оформление ненумерованного списка ul li

Долго говорить здесь не буду, так как принцип абсолютно тот же. Ранее рассмотренные способы работают и тут, только стоит прописывать их к тегам ul li, а не ol li.

Вы можете просто назначит свойство list-style-image:url(путь к иконке) вместо стандартных стилей list-style-type. Но тогда проследите, чтобы были прописан внешний левый отступ от краев сайта, так как без него иконки попросту могут не отобразиться, а быть где-то вне зоны области контентной части. Можно для начала взять экспериментальные отступы, которые я даю в пример ниже.

ul li{
list-style-image: url(images/radio.png);
margin-left: 30px;
}

Если хотите к каждой строке назначит чередование иконок, то смотрите в п.2 выше, как реализовать это с помощью свойства nth-child(An). Можно также назначит нижние подчеркивания для каждого пункта в маркерованном списке и так далее.

Например, у меня имеются такие подчеркивания пунктиром, а также реализовано чередование иконок. Но я это сделал вторым способом с помощью псевдоэлемента before. Вот мой пример.

ul {
padding: 11px 0 5px 0;
}

ul li {
padding-left: 32px;
margin-bottom: 10px;
font: normal 15px Verdana, sans-serif;
color: #2E2E2E;
line-height: 1.6;
border-bottom: 1px dashed #ccc;
padding-bottom: 10px;
}

ul li:before {
content: "";
position: absolute;
width: 27px;
height: 24px;
margin-left: -35px;
margin-top: -2px;
background: url('images/sprite.jpg') 0px 2px no-repeat;
list-style-type: circle;
}

ul li:nth-child(2n):before {
content: "";
position: absolute;
width: 27px;
height: 43px;
margin-left: -35px;
margin-top: -2px;
background: url('images/sprite.jpg') 0px -17px no-repeat;
list-style-type: circle;
}

В коде вы можете видеть, что имеется всего лишь один псевдокласс nth-child(2n) со значением 2. Это означает, что к каждому четному пункту у меня другая иконка. Если же изменить значение 2n на 2n+1, то другая иконка будет у нечетных пунктов. Более подробно узнайте о данном псевдоклассе [urlspan]здесь[/urlspan].

Можете и для каждого пункта назначить фон, рамки, иконки и т.д. Все на ваше усмотрение. Но не стоит сильно мудрить. Сделайте все просто. Задача в оформлении списков не выпендриться и убить глаза, а сделать все отлично от других сайтов, чтобы увеличивать качество восприятия контента вашими посетителями.

Переходим к последнему пункту сего материала.

Несколько разно-оформленных списков на одной странице

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

Если мы назначим общие стили, то одно оформление будет назначаться ко всем спискам. Ну, а допустим, что нам нужно разместить 2 списка, но, чтобы у одного были иконки чек-боксов, а у другого иконки в виде полноценных картинок. Как такое реализовать?

Все просто. Если вы посмотрите на мои материалы, то в начале каждого имеется содержание, оформленное с помощью фона и левой бордюры, но по сути, это тот же нумерованный список. Просто я ему назначил отдельный id, прописав его в html режиме.

Затем в файл стилей прописал отличные стили от общих для всех списков.

ol#sod{
padding: 0px 20px 10px 51px;
margin: 0.5em 0 0em 1em;
color: #2E2E2E;
list-style-type: none;
background: #f1f4f5;
border-left: #BDC3C7 4px solid;
display: inline-block;
}

ol#sod li{}

ol#sod li:before{
font-weight:normal !important
}

Как видим, то просто необходимо скопировать стили для общего оформления списков, затем в скопированном варианте дописать название того ID, который добавили к тегу ul или ol, и изменить стили, чтобы оформление различалось.

Если посмотреть на мой вариант, то я применил изменения только для общего тега ol, а именно: изменил фон, стиль отображения, добавил линию слева для большего выделения. Также затронул и псевдоэлемент before, где в общих стилях к нему прописан жирный стиль текста, чтобы номера больше выделялись на фоне. В содержании они через чур насыщены, поэтому пришлось сделать текст не жирным.

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

Итак, друзья! Данный материал можно заканчивать. Я не пытался вас научить премудростям CSS. Целью было лишь показать варианты индивидуального оформления списков, так как с этим имееются сложности и я сам когда-то помучился.

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

Напоследок хотел бы попросить вас оставить свой комментарий и оценить данный материал с помощью звездочек ниже. Если конечно вам данная статья помогла.

А на этом все. В следующей статье про дизайн мы поговорим об основных ошибках дизайна на сайте и о том, что вам сейчас пытаются «впарить» в мозг, некоторые блоггеры по поводу дизайна сайтов и блогов. Не пропустите.

Все. Пока.

С уважением, Константин Хмелев!