Создание адаптивного лендинга: Тренажер CSS

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

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

Список тем

Основы Media Queries: изменение фона

Ваша первая задача — использовать медиа-запрос. Необходимо изменить цвет фона блока `.content-block` на светло-серый (`#f0f0f0`), но только если ширина области просмотра не превышает 372 пикселя. Это базовое упражнение на синтаксис медиа-запросов.

CSS

/* Базовые стили блока */
.content-block {
  padding: 20px;
  background-color: #lightblue;
  color: #333;
  border-radius: 5px;
}

/* Медиа-запрос для маленьких экранов */
input1 screen and (input2: 372px) {
  .content-block {
    input3: #f0f0f0;
  }
}

                     /* Базовые стили блока */
.content-block {
  padding: 20px;
  background-color: #lightblue;
  color: #333;
  border-radius: 5px;
}

/* Медиа-запрос для маленьких экранов */
input1 screen and (input2: 372px) {
  .content-block {
    input3: #f0f0f0;
  }
}

HTML

<div class="content-block">
  <h2>Адаптивный блок</h2>
  <p>Этот блок изменит свой фон на маленьких экранах.</p>
</div>

Используйте правило `@media`. Укажите тип устройства (`screen`) и условие для максимальной ширины (`max-width`). Внутри медиа-запроса определите селектор `.content-block` и установите для него свойство `background-color` со значением `#f0f0f0`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Адаптивное изображение

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

CSS

.image-container {
  width: 80%; /* Контейнер меньше ширины iframe для наглядности */
  border: 1px solid #ccc;
  margin: 20px auto;
}

.responsive-image {
  display: block; /* Убираем лишние отступы под изображением */
  input1: 100%;
  input2: auto;
}

                     .image-container {
  width: 80%; /* Контейнер меньше ширины iframe для наглядности */
  border: 1px solid #ccc;
  margin: 20px auto;
}

.responsive-image {
  display: block; /* Убираем лишние отступы под изображением */
  input1: 100%;
  input2: auto;
}

HTML

<div class="image-container">
  <img src="https://naytikurs.ru/img/1.png" alt="Адаптивное изображение" class="responsive-image">
</div>

Чтобы изображение масштабировалось и не выходило за рамки контейнера, используйте свойство `max-width` со значением `100%`. Также рекомендуется установить `height` в `auto` для сохранения пропорций изображения.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Flexbox: колонки на мобильных

Используйте Flexbox для расположения элементов внутри контейнера `.flex-container`. На мобильных устройствах (по умолчанию) элементы должны располагаться друг под другом, в колонку.

CSS

.flex-container {
  padding: 10px;
  border: 1px dashed blue;
  input1: flex;
  input2: column;
}

.flex-item {
  background-color: #e0e0e0;
  padding: 15px;
  margin: 5px;
  text-align: center;
}

                     .flex-container {
  padding: 10px;
  border: 1px dashed blue;
  input1: flex;
  input2: column;
}

.flex-item {
  background-color: #e0e0e0;
  padding: 15px;
  margin: 5px;
  text-align: center;
}

HTML

<div class="flex-container">
  <div class="flex-item">Элемент 1</div>
  <div class="flex-item">Элемент 2</div>
  <div class="flex-item">Элемент 3</div>
</div>

Для создания Flex-контейнера используйте свойство `display` со значением `flex`. Чтобы дочерние элементы выстроились в колонку, примените свойство `flex-direction` со значением `column`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Flexbox: адаптация направления

Продолжаем работать с Flexbox. Теперь задача усложняется: на экранах шире 300px элементы в `.flex-container` должны располагаться в ряд, а не в колонку. Используйте медиа-запрос для изменения направления.

CSS

.flex-container {
  padding: 10px;
  border: 1px dashed blue;
  display: flex;
  flex-direction: column; /* По умолчанию - колонка */
}

.flex-item {
  background-color: #c8e6c9;
  padding: 15px;
  margin: 5px;
  text-align: center;
}

/* Медиа-запрос для экранов шире 300px */
@media screen and (input1: 301px) {
  .flex-container {
    input2: row;
  }
}

                     .flex-container {
  padding: 10px;
  border: 1px dashed blue;
  display: flex;
  flex-direction: column; /* По умолчанию - колонка */
}

.flex-item {
  background-color: #c8e6c9;
  padding: 15px;
  margin: 5px;
  text-align: center;
}

/* Медиа-запрос для экранов шире 300px */
@media screen and (input1: 301px) {
  .flex-container {
    input2: row;
  }
}

HTML

<div class="flex-container">
  <div class="flex-item">Элемент 1</div>
  <div class="flex-item">Элемент 2</div>
  <div class="flex-item">Элемент 3</div>
</div>

Внутри медиа-запроса `@media screen and (min-width: 301px)` измените значение свойства `flex-direction` для селектора `.flex-container` на `row`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Иногда некоторые элементы не нужны на маленьких экранах. Скройте блок с классом `.optional-info` на экранах шириной до 350px включительно. На экранах шире 350px он должен снова появиться.

CSS

.main-content {
  padding: 15px;
  background-color: #fff;
}

.optional-info {
  background-color: #fff9c4;
  border: 1px solid #fbc02d;
  padding: 10px;
  margin-top: 15px;
  input1: none; /* Скрываем по умолчанию */
}

/* Показываем на экранах шире 350px */
@media screen and (min-width: 351px) {
  .optional-info {
    input2: block;
  }
}

                     .main-content {
  padding: 15px;
  background-color: #fff;
}

.optional-info {
  background-color: #fff9c4;
  border: 1px solid #fbc02d;
  padding: 10px;
  margin-top: 15px;
  input1: none; /* Скрываем по умолчанию */
}

/* Показываем на экранах шире 350px */
@media screen and (min-width: 351px) {
  .optional-info {
    input2: block;
  }
}

HTML

<div class="main-content">
  <p>Основной контент страницы. Он виден всегда.</p>
</div>
<div class="optional-info">
  <p>Эта информация видна только на экранах шире 350px.</p>
</div>

По умолчанию задайте для `.optional-info` свойство `display` со значением `none`. Затем, внутри медиа-запроса `@media screen and (min-width: 351px)`, установите для `.optional-info` свойство `display` со значением `block` (или другим подходящим, если это flex/grid элемент, но здесь `block` подойдет).

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Адаптивная сетка (Grid): две колонки

Используйте CSS Grid для создания простой двухколоночной сетки для элементов `.grid-item` внутри `.grid-container`. Колонки должны быть равной ширины. Это должно применяться всегда, так как ширина iframe позволяет разместить две колонки.

CSS

.grid-container {
  border: 1px solid green;
  padding: 10px;
  input1: grid;
  input2: 1fr 1fr; /* Две равные колонки */
  gap: 10px; /* Пространство между ячейками */
}

.grid-item {
  background-color: #b2dfdb;
  padding: 20px;
  text-align: center;
}

                     .grid-container {
  border: 1px solid green;
  padding: 10px;
  input1: grid;
  input2: 1fr 1fr; /* Две равные колонки */
  gap: 10px; /* Пространство между ячейками */
}

.grid-item {
  background-color: #b2dfdb;
  padding: 20px;
  text-align: center;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

Сделайте `.grid-container` грид-контейнером с помощью `display: grid;`. Затем используйте свойство `grid-template-columns` для определения колонок. Значение `1fr 1fr` создаст две колонки равной ширины, занимающие доступное пространство. Можно также использовать `repeat(2, 1fr)`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Адаптация шапки сайта (Flexbox)

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

CSS

.site-header {
  background-color: #f5f5f5;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: flex;
  /* Стили для узких экранов (до 320px) */
  input1: column;
  align-items: flex-start;
}

.logo {
  font-weight: bold;
  font-size: 1.2em;
}

.navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.navigation li {
  margin-left: 10px;
}

/* Стили для экранов шире 320px */
@media screen and (min-width: 321px) {
  .site-header {
    input2: row;
    input3: space-between;
    align-items: center;
  }
  .navigation ul {
      /* Можно добавить стили для горизонтального меню если нужно */
  }
  .navigation li {
      margin-top: 0; /* Убираем верхний отступ на широких экранах */
  }
}

                     .site-header {
  background-color: #f5f5f5;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: flex;
  /* Стили для узких экранов (до 320px) */
  input1: column;
  align-items: flex-start;
}

.logo {
  font-weight: bold;
  font-size: 1.2em;
}

.navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.navigation li {
  margin-left: 10px;
}

/* Стили для экранов шире 320px */
@media screen and (min-width: 321px) {
  .site-header {
    input2: row;
    input3: space-between;
    align-items: center;
  }
  .navigation ul {
      /* Можно добавить стили для горизонтального меню если нужно */
  }
  .navigation li {
      margin-top: 0; /* Убираем верхний отступ на широких экранах */
  }
}

HTML

<header class="site-header">
  <div class="logo">MyLogo</div>
  <nav class="navigation">
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</header>
<main>
  <p>Контент страницы...</p>
</main>

Используйте Flexbox для `.site-header`. По умолчанию (для узких экранов) задайте `flex-direction: column` и `align-items: flex-start`. В медиа-запросе `@media screen and (min-width: 321px)` измените `flex-direction` на `row`, добавьте `justify-content: space-between` для распределения элементов по краям и `align-items: center` для вертикального выравнивания.

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

Результат

Сообщения

Выполнить

Отметить решенным

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