Как красиво оформить списки в тегах ul ol li? Готовые стили для списков

Дьявол — в деталях. Дизайн — в мелочах. Аккуратные списки в тексте — важный штрих к портрету сайта. Они упрощают восприятие контента и усиливают вовлечённость в чтение статьи.

Как оформляются списки в HTML?

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

Код для вывода нумерованных списков:

Код для вывода маркированных списков:

За вывод конкретного пункта списка отвечает тег li. Все пункты списка заключены в общий тег ul или ol. Стили этих тегов выносят в таблицу стилей (в файл style.css).

Для каждого тега присваивают определенные стили оформления. В них указывают отступы от текста.

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

Стандартные арабские цифры описывают значением decimal.

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

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

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

Каждому пункту меню можно назначить изображение.

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

Часто в шаблонах СМС нумерованный список оформляется простыми цифрами, а не нумерованный – черными фигурками. Исправить это не сложно.

Где стили списков прописаны в шаблоне Twenty Eleven?

Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */

Стандартный код выглядит вот так:

Как оформить нумерованный список?

Цифры на фоне цветных квадратов в стиле сайта прекрасно оживят дизайн.

Найдите в файле style.css стили для тега ol. Обновите его свойства.

Синтаксис кода предельно прост.

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

before — псевдоэлемент для тегов ul, ol content: counter(point); — вывод значения переменной counter-increment: point 1; — увеличение счетчика на 1 position: absolute; background: #BDC3C7; — фон для цифр (конкретный цвет или красивая иконка) margin — внешние отступы padding — внутренние отступы color — цвет текста элемента background — фон text-align — выравнивание текста font-weight — толщина (насыщенность) шрифта

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

Сайты о моде и красоте требуют ярких красок.

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

Если в списках предусмотрено использование до 20 нумерованных пунктов, то прописывают псевдокласс nth-child(An) 20 раз. Последним указывают псевдокласс nth-child(20n).

В строках, описывающих оформление нумерованного списка дописывают псевдокласс first-child. Необходимо скопировать и вставьте его один раз, затем изменить данное свойство на nth-child(An) и скопировать столько, сколько номеров пунктов должно иметь свою иконку, а потом проставить номера пунктов.

Для каждого номера указывают свойство list-style-image с собственной уникальной иконкой.

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

Как оформить маркированный (ненумерованный) список?

Галочки в маркированном списке могут отличаться по насыщенности тона.

Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента.

Для эксперимента можно назначить отступы:

Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before.

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

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

Каждому пункту списка можно назначить свои рамки, фон, иконки.

Как вывести на странице несколько списков с разным оформлением?

Списки в тексте могут иметь разное оформление.

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

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

Простой пример аккуратного оформления содержания статьи:

Вывод списка при публикации статьи в режиме редактирования HTML:

Новый стиль отличается от основного оформлением тега ol. Здесь представлен новый фон, появилась чёткая линия слева от содержимого.

Разнообразие в оформлении списков делает подачу информации на порядок интереснее. При перечислении предметов можно задать одни иконки, при перечислении действий — другие.

Описанные методы применимы в дизайне пунктов меню, рубрик и любых других элементов сайта.

Как создать ссылки-якоря в списке содержания?

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

Как прописать ссылки-якоря в HTML коде? Один фрагмент кода обрамляет анкор ссылки, а другой — ставится рядом с тем местом, куда нужно перебросить читателя после клика по ссылке.

Код блока содержания:

Код в тексте статьи для создания метки, на которую переносится внимание читателя при клике:

Проектирование дружественного дизайна и аккуратное оформление контента — важный шаг к процветанию сайта.