Обновлено
Красиво оформленные списки создают уютную атмосферу на сайте. Они помогают лучше воспринимать контент, увеличивают среднее время, проведенное на сайте, и помогают превращать случайных гостей в постоянных заинтересованных читателей.
- Содержание
- Как оформляются списки в HTML?
- Где стили списков прописаны в шаблоне Twenty Eleven?
- Как оформить нумерованный список?
- Как оформить маркированный (ненумерованный) список?
- Как вывести на странице несколько списков с разным оформлением?
- Как создать ссылки-якоря в списке содержания?
Как оформляются списки в HTML?
Списки бывают нумерованными и ненумерованными.
Нумерованные списки выводятся кодом:
<ol>Список с цифрами <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ol>
Не нумерованные списки выводятся кодом:
<ul>Список с галочками или другими символами <li> пункт 1</li> <li> пункт 1</li> <li> пункт 1</li> </ul>
Каждый пункт любого списка заключается в тег li. Все пункты списка заключаются в один общий тег ul или ol. Стили этих тегов прописываются в таблице стилей.
Для каждого тега присваиваются определенные стили оформления. В них указываются отступы от текста.
Для нумерованного списка прописываются стили нумерации для каждого пункта.
Стандартные арабские цифры описываются значением decimal.
list-style-type: decimal; /*арабские цифры*/
Для маркерованного списка указывается стиль символов — квадратики или кружочки.
list-style-type: circle; /*кружки*/
list-style-type: square; /*квадраты*/
Каждому пункту меню можно назначить изображение.
list-style-image: url(‘путь к изображению’);
Обычно в шаблонах нумерованный список оформляется простыми цифрами, а не нумерованный – черными квадратиками и кружочками. Это скучно и невыразительно. Давайте это исправим.
Где стили списков прописаны в шаблоне Twenty Eleven?
Откройте файл стилей style.css. Найдите раздел с названием /* Text elements */
Стандартный код выглядит вот так:
Как оформить нумерованный список?
Нумерованный список с использованием фона
Посмотрите вот на такое симпатичное оформление нумерованного списка.
Нравится? Давайте повторим.
Найдите стили для тега ol. Пропишите к нему новые свойства.
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; }
Для того чтобы вы поняли, где что вам нужно изменить под свой дизайн, давайте разберем этот код по полочкам.
list-style-type: none; — отключает вывод стандартных цифр
counter-reset: point; — задает переменную для счетчика нумерации
position: relative; — размещает нумерацию возле самих пунктов
before — псевдоэлемент для тега ol li. Имеет следующие стили:
content: counter(point); — выводит значение переменной
counter-increment: point 1; — увеличивает счетчик на 1
position: absolute;
background: #BDC3C7; — фон для цифр (фон можно задать цветом или красивой иконкой
margin – внешние отступы
padding – внутренние отступы
color – цвет текста элемента
background – фон
text-align – выравнивание текста
font-weight – толщина (насыщенность) шрифта
В своих стилях вы можете задать любые цвета, выравнивания, размеры шрифта и отступы.
Нумерованный список с уникальным изображением для каждого пункта
На одном женском сайте есть очень привлекательные нумерованные списочки.
Как это реализовано? Давайте рассмотрим следующий код:
/*первый номер*/ 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); } /*Далее прописываем точно также только для следующих номеров пунктов*/
В коде такого нумерованного списка нужно перечислить все номера пунктов и для каждого из них назначить уникальную иконку.
Если в списках в статьях вы используете до 20 нумерованных пунктов, то нужно прописать псевдокласс nth-child(An) 20 раз. Так чтобы последним в стилях шел псевдокласс nth-child(20n).
Найдите в файле стилей строчки, которые описывают оформление нумерованного списка (теги ol li).
Допишите в него псевдокласс first-child. Скопируете и вставьте его один раз, затем измените данное свойство на nth-child(An) и скопируете столько, сколько номеров должны иметь свою иконку. Проставьте номера пунктов.
Для каждого номера пропишите свойство list-style-image с собственной уникальной иконкой.
Если иконки на сайте располагаются далеко от пунктов или накладываются на них, то нужно отредактировать выравнивание и отступы цифровых иконок или текста пунктов.
Как оформить маркированный (ненумерованный) список?
Маркированный список ul li с чередующимися иконками
Мне очень понравился вот такой маркированный список
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; }
Можно вместо стандартного стиля list-style-type назначить свойство «путь к иконке» — list-style-image:url. Но тогда нужно прописать внешний левый отступ от краешков сайта — без него иконки не будут отображаться, уйдут за зону области контента.
Для эксперимента можно назначить отступы:
ul li{ list-style-image: url(images/radio.png); margin-left: 30px; }
Чередование иконок можно задать свойством nth-child(An). В приведенном примере использован псевдоэлемент before.
В коде прописан один псевдокласс nth-child(2n). Его значение — 2. Получается, что каждому четному пункту соответствует другая иконка. Если вместо 2n написать 2n+1, то другая иконка будет приходиться на нечетные пункты.
Для каждого пункта списка можно задать нижнее подчеркивание. В приведенном примере пункты подчеркиваются пунктиром.
Также каждому пункту можно назначить рамочки, фон, иконки. Только не перемудрите. Наша задача — не сразить всех наповал навороченным дизайном, а улучшить качество восприятия контента.
Как вывести на странице несколько списков с разным оформлением?
Иногда нужно разместить несколько списков с разными стилями.
Например, содержание каждого поста у меня оформлено списком, но этот список отличается от остальных фоном и левым бордюром.
Если назначить общие стили, то одно и то же оформление будет присвоено всем спискам. Разные списки можно вывести, если назначить тегу ol или ul отдельный id и прописать его в html режиме редактирования статьи. Ну а в файле стилей для этого id нужно прописать отдельные стили.
Вот, например, один симпатичный вариант оформления содержания:
В HTML вы пропишите список так:
<ol id="sod">Содержание <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ol>
В CSS вы пропишите стили так:
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 }
Новый стиль отличается от основного оформлением тега ol: фоном, стилем отображения, линией слева от содержимого.
Используя в тексте несколько разных по оформлению списков, вы сделаете подачу информации еще интереснее. При перечислении каких-либо предметов можно задать одни иконки, а при перечислении действий — другие. Здесь уже дизайн ограничивается только вашей фантазией.
Эти методы применимы и в дизайне пунктов меню, рубрик и любых других элементов сайта.
Как создать ссылки-якоря в списке содержания?
В заключение хочу поделиться еще одним секретом. Как вы заметили, в содержании поста подзаголовки оформлены ссылками, переносящими нас соответствующему разделу. Это достигнуто при помощи ссылок-якорей.
Как же их прописать в HTML коде? Один кусочек кода обрамляет анкор ссылки, а другой кусочек кода ставится рядом с тем местом, куда нас нужно перебросить при нажатии на ссылку.
Код блока содержания будет выглядеть так:
<ol id="sod">Содержание <li><a href="#1">Заголовок 1</a></li> <li><a href="#2">Заголовок 2</a></li> <li><a href="#3">Заголовок 3</a></li> </ol>
А в тексте статьи нужно написать так:
<a name="1"></a> Заголовок 1… <a name="2"></a> Заголовок 2… <a name="3"></a> Заголовок 3…
Может быть более опытные вебмастера меня в чем-то поправят. Я просто советую то, что попробовала на практике сама.
Если у вас остались какие-то вопросы, буду рада увидеть их в комментариях.
Агеева Вероника.
Возможно вас еще заинтересует:
- «Как удалить лишние заголовки из шаблона?»
- «Как красиво оформить заголовки на сайте?»
- «Как добавить на сайт красивые кнопки соцсетей?»