Красивый список html: Оформление списков ul li для информационных блоков

13.02.2023 alexxlab

Содержание

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

Категория: Сайтостроение, Опубликовано: 2017-08-18
Автор: Юлия Гусарь

Приветствую вас, дорогие друзья, на сайте Impuls-Web!

В этой статье я хотела бы вам показать, как можно сделать красивый нумерованный список HTML, который позволит вам украсить контент, и добавит некоторой индивидуальности для вашего сайта.

Навигация по статье:

Код нумерованного списка HTML
CSS-стили нумерованного списка HTML

Как будет выглядеть такой нумерованный список HTML, вы могли вдеть в большинстве моих статей. Так как я уже давно пользуюсь таким способом стилизации списков, и считаю, что такой вариант оформления намного интереснее, чем обычные серые цифры.

Код нумерованного списка HTML

Итак, суть данного способа заключается в том, что для начала мы создаем заготовку кода c нумерованным списком HTML, в котором задаем нумерацию самостоятельно. А далее, при помощи CSS-стилей делаем стилизацию цифр, подгоняя его оформление под дизайн нашего сайта.

Вот как выглядит код для измененного нумерованного списка HTML:

<ol> <li>1.Текст</li> <li>2.Текст</li> …. </ol>

<ol>

<li>1.Текст</li>

<li>2.Текст</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; /*скругление углов */ }

.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, помимо видов маркеров для маркированных списков, имеет множество различных видов маркеров и для нумерованных списков.

Но не всегда изменения одного стандартного вида маркера на другой бывает достаточно для того, чтобы красиво оформить список. Для оформления списков лучше использовать CSS, который позволяет не только изменять вид маркера, но и заменять маркеры на картинки, контролировать их расположение и управлять отступом. Как всё это делать вы можете посмотреть тут.

Горизонтальный список

Если вы используете 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.

И все это, несмотря на некоторые очевидные несоответствия браузеров, которые могут повлиять на стиль различных типов списков, доступных в кодировании HTML.

Если вы новичок в CSS, эта статья должна предоставить хороший обзор различных доступных типов списков, а также некоторых особенностей браузера, возникающих в отношении списков HTML, с некоторыми полезными советами, которые должны предотвратить эти особенности. становятся главными препятствиями на пути к хорошему дизайну.

Возможно, вам будут интересны следующие статьи по теме:

Освоение CSS-кодирования: начало работы
Объяснение гибкого макета блока CSS3
Сложные рекомендации CSS
Тайна свойства CSS Float

Кроме того, мы рассмотрим демонстрацию различных способов использования, методов и учебных пособий, использующих HTML-списки . Все это должно подчеркнуть важность использования списков в современном веб-дизайне, напоминая даже опытным кодерам, как HTML-списки могут повысить гибкость и удобство сопровождения веб-сайта.

Больше после прыжка! Продолжить чтение ниже ↓

Доступные параметры списка

Ненумерованные списки:

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

Как вы можете видеть выше, настройки по умолчанию для неупорядоченных списков несколько различаются в разных браузерах. Конечно, сейчас редко можно увидеть голый ненумерованный список на каком-либо сайте. Кроме того, хороший сброс CSS нормализует эти различия, сводя список к простому тексту без маркеров, полей или отступов.

Свойства CSS, характерные для неупорядоченных списков, включают list-style-type , list-style-position и list-style-image. Эти свойства задают тип маркера (или маркера), положение маркера и изображение для замены маркера. Эти три свойства можно комбинировать с помощью сокращенного свойства в стиле списка .

Для свойства list-style-type можно задать несколько различных значений, некоторые из которых показаны в таблице ниже:

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

Свойство list-style-position указывает положение маркера списка и может быть установлено либо на вне (по умолчанию), либо на внутри . Это свойство также задает положение изображения, если установлено свойство list-style-image .

Свойство list-style-image можно использовать для придания неупорядоченному списку индивидуального вида с уникальными «маркерами». К сожалению, этот метод добавления маркера в неупорядоченный список содержит ошибки в Internet Explorer и редко используется. Гораздо лучшим решением является добавление фонового изображения к элементам

в списке, соответствующей настройке положения фонового изображения и установке его на без повтора . Это решение объясняется последовательностью шагов на сайте maxdesign.com и отлично работает во всех браузерах.
Упорядоченные списки: