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

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

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

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

Список тем

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

id: 37530_tabs-1

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

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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37530_tabs-2

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

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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37530_tabs-3

Нужно визуально выделить активную вкладку. Для этого используется класс `.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` на такой же цвет.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37530_tabs-4

Теперь займемся панелями с контентом. По умолчанию все панели должны быть скрыты. Добавьте стиль для панелей контента (`.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`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

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

id: 37530_tabs-5

Мы скрыли все панели контента. Теперь нужно показать ту панель, которая соответствует активной вкладке. Для этого активной панели контента также добавляется класс `.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 для выравнивания табов

id: 37530_tabs-6

Иногда требуется, чтобы вкладки занимали всю ширину контейнера или были выровнены определенным образом. Используйте 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` для равномерного растягивания.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру