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

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

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

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

Список тем

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

id: 37541_css-adaptive-dashboard-1

Создайте базовую двухколоночную структуру для дашборда. Используя 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)

id: 37541_css-adaptive-dashboard-2

Теперь настроим расположение карточек (.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)

id: 37541_css-adaptive-dashboard-3

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

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

id: 37541_css-adaptive-dashboard-4

Для очень маленьких экранов (например, меньше 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 для основной разметки

id: 37541_css-adaptive-dashboard-5

В качестве альтернативы 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-макета

id: 37541_css-adaptive-dashboard-6

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