Создание табов

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

Опубликовано 17.03.2025
Просмотры 8
Автор
Рек. время прохождения 3 минуты
Упражнений 6
Комментарии 0
Тренажер CSS

В этой серии заданий вы попрактикуетесь в создании базовой структуры и стилизации для компонента \"табы\" (вкладки) с использованием HTML и CSS. Вы начнете с основ разметки и стилизации списка вкладок, затем добавите стили для активной вкладки и научитесь управлять отображением контента, связанного с каждой вкладкой. Задания постепенно усложняются, позволяя закрепить навыки работы с селекторами, свойствами display, padding, border и другими для создания интерактивного интерфейса вкладок.

Список тем

Базовая разметка и стили для списка табов

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

CSS
.tab-list {
  padding-left: 0; /* Убираем отступ по умолчанию у списка */
  margin-bottom: 0;
  input1: none; /* Убираем маркеры списка */
}

.tab-button {
  input2: inline-block; /* Располагаем элементы списка горизонтально */
  margin-right: 5px;
}
HTML
<ul class="tab-list">
  <li class="tab-button">Вкладка 1</li>
  <li class="tab-button">Вкладка 2</li>
  <li class="tab-button">Вкладка 3</li>
</ul>

<div class="tab-content-wrapper">
  <div class="tab-content">
    Содержимое вкладки 1
  </div>
  <div class="tab-content">
    Содержимое вкладки 2
  </div>
  <div class="tab-content">
    Содержимое вкладки 3
  </div>
</div>
Чтобы убрать маркеры у списка, используйте свойство `list-style-type` со значением `none` для тега `ul`. Для горизонтального расположения элементов `li` задайте им свойство `display` со значением `inline-block`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стилизация кнопок табов

Теперь придадим нашим вкладкам вид кнопок. Добавьте внутренние отступы, рамку снизу и измените курсор при наведении, чтобы пользователь понимал, что на них можно нажать.

CSS
.tab-list {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
  border-bottom: 1px solid #ccc; /* Добавим общую линию под табами */
}

.tab-button {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: -1px; /* Компенсируем границу контейнера */
  input1: 10px 15px; /* Внутренние отступы */
  input2: 2px solid transparent; /* Рамка снизу, пока прозрачная */
  input3: pointer; /* Курсор при наведении */
  background-color: #f0f0f0; /* Небольшой фон для кнопок */
}

.tab-button:hover {
  background-color: #e0e0e0;
}
HTML
<ul class="tab-list">
  <li class="tab-button">Вкладка 1</li>
  <li class="tab-button">Вкладка 2</li>
  <li class="tab-button">Вкладка 3</li>
</ul>

<div class="tab-content-wrapper">
  </div>
Используйте свойство `padding` для добавления внутренних отступов (например, `10px 15px`). Для рамки используйте `border-bottom` (например, `2px solid #ccc`). Чтобы изменить курсор на "указатель", примените свойство `cursor` со значением `pointer`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Стиль для активной вкладки

Нужно визуально выделить активную вкладку. Для этого используется класс `.active`. Задайте для активной вкладки другой цвет фона и сделайте ее нижнюю границу совпадающей с цветом фона, чтобы создать эффект "слияния" с контентом.

CSS
.tab-list {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
  border-bottom: 1px solid #ccc;
}

.tab-button {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: -1px;
  padding: 10px 15px;
  border: 1px solid transparent; /* Используем border вместо border-bottom для корректного слияния */
  border-bottom: 2px solid transparent;
  background-color: #f0f0f0;
  cursor: pointer;
}

.tab-button:hover {
  background-color: #e0e0e0;
}

input1 { /* Селектор для активной кнопки */
  background-color: #ffffff; /* Цвет фона как у контента */
  border-color: #ccc #ccc #ffffff; /* Границы: верх, право, лево - серые, низ - белый */
  border-bottom-width: 2px;
}
HTML
<ul class="tab-list">
  <li class="tab-button active">Вкладка 1</li>
  <li class="tab-button">Вкладка 2</li>
  <li class="tab-button">Вкладка 3</li>
</ul>

<div class="tab-content-wrapper">
</div>
Создайте селектор для элемента с классом `.tab-button` и одновременно классом `.active` (например, `.tab-button.active`). Внутри этого селектора измените `background-color` на цвет фона контента (например, `#fff`) и `border-bottom-color` на такой же цвет.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Скрытие неактивного контента

Теперь займемся панелями с контентом. По умолчанию все панели должны быть скрыты. Добавьте стиль для панелей контента (`.tab-content`), чтобы скрыть их.

CSS
.tab-list {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
  border-bottom: 1px solid #ccc;
}

.tab-button {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: -1px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  background-color: #f0f0f0;
  cursor: pointer;
}

.tab-button:hover {
  background-color: #e0e0e0;
}

.tab-button.active {
  background-color: #ffffff;
  border-color: #ccc #ccc #ffffff;
  border-bottom-width: 2px;
}

.tab-content-wrapper {
  border: 1px solid #ccc;
  border-top: none; /* Убираем верхнюю границу, т.к. она есть у .tab-list */
  padding: 15px;
  background-color: #ffffff;
}

.tab-content {
  input1: none; /* Скрываем все панели контента по умолчанию */
}
HTML
<ul class="tab-list">
  <li class="tab-button active">Вкладка 1</li>
  <li class="tab-button">Вкладка 2</li>
  <li class="tab-button">Вкладка 3</li>
</ul>

<div class="tab-content-wrapper">
  <div class="tab-content">
    Содержимое вкладки 1
  </div>
  <div class="tab-content">
    Содержимое вкладки 2
  </div>
  <div class="tab-content">
    Содержимое вкладки 3
  </div>
</div>
Используйте свойство `display` со значением `none`, чтобы скрыть элементы с классом `.tab-content`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Отображение активного контента

Мы скрыли все панели контента. Теперь нужно показать ту панель, которая соответствует активной вкладке. Для этого активной панели контента также добавляется класс `.active`. Напишите правило CSS, чтобы отображать панель с классом `.active`.

CSS
.tab-list {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
  border-bottom: 1px solid #ccc;
}

.tab-button {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: -1px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  background-color: #f0f0f0;
  cursor: pointer;
}

.tab-button:hover {
  background-color: #e0e0e0;
}

.tab-button.active {
  background-color: #ffffff;
  border-color: #ccc #ccc #ffffff;
  border-bottom-width: 2px;
}

.tab-content-wrapper {
  border: 1px solid #ccc;
  border-top: none;
  padding: 15px;
  background-color: #ffffff;
  min-height: 100px; /* Добавим минимальную высоту для наглядности */
}

.tab-content {
  display: none;
}

input1 { /* Селектор для активной панели */
  input2: block; /* Показываем активную панель */
}
HTML
<ul class="tab-list">
  <li class="tab-button active">Вкладка 1</li>
  <li class="tab-button">Вкладка 2</li>
  <li class="tab-button">Вкладка 3</li>
</ul>

<div class="tab-content-wrapper">
  <div class="tab-content active"> <!-- Добавлен класс active -->
    Содержимое вкладки 1
  </div>
  <div class="tab-content">
    Содержимое вкладки 2
  </div>
  <div class="tab-content">
    Содержимое вкладки 3
  </div>
</div>
Создайте селектор для элемента с классом `.tab-content` и одновременно классом `.active` (например, `.tab-content.active`). Внутри этого селектора используйте свойство `display` со значением `block`, чтобы сделать панель видимой.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование Flexbox для выравнивания табов

Иногда требуется, чтобы вкладки занимали всю ширину контейнера или были выровнены определенным образом. Используйте Flexbox для контейнера `.tab-list`, чтобы растянуть вкладки или выровнять их по центру.

CSS
.tab-list {
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
  border-bottom: 1px solid #ccc;
  input1: flex; /* Включаем Flexbox */
}

.tab-button {
  /* display: inline-block; - больше не нужно при flex */
  margin-right: 0; /* Убираем правый отступ, flex управляет промежутками */
  margin-bottom: -1px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  background-color: #f0f0f0;
  cursor: pointer;
  text-align: center; /* Центрируем текст внутри кнопки */
  input2: 1; /* Растягиваем кнопки на всю доступную ширину */
}

.tab-button:not(:last-child) {
    margin-right: 5px; /* Добавляем отступ между кнопками, кроме последней */
}

.tab-button:hover {
  background-color: #e0e0e0;
}

.tab-button.active {
  background-color: #ffffff;
  border-color: #ccc #ccc #ffffff;
  border-bottom-width: 2px;
}

.tab-content-wrapper {
  border: 1px solid #ccc;
  border-top: none;
  padding: 15px;
  background-color: #ffffff;
  min-height: 100px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}
HTML
<ul class="tab-list">
  <li class="tab-button active">Вкладка 1</li>
  <li class="tab-button">Вкладка 2</li>
  <li class="tab-button">Вкладка 3</li>
</ul>

<div class="tab-content-wrapper">
  <div class="tab-content active">
    Содержимое вкладки 1
  </div>
  <div class="tab-content">
    Содержимое вкладки 2
  </div>
  <div class="tab-content">
    Содержимое вкладки 3
  </div>
</div>
Задайте контейнеру `.tab-list` свойство `display` со значением `flex`. Затем можно использовать `justify-content` для горизонтального выравнивания (например, `space-around` или `center`) или задать элементам `.tab-button` свойство `flex-grow: 1` для равномерного растягивания.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру