Обновлено
Дьявол — в деталях. Дизайн — в мелочах. Аккуратные списки в тексте — важный штрих к портрету сайта. Они упрощают восприятие контента и усиливают вовлечённость в чтение статьи.
- Содержание
- Как оформляются списки в 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. Стили этих тегов выносят в таблицу стилей (в файл 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. Обновите его свойства.
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 — псевдоэлемент для тегов ul, ol
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).
В строках, описывающих оформление нумерованного списка дописывают псевдокласс 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…
Проектирование дружественного дизайна и аккуратное оформление контента — важный шаг к процветанию сайта.
Агеева Вероника, копирайтер на Etxt.ru.
Статьи в тему:
- «Как удалить лишние заголовки из шаблона?»
- «Как красиво оформить заголовки на сайте?»
- «Как добавить на сайт красивые кнопки соцсетей?»
