Как сделать красивый нумерованный список HTML?
Категория: Сайтостроение, Опубликовано: 2017-08-18
Автор: Юлия Гусарь
Приветствую вас, дорогие друзья, на сайте Impuls-Web!
В этой статье я хотела бы вам показать, как можно сделать красивый нумерованный список HTML, который позволит вам украсить контент, и добавит некоторой индивидуальности для вашего сайта.
Навигация по статье:
- Код нумерованного списка HTML
- CSS-стили нумерованного списка HTML
Как будет выглядеть такой нумерованный список HTML, вы могли вдеть в большинстве моих статей. Так как я уже давно пользуюсь таким способом стилизации списков, и считаю, что такой вариант оформления намного интереснее, чем обычные серые цифры.
Код нумерованного списка HTML
Итак, суть данного способа заключается в том, что для начала мы создаем заготовку кода c нумерованным списком HTML, в котором задаем нумерацию самостоятельно. А далее, при помощи CSS-стилей делаем стилизацию цифр, подгоняя его оформление под дизайн нашего сайта.
Вот как выглядит код для измененного нумерованного списка HTML:
<ol> <li><span>1.</span>Текст</li> <li><span>2.</span>Текст</li> …. </ol>
<ol> <li><span>1.</span>Текст</li> <li><span>2.</span>Текст</li> …. </ol> |
Вы можете использовать данную заготовку HTML-кода, и css-стили, которые я покажу ниже, и использовать их у себя на сайте.
Перечисление может быть бесконечно длинным. Все, что вам нужно, это продублировать строки списка нужное количество раз, и исправить нумерацию, а так же добавить свой текст для пунктов.
CSS-стили нумерованного списка HTML
Далее нам нужно открыть в текстовом редакторе файл стилей нашего сайта и в самом конце дописать следующие стили:
.num-list li {
margin-bottom: 15px;
margin-top: 10px;
list-style: none;
}
. num-list li span{
background: #05A4E8; /*фон */
color: #FFF; /* цвет цифр */
margin-right: 10px; /* правый отступ */
padding: 3px 6px; /* внутренние отступы */
font-weight: bold; /*жирность цифр */
font-size:16px; /*размер шрифта */
border-radius:12px; /*скругление углов */
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .num-list li { margin-bottom: 15px; margin-top: 10px; list-style: none; }
.num-list li span{ background: #05A4E8; /*фон */ color: #FFF; /* цвет цифр */ margin-right: 10px; /* правый отступ */ padding: 3px 6px; /* внутренние отступы */ font-weight: bold; /*жирность цифр */ font-size:16px; /*размер шрифта */ border-radius:12px; /*скругление углов */ } |
В первом фрагменте стилей с селектором .num-list li мы добавляем верхний и нижний отступ для пунктов, и убираем стандартную нумерацию.
Во втором фрагменте мы добавляем стилизацию для нашей нумерации. В частности, задаем фон, цвет цифр, внутренние отступы, задаем шрифт и радиус скругления углов для тега span.
Вот что у нас получилось:
- 1.Пункт 1
- 2.Пункт 2
- 3.Пункт 3
Итак, как видите, все довольно просто. Вам остается только взять эти заготовки HTML-кода и CSS-стили, и немного подправив, вы можете свободно использовать их на своем сайте.
А на этом у меня, пожалуй, на сегодня все. Надеюсь, показанный в данной статье код для стилизации маркированных списков будут для вас полезны. Если данная статья вам понравилась, обязательно поделитесь ею в социальных сетях и оставьте свой комментарий.
До встречи в следующих статьях!
С уважением Юлия Гусарь
Как сделать список в HTML (нумерованный и маркированный). Маркеры списка
- Нумерованный список
- Маркированный список
- Виды маркеров
- Горизонтальный список
В HTML за организацию списков отвечает целый набор тегов, организация которых должна соответствовать определенным правилам структуризации данных.
Стандартом пятой версии html поддерживается 3 вида списков: нумерованные списки, маркированные списки и списки определений. Также предоставляется возможность вкладывать списки друг в друга, создавая вложенные многоуровневые списки.
Нумерованный список
Нумерованный список — это набор элементов (пунктов списка), имеющих определённую последовательность. Каждый пункт нумерованного списка имеет уникальный маркер, указывающий на порядок следования данного пункта относительно других пунктов списка. По умолчанию маркерами пунктов нумерованного списка являются числа. Первый пункт идёт под числом 1, второй под числом 2 и так далее.
Самыми распространёнными примерами нумерованных списков являются рецепты приготовления различных блюд. Так как любой рецепт — это нумерованный список, с чёткой последовательностью действий.
Для создания нумерованных списков в HTML используется тег <ol>, внутри которого располагаются элементы списка с данными. Каждый пункт списка указывается с помощью тега <li>
:
<html> <body> <h5>Нумерованный список:</h5> <ol> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ol> </body> </html>
Попробовать »
Примечание: тег <ol>
в качестве дочерних элементов может содержать только теги <li>
<li>
.
<li>
, в свою очередь, не имеет ограничений на содержимое, поэтому в нём можно размещать абзацы, картинки, ссылки, таблицы, другие списки и т.д.Маркированный список
Маркированный список — это ненумерованные, то есть неупорядоченные списки элементов, последовательность которых не имеет никакого значения. Все пункты маркированного списка имеют одинаковые маркеры, по умолчанию они отображаются в виде маленьких чёрных кругов.
Для создания маркированных списков в HTML применяется тег <ul>, внутри которого располагаются элементы самого списка (как и в случае с нумерованными списками используется тег <li>, который содержит в себе всё отображаемое содержимое списка):
<html> <body> <h5>Маркированный список:</h5> <ul> <li>Кофе</li> <li>Чай</li> <li>Молоко</li> </ul> </body> </html>
Попробовать »
Виды маркеров
Виды маркеров нумерованного списка можно изменить с помощью атрибута type
.
Значение | Описание |
---|---|
1 | Десятичные числа (1, 2, 3..) |
a | Список в алфавитном порядке, строчные буквы (a, b, c..) |
A | Список в алфавитном порядке, заглавные буквы (A, B, C..) |
i | Римские цифры, строчные (i, ii, iii, iv..) |
I | Римские цифры, заглавные (I, II, III, IV..) |
Маркированные списки не имеют атрибута type
, поэтому средствами HTML изменить вид маркера у маркированного списка не получится. Для изменения вида маркера, в этом случае, можно воспользоваться CSS свойством list-style-type, с помощью которого, помимо значения по умолчанию, можно выбрать ещё два вида маркера:
circle
или square
.Изменение маркеров у списков:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Заголовок страницы</title> </head> <body> <h5>Нумерованный список c атрибутом type="a":</h5> <ol type="a"> <li>Яблоки</li><li>Бананы</li><li>Лимоны</li> </ol> <h5>Нумерованный список c атрибутом type="I":</h5> <ol type="I"> <li>Яблоки</li><li>Бананы</li><li>Лимоны</li> </ol> <h5>Виды маркеров маркированных списков:</h5> <ul> <li>Яблоки</li><li>Бананы</li><li>Лимоны</li> </ul> <ul> <li>Яблоки</li><li>Бананы</li><li>Лимоны</li> </ul> </body> </html>
Попробовать »
CSS свойство list-style-type
, помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков.
Горизонтальный список
Если вы используете HTML список для создания горизонтального меню, то вам нужно будет расположить элементы списка друг за другом на одной строке. Средствами HTML это сделать не получится, поэтому нужно будет воспользоваться CSS.
Чтобы создать горизонтальный список, надо для пунктов списка прописать CSS свойство display со значением inline
или inline-block
, в зависимости от того, какие ещё свойства вы собираетесь использовать.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Заголовок страницы</title> <style>li { display: inline; }</style> </head> <body> <h5>Нумерованный список</h5> <ol> <li>Яблоки</li><li>Бананы</li><li>Лимоны</li> </ol> <h5>Маркированный список:</h5> <ul> <li>Яблоки</li><li>Бананы</li><li>Лимоны</li> </ul> </body> </html>
Попробовать »
После этого все пункты списка выстроятся в одну строку. Обратите внимание, что у пунктов списка пропадут маркеры и между ними не будет даже пробела, но отступ слева у списка останется.
Как горизонтальный список превратить в горизонтальное меню, вы можете посмотреть здесь.
С этой темой смотрят:
- Вложенные (многоуровневые) списки в html
- HTML тег <ul>
- HTML тег <ol>
- Оформление списков
Методы и ресурсы — Smashing Magazine
- Чтение за 19 минут
- Кодирование, CSS, Техники, Essentials
- Поделиться в Twitter, LinkedIn
Об авторе
Луис — разработчик интерфейса, писатель и писатель из Торонто, Канада. Он курирует информационные бюллетени Web Tools Weekly и Tech Productivity, а также ведет блоги о… Больше о Louis ↬
В онлайн-мире, в котором сейчас преобладают макеты CSS, списки HTML в стиле CSS стали бесценными инструментами в наборе инструментов разработчика CSS благодаря универсальности и графической гибкости списков HTML.
Если вы новичок в CSS, эта статья должна предоставить хороший обзор различных доступных типов списков, а также некоторых особенностей браузера, возникающих в отношении списков HTML, с некоторыми полезными советами, которые должны предотвратить эти особенности. становятся главными препятствиями на пути к хорошему дизайну.
Возможно, вам будут интересны следующие статьи по теме:
- Освоение CSS-кодирования: начало работы
- Объяснение гибкого макета блока CSS3
- Сложные рекомендации CSS
- Тайна свойства CSS Float
Кроме того, мы рассмотрим демонстрацию различных способов использования, методов и учебных пособий, использующих HTML-списки . Все это должно подчеркнуть важность использования списков в современном веб-дизайне, напоминая даже опытным кодерам, как HTML-списки могут повысить гибкость и удобство сопровождения веб-сайта.
Больше после прыжка! Продолжить чтение ниже ↓
Доступные параметры списка
Ненумерованные списки:
без повтора
. Это решение объясняется последовательностью шагов на сайте maxdesign.com и отлично работает во всех браузерах.Упорядоченные списки:
- калькулятор
- счеты
- Машина, используемая для численных вычислений.
Таким образом, у вас может быть более одного
Внешний вид списка определений по умолчанию практически одинаков во всех браузерах, как показано на рисунке ниже: но они устарели в XHTML, поэтому я не буду подробно обсуждать их здесь.
Списки в HTML5
В HTML5 неупорядоченный список в основном остался прежним, хотя теперь он, кажется, называется просто «список». Новый элемент
Упорядоченные списки используются, когда список элементов требует видимого возрастающего значения перед каждым элементом. Значение маркера в упорядоченном списке может быть установлено на любое из значений, также доступных для неупорядоченного списка, как обсуждалось выше. В большинстве случаев упорядоченный список будет либо иметь увеличивающийся маркер на элементах списка, либо вообще не иметь маркера. Таким образом, было бы маловероятно, что вы изменили бы маркер с увеличивающегося на не увеличивающийся на упорядоченный список , так как это удалит семантическое значение элементов.
Списки определений:
Списки определений используются для разметки списков элементов, имеющих определения.
Они состоят из терминов определения (
Ненумерованные списки являются наиболее часто используемыми списками. Вот изображение, показывающее, как выглядит неупорядоченный неупорядоченный список в разных браузерах:
Как вы можете видеть выше, настройки по умолчанию для неупорядоченных списков несколько различаются в разных браузерах. Конечно, сейчас редко можно увидеть голый ненумерованный список на каком-либо сайте. Кроме того, хороший сброс CSS нормализует эти различия, сводя список к простому тексту без маркеров, полей или отступов.
Свойства CSS, характерные для неупорядоченных списков, включают list-style-type
, list-style-position
и list-style-image.
Эти свойства задают тип маркера (или маркера), положение маркера и изображение для замены маркера. Эти три свойства можно комбинировать с помощью сокращенного свойства в стиле списка .
Для свойства
list-style-type
можно задать несколько различных значений, некоторые из которых показаны в таблице ниже:
В зависимости от браузера и системы пользователя некоторые значения для
элемента стиля списка
могут отображаться неправильно, часто по умолчанию это десятичное число
. Использование возрастающего значения для неупорядоченного списка не рекомендуется, так как это уберет семантическое значение неупорядоченного списка .
Свойство
list-style-image . list-style-position
указывает положение маркера списка и может быть установлено либо на вне
(по умолчанию), либо на внутри
. Это свойство также задает положение изображения, если установлено свойство
Свойство list-style-image
можно использовать для придания неупорядоченному списку индивидуального вида с уникальными «маркерами». К сожалению, этот метод добавления маркера в неупорядоченный список содержит ошибки в Internet Explorer и редко используется. Гораздо лучшим решением является добавление фонового изображения к
элементам
Пример
Попробуйте сами »
Jumbo List
Используйте класс w3-jumbo для отображения огромного «джамбо» список:
- Джилл
- Ева
- Адам
Пример
- Джилл
- Ева
- Адам
Попробуйте сами »
❮ Предыдущая Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.

Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery
900 900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ |
О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.