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

Всем привет!

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

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

Предисловие

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

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

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

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

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

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

к содержанию ↑

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

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

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

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

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

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

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

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

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

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

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

к содержанию ↑

Способ 1

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

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

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

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

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

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

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

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

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

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

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

к содержанию ↑

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

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

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

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

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

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

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

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

к содержанию ↑

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

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

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

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

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

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

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

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

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

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

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

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

Все. Пока.

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

40 лет Победы51937Украина, Днепропетровская обл., г. Днепродзержинск,+38 093 338 11 41
Комментариев: 29
  • Очень полезная статья, но для меня - молодого и тупенького новичка не до конца понятная. Я хотела бы украсить свои статьи. Но я мало что понимаю в таблице стилей, единственно что могу сделать - это изменить цвет. Вопрос: а эти коды нужно вставлять на место старых или прописывать отдельно? Если их нужно просто добавить отдельно, то в какое место таблицы? Я этого не могу понять.

    • Необходимо найти в вашем файле стилей строки, которые отвечают за оформление списков. Например, ol li (маркерованный список) или ul li (нумерованный). Далее, после этих тегов (ol li или ul li) дописать необходимые свойства (псевдоклассы, как это описано в статье). Например, было ol li, а стало ol li:first-child {тут стили}. Новые стили добавлять не обязательно. Можно отредактировать уже существующие.

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

  • а что делать если эти элементы в моей таблице стилей встречаются порознь? к примеру, элемент ol встречается у меня 4 раза, но нигде он не стоит рядом с элементом li. Аналогичная ситуация с элементом ul... Я этого не понимаю..........

    • Если во всем файле стилей нет ol li и ul li, тогда добавьте их сами. В конце файла стилей сделайте отступ (1 строку) и пропишите новые свойства. В принципе, вы можете попробовать даже вставить те стили, которые я даю в статье. Но там придется изменить указанные места внутри них (пути к изображениям иконок и т.д.).

  • Значит, можно так делать? Спасибо, попробую провести эксперимент.

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

  • Константин, я попыталась с помощью Вашего кода изменить нумерованный список, и вот что у меня получилось http://parasluhov.ru/sluxi-o-stile-zhizni/puteshestviya/puteshestvie-dikarem-sposob-sekonomit-ili-najti-priklyucheniya-na.html (извините, что добавляю ссылку). У меня отображаются точки после цифр и я не поняла, как изменить размер самих квадратиков с цифрами? Подскажите, пожалуйста.

    • Height - высота, width - ширина. Точку можете убрать, увеличив размер квадрата. Тогда он наложится на точку и ее не будет видно.

  • Я планировала уменьшить размер квадратиков и цифр, но теперь я не смогу убрать точку. Так получается?

    • На самом деле, в коде, который я предоставляю, прописаны стили, которые отключат стандартный вывод нумерованного списка. Поэтому, никакой точки и посторонних цифр не должно быть. Получается, что в вашем файле стилей прописаны стандартные стили для списков, которые начинают работать совместно со стилями, которые вы разместили. Нужно анализировать ваш файл и изменять стили для списков, которые у вас еще имеются в файле. Больше всего, что все же имеются стандартные стили ul li и ol li и вы их просто не увидели или не нашли. И правила, прописанные в них, конфликтуют. Нужно оставить один вариант, убрав все лишнее.

      • А каким образом найти конфликтующие правила? Видимо, в моей таблице стандартные стили ul li и ol li представлены как-то по-другому. Такое ведь возможно?

        • Возможно, что они прикреплены к какому-то классу или ИД. Например, ваша область контент обернута в блок content. Тогда стили для списка могут быть прописаны так #content ol li и #content ul li. Этих вариантов может быть куча (отдельно для записей и отдельно для страниц). В любом случае, при поиске тегов списка по файлу, вам должно было их найти.

          • Вот что у меня есть в таблице стилей .article ul {
            margin: 1.5em 0 1.571em 1.571em;
            list-style-type: circle;
            }
            .article ol {
            margin: 1em 0 0 1.9em;
            list-style-type: decimal;
            }
            .article li { margin: 0.6em 0 }

          • Удалите list-style-type: decimal;

          • Константин, у меня все получилось так, как я хотела! Спасибо за разъяснения!

  • А еще: как изменить в таблице стилей междустрочный интервал?

    • Что значит "изменить в таблице стилей междустрочный интервал"?

      • У меня в текстах на выходе маленький междустрочный интервал, как-то можно сделать так, чтобы он автоматически был больше?

        • Почему же маленький? Все в самый раз. Пропишите line-height: 26px; в стилях для тега "p", где 26px - величина отступа.

  • Добрый день, а как решить проблему при обтекании элементов.
    На сайте при обтекании рекламы списком сделанным через list-style-img иконка из за margin-left: -35px; залазит поверх блока рекламы. Никак не могу решить проблему.

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

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

    • Добрый день. У вас в файле стилей, начиная со строки 456 прописаны стили для тега списка li в меню (#main-menu ul li) Пропишите внутрь него правило, что убрать нижнюю границу (border:none). Ну, а маркеров в списке меню я не увидел. Если они каким-то чудом у вас есть, тогда сюда пропишите соответствующие правила, что убрать изображения.

      • Благодарю вас Константин. Подчеркивания убрались. А иконки списка у меня получилось убрать самому. Добавил тег запрета показа, не знаю как точнее это выразить.
        Простите за ссылку, но было вот так h_ttp://i76.fastpic.ru/big/2015/1116/7c/81205fc1d918ba4bb94ffcf2c568487c.jpg.
        ps: Письмо с ответом на коммент пришло на английском языке, думаю вам будет интересно доработать его до русского)

  • Добрый день, Константин. Очень хочу изменить списки в дизайне сайта. Прочла вашу статью уже не один раз, но до конца не совсем понимаю, куда вставлять изменения. Вот мои стили из темы на вордпресс

    /* 019 Списки */
    .metaslider ul li{list-style-type:none}
    .side-blok ul{list-style-type:square; list-style-position:inside}
    .side-blok ul li ul{margin:10px 0 0}
    .side-blok ul li{margin:0; padding:0 0 10px}
    .side-blok ul li ul li{margin:0; padding:0 0 10px 14px}

    .post ul li{ list-style-type:square; list-style-position:inside}
    .post ul li ul{margin:10px 0 0 20px}
    .post ul li{margin:0; padding:0 0 10px}
    .post ul li ul li{margin:0; padding:0 0 10px 14px}

    Пожалуйста, помогите, у меня только получается изменить маркер с закрашенного квадрата на не закрашенный кружок. Куда я должна вставить изменения, то есть стили, которые вы даёте в статье. Буду ждать ответ. С уважением, Елена

    • Здравствуйте. В папке с шаблоном у вас есть файл стилей style.css

      Открываете его редактором notepad и вставляете данный код с новой пусто строки в конце всего содержимого файла.

  • Здравствуйте, уважаемый Константин! Прочла вашу статью несколько раз, но, к сожалению, добавить маркерованный список так и не вышло. Пробовала по разному, но в итоге все не так, как хотелось. У меня на сайте и меню, и другие элементы (на главной странице), тоже показываются в виде маркерованных списков (оказывается). Поэтому, при добавлении кода в конец стилей в меню появляется линия подчеркивания....в сайтбаре та же ерунда ....искала #main-menu ul li и подобное у себя, но все попытки прописать border:none заканчивались неудачно(((( Если сможете немножно помочь в этом вопросе - буду крайне признательна!
    Сайт указала - будет время - просмотрите, что мне с этим можно сделать.
    С уважением, Юлия.

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

  • Большое спасибо за работающий код и красивый стиль оформления!
    Перелопатил немало сайтов и все не то, а здесь скопировал-вставил и все заработало!
    Дальше уже подправь под себя и готово.
    Еще раз выражаю огромную благодарность вам за ваш труд!
    Всего самого наилучшего!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *