Как сделать красивый список
Обновлено: 03.07.2024
HTML поддерживает списки трех разных типов, для каждоrо из которых предусмотрены свои собственные теrи:
Нумерованные списки
В нумерованный список браузер автоматически вставляет номера элементов по порядку, начиная с некоторого значения (обычно 1). Это позволяет вставлять и удалять пункты списка, не нарушая нумерации, так как остальные номера автоматически будут пересчитаны.
Нумерованные списки создаются с помощью блочного элемента (от англ. Ordered List – нумерованный список). Далее в контейнер для каждого пункта списка помещается элемент (от англ. List Item – пункт списка). По умолчанию применяется нумерованный список с арабскими числами.
Тег имеет следующий синтаксис:
Элементы нумерованного списка должны содержать несколько элементов списка, как показано в следующем примере:
Пример: Нумерованный список
Пошаговая инструкция
- Достать ключ
- Вставить ключ в замок
- Повернуть ключ на два оборота
- Достать ключ из замка
- Открыть дверь
Иногда при просмотре существующих кодов HTML вы будете встречать аргумент type в элементе , который используется для указания типа нумерации (буквы, римские и арабские цифры и т.п.). Синтаксис:
Здесь: type – символы списка:
- A — прописные латинские буквы (A, B, C . . .);
- a — строчные латинские буквы (a, b, c . . .);
- I — большие римские цифры (I, II, III . . .);
- i — маленькие римские цифры (i, ii, iii . . .);
- 1 — арабские цифры (1, 2, 3 . . .) (применяется по умолчанию).
Если вы хотите, чтобы список начинался с номера, отличного от 1, следует указать это при помощи атрибута start тега .
В следующем примере показан нумерованный список с большими римскими цифрами и начальным значением XLIX:
Пример: Применение атрибутов type и start.
- Перепела
- Фазаны
- Куропатки
- Павлины
Нумерацию можно начинать и с помощью атрибута value, который добавляется к элементу следующим образом:
В этом случае последовательная нумерация списка прервётся и с этого пункта нумерация начнётся заново, в данном случае с семи.
Пример использования атрибута value тега , который позволяет изменить номер данного элемента списка:
Пример: Применение атрибута value
- Первый пункт списка
- Второй пункт списка
- Третий пункт списка
В этом примере "Первый пункт списка" будет иметь номер 1, "Второй пункт списка" – номер 7, а "Третий пункт списка" – номер 8.
Форматирование нумерованных списков с помощью CSS
Для изменения номеров списков стоит использовать свойство list-style-type таблицы стилей CSS:
| Пример | Значение | Описание |
|---|---|---|
| а, Ь, с | lower-alpha | Строчные буквы |
| А, В, С | upper-alpha | Прописные буквы |
| i, ii, iii | lower-roman | Римские цифры, набранные строчными буквами |
| I, II, III | upper-roman | Римские цифры, набранные прописными буквами |
На примере представленном далее НТМL-кода показано, как использовать стили для получения списка, пункты которого пронумерованы римскими цифрами, набранными буквами нижнеrо реrистра:
Пример: Применение свойства CSS list-style-type
- первый пункт списка
- второй пункт списка
- третий пункт списка
Маркированные списки
Маркированные списки по сути похожи на нумерованные только они не содержат последовательной нумерации пунктов. Маркированные списки создаются с помощью блочного элемента (от англ. Unordered List – ненумерованный список). Каждый элемент списка, как и в нумерованных списках, начинается с тега . Браузер формирует отступ для каждого пункта списка и автоматически отображает маркеры.
Тег имеет следующий синтаксис:
В следующем примере видно, что, по умолчанию, перед каждым элементом списка добавляется небольшой маркер в виде закрашенного кружка:
Пример: Маркированный список
- Windows Movie Maker
- Pinnacle VideoSpin
- AviSynth
- Avidemux
Внутри тега не обязательно размещать только текст, допустимо поместить любой элемент потокового контента (ссылки, абзацы, изображения и др.)
Вложенные списки
Любой список может быть вложен в другой. Внутри элемента допустимо создание вложенного списка, или списка второго уровня. Для вложения списка опишите новый список внутри элемента уже имеющегося списка. При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. Любой список может быть вложен в другой. Следующий пример демонстрирует структуру маркированного списка, вложенного во второй пункт нумерованного.
Пример: Вложенные списки
| При вложении одного маркированного списка в другой браузер автоматически меняет стиль маркера для списка второго уровня. При этом, при вложении нумерованных списков стиль нумерации не меняется по умолчанию. |
Форматирование маркированных списков
Для изменения внешнего вида маркера списков стоит использовать свойство list-style-type таблицы стилей CSS:
| Значение | Описание |
|---|---|
| disc | маркер в форме кружков с заливкой |
| circle | маркер в форме кружков без заливки |
| square | маркер в форме квадрата с заливкой |
| none | пункты списка без маркера |
В следующем примере рассмотрены различные стили оформления маркированных списков:
Несколько примеров как задать стили у нумерации списков с применением счетчика counter и псевдоэлемтов :before и :after .
HTML разметка
Цвет нумерации
Большие цифры
Квадратные маркеры
Круглые маркеры
Отбивающая линия
Пошаговый список
Комментарии
Другие публикации
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.
Такой вопрос возникает при вставке текста из формы на сайт (отзывы, комментарии и т.д.) с форматированием элементом p.
Пример реализации всплывающей подсказки или меню с затемнением фона на jQuery и CSS, в верстке использованы блок со.
Fancybox 3 плагин галерей и модельных окон, в отличии от второй версии существенно изменилась скорость работы, дизайн и немного API, далее подробнее о вызове модальных окон.
Как вы думаете, современный ли у вас дизайн сайта? Используете ли вы самые последние технологии или боитесь их? Возможно, вы думаете что это слишком сложно и даже лезть не хотите в эти дебри. Но на самом деле всё обстоит куда иначе. Ведь новые технологии (я имею ввиду сейчас CSS3) пришли для того, чтобы сделать жизнь веб-дизайнера легче и привнести свои дополнительные возможности при создании внешнего вида сайта. Сегодня поговорим о том несколько видов дизайна для выпадающего списка.
Выпадающий список для сайта
Не самое простое решение я рассматривал в январе этого года 🙂 :
Что хочу сказать сразу по поводу демо: каждый отдельный вид списка находится в отдельном файле HTML, что позволяет без труда взять код, который вам нужен. Также в отдельных файлах расположены стили для каждого дизайна списка. Вам лишь осталось выбрать тот, который вам больше всего нравится и найти его файл стилей 🙂 .
Это логично было сделать после статьи про оформление контента, ведь у многих будут проблемы в данном вопросе, так как необходимы навыки в CSS. Я же постараюсь ограничиться лишь необходимым набором действий для уникализации списков.
Предисловие
По умолчанию, в большинстве шаблонов данные списки имеют оформление простых цифр (нумерованный список ol li) и обыкновенных квадратиков и кружков черного цвета (ненумерованный, маркерованный список ul li).
Такие списки хорошо воспринимаются посетителями, ведь они структурируют контент на сайте. Но было бы гораздо лучшее, если вместо простых точек и квадратиков были полноценные иконки, которые в последнее время используются на продающих сайтах для повышение конверсии посетителя в покупателя.
С обычным сайтом ситуация аналогичная, ведь при использовании хорошо оформленных списков, конверсия посетителя в постоянного читателя и время проведенное на ресурсе увеличивается. Если вы посмотрите на большинство новых ресурсов, которые хорошо оформляют свой контент и достигают больших результатов в кратчайшие сроки, увидите у них красиво оформленные списки с индивидуальными иконками.
На моем блоге также списки оформлены. Ненумерованные имеют вид чек-боксов в рамке с чередованием цветов через один пункт.
И сегодня я еще оформил нумерованный список, который имеет теперь не просто вид цифр, а они оформленные фоном, что значительно проще воспринимается и сразу замечается посетителем.
Конечно, можно сделать нумерацию более привлекательной, но я остановился на таком варианте. Также можно делать не просто цифры на фоне, а для каждого номера списка назначит свою индивидуальную иконку. Это мы также рассмотрим. Теперь перейдем к практике.
Оформление нумерованного списка ol li
Прежде всего вы должны понимать, что каждый пункт списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol, который является общим для таблицы стилей (списка).
Например, если мы берем нумерованный список, то он будет иметь такую структуру с использованием тега ol.
Ненумерованный же список заключается в общий тег ul.
Каждому тегу присваиваются свои стили оформления, в которых обязательно прописаны отступы от обычного текста, ведь списки всегда имеют свои отступы слева, в отличии от обычного текста. Это общие правила оформления списков.
Также прописаны стили нумерации для каждого пункта списка.
Для маркерованного списка прописывают стиль в виде квадратиков или кружочков.
Для нумерованного списка применяется значение decimal для вывода стандартных арабских цифр (1, 2, 3…)
Все значения данного тега вы можете найти на [urlspan]сайте-учебнике по HTML[/urlspan].
Также имеется и свойство для назначения изображения к каждому пункту списка, а именно:
Именно его мы и будем использовать в первом варианте (их будет 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).
Данный способ действительно мудреный, так как придется много стилей добавить и найти очень много иконок с цифрами для каждого номера в списке. Но метод рабочий. Иконки можно найти в интернете или же самому создать.
Итак, плагин действий для реализации такого способа следующий:
- Находите в файле стилей строки, отвечающие за оформление нумерованного списка. Необходимо найти теги ol li;
- Дописываете в него псевдокласс first-child, как показано в коде выше. Копируете один раз, изменяете данное свойство на nth-child(An) и копируете то количество раз, скольким номерам необходимо назначить свою иконку. Затем проставляете номера для пунктов;
- К каждому номеру прописываете свойство list-style-image (см. выше) со своей уникальной иконкой.
После этого все должно работать, но имеется один момент. Иконки могут располагаться сильно далеко от пунктов или же накладываться. Тогда придется вам поработать с выравниванием и отступами иконок цифр или самого текста пунктов.
Теперь перейдем ко второму способу, который стоит у меня.
Способ 2
В данном случае мы можем использовать как иконки, так и фон. тут уже на порядок проще, так как не придется прописывать уникальное изображение для каждого пункта.
Будем использовать псевдоэлемент before, который выводит определенное содержимое перед элементом (в нашем случае пункт списка).
Реализация похожа с предыдущей:
- Находим стили для общего тега таблицы стилей нумерованного списка (тег ol) и прописываем к нему свойства:
- Для тега каждого пункта внутри общей таблицы стилей (тег ol li) прописываем свойство для размещение нумерации возле самих пунктов — position: relative;
- Последним шагом дописываем псевдоэлемент 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, то другая иконка будет у нечетных пунктов. Более подробно узнайте о данном псевдоклассе [urlspan]здесь[/urlspan].
Можете и для каждого пункта назначить фон, рамки, иконки и т.д. Все на ваше усмотрение. Но не стоит сильно мудрить. Сделайте все просто. Задача в оформлении списков не выпендриться и убить глаза, а сделать все отлично от других сайтов, чтобы увеличивать качество восприятия контента вашими посетителями.
Переходим к последнему пункту сего материала.
Несколько разно-оформленных списков на одной странице
Бывает, когда требуется не просто оформить списки, а разместить несколько разных по оформлению список на одной странице.
Если мы назначим общие стили, то одно оформление будет назначаться ко всем спискам. Ну, а допустим, что нам нужно разместить 2 списка, но, чтобы у одного были иконки чек-боксов, а у другого иконки в виде полноценных картинок. Как такое реализовать?
Все просто. Если вы посмотрите на мои материалы, то в начале каждого имеется содержание, оформленное с помощью фона и левой бордюры, но по сути, это тот же нумерованный список. Просто я ему назначил отдельный id, прописав его в html режиме.
Затем в файл стилей прописал отличные стили от общих для всех списков.
Как видим, то просто необходимо скопировать стили для общего оформления списков, затем в скопированном варианте дописать название того ID, который добавили к тегу ul или ol, и изменить стили, чтобы оформление различалось.
Если посмотреть на мой вариант, то я применил изменения только для общего тега ol, а именно: изменил фон, стиль отображения, добавил линию слева для большего выделения. Также затронул и псевдоэлемент before, где в общих стилях к нему прописан жирный стиль текста, чтобы номера больше выделялись на фоне. В содержании они через чур насыщены, поэтому пришлось сделать текст не жирным.
Таким образом вы можете сделать материалы еще более интересней для чтения. Например, для пунктов, в которых идет перечисления каких-то предметов, сделать одни иконки. А для пунктов с перечислением действий, другие.
Итак, друзья! Данный материал можно заканчивать. Я не пытался вас научить премудростям CSS. Целью было лишь показать варианты индивидуального оформления списков, так как с этим имееются сложности и я сам когда-то помучился.
Кстати, таким способом можно оформлять и пункты в меню, в рубриках и во многих других элементах сайта.
Напоследок хотел бы попросить вас оставить свой комментарий и оценить данный материал с помощью звездочек ниже. Если конечно вам данная статья помогла.
Читайте также: