Создание адаптивного дашборда

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

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

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

Список тем

Базовая структура дашборда (Flexbox)

Создайте базовую двухколоночную структуру для дашборда. Используя CSS Flexbox, расположите боковую панель (.sidebar) и основное содержимое (.main-content) рядом друг с другом внутри контейнера .dashboard-container. Боковая панель должна занимать фиксированную ширину, а основное содержимое — оставшееся пространство.

CSS
.dashboard-container {
  input1: flex;
  min-height: 300px; /* Для наглядности в iframe */
}

.sidebar {
  width: 120px; /* Фиксированная ширина */
  background-color: #f0f0f0;
  padding: 15px;
  border-right: 1px solid #ccc;
}

.main-content {
  input2: 1;
  padding: 15px;
  background-color: #ffffff;
}

/* Базовые стили для шапки и карточек */
.header {
  background-color: #4a90e2;
  color: white;
  padding: 10px 15px;
  margin-bottom: 15px;
}

.card {
  background-color: #e9e9e9;
  border: 1px solid #d1d1d1;
  padding: 10px;
  margin-bottom: 10px;
}
HTML
<div class="dashboard-container">
  <aside class="sidebar">
    <p>Навигация</p>
    <ul>
      <li>Меню 1</li>
      <li>Меню 2</li>
    </ul>
  </aside>
  <main class="main-content">
    <header class="header">
      <h1>Дашборд</h1>
    </header>
    <div class="card">Карточка 1</div>
    <div class="card">Карточка 2</div>
  </main>
</div>
Для создания flex-контейнера используйте свойство `display` со значением `flex` для родительского элемента `.dashboard-container`. Чтобы основное содержимое заняло доступное пространство, используйте свойство `flex-grow` со значением `1` для селектора `.main-content`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Расположение карточек (Flexbox Wrap)

Теперь настроим расположение карточек (.card) внутри основного содержимого (.main-content). Используйте Flexbox, чтобы карточки располагались в ряд и автоматически переносились на следующую строку, если не помещаются в одну. Добавьте небольшой отступ между карточками.

CSS
.dashboard-container {
  display: flex;
  min-height: 300px;
}

.sidebar {
  width: 120px;
  background-color: #f0f0f0;
  padding: 15px;
  border-right: 1px solid #ccc;
}

.main-content {
  flex-grow: 1;
  padding: 15px;
  background-color: #ffffff;
  /* Добавьте стили для расположения карточек */
  input1: flex;
  input2: wrap;
  input3: 10px;
}

.header {
  background-color: #4a90e2;
  color: white;
  padding: 10px 15px;
  /* Убираем нижний отступ у шапки, т.к. gap добавит отступы */
  margin-bottom: 0; 
}

.card {
  background-color: #e9e9e9;
  border: 1px solid #d1d1d1;
  padding: 10px;
  /* Убираем нижний отступ, т.к. gap добавит отступы */
  margin-bottom: 0; 
  /* Зададим базовую ширину, чтобы было что переносить */
  flex-basis: 150px; 
}
HTML
<div class="dashboard-container">
  <aside class="sidebar">
    <p>Навигация</p>
    <ul>
      <li>Меню 1</li>
      <li>Меню 2</li>
    </ul>
  </aside>
  <main class="main-content">
    <header class="header">
      <h1>Дашборд</h1>
    </header>
    <div class="card">Карточка 1</div>
    <div class="card">Карточка 2</div>
    <div class="card">Карточка 3</div>
    <div class="card">Карточка 4</div>
  </main>
</div>
Примените `display: flex;` к контейнеру `.main-content`. Чтобы разрешить перенос элементов на новую строку, используйте свойство `flex-wrap` со значением `wrap`. Для добавления отступов между flex-элементами используйте свойство `gap`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Адаптация для малых экранов (Stacking)

Сделаем дашборд адаптивным. На малых экранах (например, шириной 600px и меньше) боковая панель и основное содержимое должны располагаться не рядом, а друг под другом (вертикально). Используйте медиа-запрос для применения этих изменений.

CSS
.dashboard-container {
  display: flex;
  min-height: 300px;
}

.sidebar {
  width: 120px;
  background-color: #f0f0f0;
  padding: 15px;
  border-right: 1px solid #ccc;
  /* Чтобы сайдбар не сжимался */
  flex-shrink: 0; 
}

.main-content {
  flex-grow: 1;
  padding: 15px;
  background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.header {
  background-color: #4a90e2;
  color: white;
  padding: 10px 15px;
  margin-bottom: 0;
  width: 100%; /* Шапка на всю ширину */
}

.card {
  background-color: #e9e9e9;
  border: 1px solid #d1d1d1;
  padding: 10px;
  margin-bottom: 0;
  flex-basis: 150px;
}

/* Медиа-запрос для малых экранов */
@media (max-width: 600px) {
  .dashboard-container {
    input1: column;
  }
  .sidebar {
    /* Убираем фиксированную ширину и границу справа */
    width: auto;
    border-right: none;
    border-bottom: 1px solid #ccc; /* Добавляем границу снизу */
  }
}
HTML
<div class="dashboard-container">
  <aside class="sidebar">
    <p>Навигация</p>
    <ul>
      <li>Меню 1</li>
      <li>Меню 2</li>
    </ul>
  </aside>
  <main class="main-content">
    <header class="header">
      <h1>Дашборд</h1>
    </header>
    <div class="card">Карточка 1</div>
    <div class="card">Карточка 2</div>
    <div class="card">Карточка 3</div>
    <div class="card">Карточка 4</div>
  </main>
</div>
Используйте правило `@media` с условием `max-width`, чтобы применить стили для экранов меньше указанной ширины. Внутри медиа-запроса измените `flex-direction` для `.dashboard-container` на `column`, чтобы элементы выстроились вертикально.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Скрытие боковой панели на очень малых экранах

Для очень маленьких экранов (например, меньше 400px, что актуально для нашего iframe) часто бывает полезно полностью скрыть боковую панель для экономии места. Добавьте еще один медиа-запрос, чтобы скрыть элемент .sidebar.

CSS
.dashboard-container {
  display: flex;
  min-height: 300px;
}

.sidebar {
  width: 120px;
  background-color: #f0f0f0;
  padding: 15px;
  border-right: 1px solid #ccc;
  flex-shrink: 0;
  /* Плавное скрытие/появление */
  transition: transform 0.3s ease, width 0.3s ease; 
}

.main-content {
  flex-grow: 1;
  padding: 15px;
  background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.header {
  background-color: #4a90e2;
  color: white;
  padding: 10px 15px;
  margin-bottom: 0;
  width: 100%;
}

.card {
  background-color: #e9e9e9;
  border: 1px solid #d1d1d1;
  padding: 10px;
  margin-bottom: 0;
  flex-basis: 150px;
}

/* Медиа-запрос для малых экранов */
@media (max-width: 600px) {
  .dashboard-container {
    flex-direction: column;
  }
  .sidebar {
    width: auto;
    border-right: none;
    border-bottom: 1px solid #ccc;
  }
}

/* Медиа-запрос для очень малых экранов */
@media (max-width: 400px) {
  .sidebar {
    input1: none;
  }
}
HTML
<div class="dashboard-container">
  <aside class="sidebar">
    <p>Навигация</p>
    <ul>
      <li>Меню 1</li>
      <li>Меню 2</li>
    </ul>
  </aside>
  <main class="main-content">
    <header class="header">
      <h1>Дашборд</h1>
    </header>
    <div class="card">Карточка 1</div>
    <div class="card">Карточка 2</div>
    <div class="card">Карточка 3</div>
    <div class="card">Карточка 4</div>
  </main>
</div>
Используйте еще одно правило `@media` с условием `max-width: 400px`. Внутри этого медиа-запроса примените к селектору `.sidebar` свойство `display` со значением `none`, чтобы полностью скрыть элемент.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Использование Grid для основной разметки

В качестве альтернативы Flexbox, попробуйте использовать CSS Grid для создания основной структуры дашборда. Задайте две колонки: одну фиксированной ширины для `.sidebar` и вторую, занимающую оставшееся пространство, для `.main-content`. Также определите одну строку, которая будет занимать всю доступную высоту.

CSS
.dashboard-container {
  input1: grid;
  input2: 120px 1fr; /* Колонка для сайдбара и для контента */
  input3: minmax(300px, auto); /* Строка с минимальной высотой */
  gap: 0; /* Убираем gap, если он был, т.к. стилизуем иначе */
}

.sidebar {
  /* width уже не нужен, управляется grid-template-columns */
  background-color: #f0f0f0;
  padding: 15px;
  border-right: 1px solid #ccc;
}

.main-content {
  /* flex-grow уже не нужен */
  padding: 15px;
  background-color: #ffffff;
  /* Стили для карточек оставляем flex */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.header {
  background-color: #4a90e2;
  color: white;
  padding: 10px 15px;
  margin-bottom: 0;
  width: 100%;
}

.card {
  background-color: #e9e9e9;
  border: 1px solid #d1d1d1;
  padding: 10px;
  margin-bottom: 0;
  flex-basis: 150px;
}

/* Адаптация для Grid */
@media (max-width: 600px) {
  .dashboard-container {
    /* Меняем шаблон колонок на одну */
    grid-template-columns: 1fr;
    /* Добавляем строку для сайдбара */
    grid-template-rows: auto minmax(300px, auto);
  }
  .sidebar {
    border-right: none;
    border-bottom: 1px solid #ccc;
  }
}

@media (max-width: 400px) {
  .sidebar {
    display: none;
  }
  
}
HTML
<div class="dashboard-container">
  <aside class="sidebar">
    <p>Навигация</p>
    <ul>
      <li>Меню 1</li>
      <li>Меню 2</li>
    </ul>
  </aside>
  <main class="main-content">
    <header class="header">
      <h1>Дашборд</h1>
    </header>
    <div class="card">Карточка 1</div>
    <div class="card">Карточка 2</div>
    <div class="card">Карточка 3</div>
    <div class="card">Карточка 4</div>
  </main>
</div>
Для родительского элемента `.dashboard-container` установите `display: grid;`. Используйте свойство `grid-template-columns` для определения колонок (например, `120px 1fr`). Используйте `grid-template-rows` для определения строк (например, `1fr` или `minmax(300px, auto)` для минимальной высоты).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку

Адаптация Grid-макета

Теперь адаптируем Grid-макет для малых экранов (шириной 600px и меньше). Вместо двух колонок должна остаться только одна, а сайдбар и основное содержимое должны располагаться друг под другом. Измените свойства Grid внутри медиа-запроса.

CSS
.dashboard-container {
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: minmax(300px, auto);
}

.sidebar {
  background-color: #f0f0f0;
  padding: 15px;
  border-right: 1px solid #ccc;
}

.main-content {
  padding: 15px;
  background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.header {
  background-color: #4a90e2;
  color: white;
  padding: 10px 15px;
  margin-bottom: 0;
  width: 100%;
}

.card {
  background-color: #e9e9e9;
  border: 1px solid #d1d1d1;
  padding: 10px;
  margin-bottom: 0;
  flex-basis: 150px;
}

/* Адаптация для Grid */
@media (max-width: 600px) {
  .dashboard-container {
    /* Меняем шаблон колонок */
    input1: 1fr;
    /* Меняем шаблон строк */
    input2: auto minmax(300px, auto);
  }
  .sidebar {
    border-right: none;
    border-bottom: 1px solid #ccc;
  }
}

@media (max-width: 400px) {
  .sidebar {
    display: none;
  }
}
HTML
<div class="dashboard-container">
  <aside class="sidebar">
    <p>Навигация</p>
    <ul>
      <li>Меню 1</li>
      <li>Меню 2</li>
    </ul>
  </aside>
  <main class="main-content">
    <header class="header">
      <h1>Дашборд</h1>
    </header>
    <div class="card">Карточка 1</div>
    <div class="card">Карточка 2</div>
    <div class="card">Карточка 3</div>
    <div class="card">Карточка 4</div>
  </main>
</div>
Внутри медиа-запроса `@media (max-width: 600px)` для селектора `.dashboard-container` измените `grid-template-columns`, чтобы определить только одну колонку (например, `1fr`). Также измените `grid-template-rows`, чтобы определить две строки: одну для сайдбара (`auto`) и одну для основного контента (`minmax(300px, auto)` или `1fr`).
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Отметить решенным
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру