Кастомные маркеры и стилизация списков [Модуль 5: Списки]: Тренажер HTML

Тренажер по HTML для пользователей с начальным уровнем подготовки.

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

Список тем

Создание простого маркированного списка

id: 37829_html-list-basic-ul

Начнем с основ. Перед вами несколько элементов будущего списка. Ваша задача — обернуть их в правильный тег, чтобы создать стандартный маркированный список (с точками).

CSS

ul {
  padding-left: 20px;
  color: #333;
}

li {
  margin-bottom: 5px;
}

                     <input1>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
<input2>

HTML

<input1>
  <li>Первый пункт</li>
  <li>Второй пункт</li>
  <li>Третий пункт</li>
<input2>

Для создания маркированного (неупорядоченного) списка используйте парный тег `<ul>` (Unordered List). Все элементы списка `<li>` должны находиться внутри него.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Создание нумерованного списка

id: 37829_html-list-basic-ol

Теперь создайте упорядоченный список. Элементы должны быть пронумерованы, начиная с 1. Оберните существующие элементы `<li>` в соответствующий тег.

CSS

ol {
  padding-left: 20px;
  color: #333;
}

li {
  margin-bottom: 5px;
}

                     <input1>
  <li>Шаг первый</li>
  <li>Шаг второй</li>
  <li>Шаг третий</li>
<input2>

HTML

<input1>
  <li>Шаг первый</li>
  <li>Шаг второй</li>
  <li>Шаг третий</li>
<input2>

Для создания нумерованного (упорядоченного) списка используется парный тег `<ol>` (Ordered List).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Стилизация маркеров: квадраты

id: 37829_html-list-style-square

Стандартные маркеры-кружки можно легко изменить. Используя готовый CSS, примените к списку класс, который превратит маркеры в квадраты.

CSS

ul {
  padding-left: 20px;
  color: #333;
}

li {
  margin-bottom: 5px;
}

.list-square {
  list-style-type: square;
}

                     <ul input1="list-square">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

HTML

<ul input1="list-square">
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

В CSS уже определен класс `list-square`. Чтобы его использовать, добавьте к тегу `<ul>` атрибут `class` со значением `list-square`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Убираем стандартные маркеры

id: 37829_html-list-style-none

В навигационных меню или других блоках списки часто используются без маркеров. Примените к списку `<ul>` класс, который полностью скроет стандартные маркеры.

CSS

ul {
  padding-left: 20px;
  color: #333;
}

li {
  margin-bottom: 8px;
}

.no-markers {
  list-style-type: none;
  padding-left: 0;
}

                     <ul class="input1">
  <li>Главная</li>
  <li>О нас</li>
  <li>Контакты</li>
</ul>

HTML

<ul class="input1">
  <li>Главная</li>
  <li>О нас</li>
  <li>Контакты</li>
</ul>

Для этого задания в CSS есть класс `no-markers`. Добавьте его в атрибут `class` тега `<ul>`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Кастомный маркер-изображение

id: 37829_html-list-style-image

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

CSS

.image-marker {
  list-style: none;
  padding-left: 0;
}

.image-marker li {
  position: relative;
  padding-left: 25px; /* Пространство для иконки */
  margin-bottom: 8px;
  line-height: 1.4;
}

.image-marker li::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('https://naytikurs.ru/img/11s.svg');
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 4px; /* Небольшая коррекция для вертикального выравнивания */
}

                     <ul class="input1">
  <li>Высокая скорость</li>
  <li>Надежность</li>
  <li>Поддержка 24/7</li>
</ul>

HTML

<ul class="input1">
  <li>Высокая скорость</li>
  <li>Надежность</li>
  <li>Поддержка 24/7</li>
</ul>

Примените к списку `<ul>` класс `image-marker`. Этот класс убирает стандартные маркеры и с помощью псевдоэлемента `::before` добавляет иконку перед каждым пунктом списка. Это более гибкий и надежный способ, чем использование `list-style-image`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Современные кастомные маркеры через псевдоэлемент

id: 37829_html-list-pseudo-element

Самый гибкий способ кастомизации — использование псевдоэлементов. Примените к списку класс, который уберет стандартный маркер и добавит вместо него стилизованный символ '→' перед каждым пунктом.

CSS

.custom-arrow-list {
  list-style: none;
  padding-left: 0;
  color: #1a1a1a;
}

.custom-arrow-list li {
  padding-left: 1.5em;
  text-indent: -1.5em;
  margin-bottom: 8px;
}

.custom-arrow-list li::before {
  content: '→';
  color: #007bff;
  margin-right: 0.7em;
  font-weight: bold;
}

                     <input1 class="custom-arrow-list">
  <li>Изучение теории</li>
  <li>Выполнение практики</li>
  <li>Закрепление знаний</li>
<input2>

HTML

<input1 class="custom-arrow-list">
  <li>Изучение теории</li>
  <li>Выполнение практики</li>
  <li>Закрепление знаний</li>
<input2>

В CSS подготовлен класс `.custom-arrow-list`. Он обнуляет стандартные стили списка (`list-style: none`, `padding-left: 0`) и добавляет контент с помощью селектора `.custom-arrow-list li::before`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Нумерованный список с определенного числа

id: 37829_html-list-ol-start

Иногда нумерацию нужно начать не с 1. Сделайте так, чтобы этот нумерованный список начинался с цифры 7, используя специальный атрибут.

CSS

ol {
  padding-left: 20px;
  color: #333;
}

li {
  margin-bottom: 5px;
}

                     <ol input1="7">
  <li>Седьмой элемент</li>
  <li>Восьмой элемент</li>
  <li>Девятый элемент</li>
</ol>

HTML

<ol input1="7">
  <li>Седьмой элемент</li>
  <li>Восьмой элемент</li>
  <li>Девятый элемент</li>
</ol>

Для тега `<ol>` существует атрибут `start`. Чтобы начать нумерацию с 7, добавьте в тег `<ol>` атрибут `start` со значением `7`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Обратная нумерация списка

id: 37829_html-list-ol-reversed

Списки могут иметь и обратную нумерацию. Добавьте атрибут, который заставит этот список считать в обратном порядке: 3, 2, 1.

CSS

ol {
  padding-left: 20px;
  color: #333;
}

li {
  margin-bottom: 5px;
}

                     <ol start="3" input1>
  <li>Три...</li>
  <li>Два...</li>
  <li>Один...</li>
  <li>Старт!</li>
</ol>

HTML

<ol start="3" input1>
  <li>Три...</li>
  <li>Два...</li>
  <li>Один...</li>
  <li>Старт!</li>
</ol>

Чтобы инвертировать порядок нумерации, добавьте к тегу `<ol>` логический (булев) атрибут `reversed`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку