HTML + CSS — готовые макеты

НЕ ОБЯЗАТЕЛЬНО ДЛЯ НОВИЧКОВ

Приветствую! Здесь вы наверняка найдете, что ищете. Примеры в лаборатории рассчитаны на то, что мы разбираем что-то конкретное.

Текущая статья посвящена макетам на HTML и CSS — Flexbox, Grid, адаптив, типовые блоки страницы.

Поэтому за теорией по текущей теме вам — в энциклопедию. Если ещё не погружались, то маршрут прост:

  1. Основы
  2. Система и сеть
  3. Данные и разметка
  4. Код и разработка
  5. Языки
  6. Искусственный интеллект
  7. Проект
  8. Инфраструктура и безопасность
  9. Спин-офф

Обязательно пройдитесь.

А теперь приступим к нашему предмету.

Теория и соседние материалы

HTML

Flexbox и CSS Grid

Практические рекомендации по CSS

HTML — о разделе

CSS — о разделе

Шаблоны

CSS-анимации — готовые эффекты.

Основы вёрстки

С чего начать

Теория — в HTML и CSS.

Подробно про Flexbox и Grid — отдельная глава.

Шпаргалка «что использовать / чего избегать» — Практические рекомендации по CSS.

Вставьте любой пример из статьи в редактор выше — предпросмотр обновится через пару секунд. Так быстрее, чем каждый раз сохранять файл на диск. Для отдельных вкладок HTML, CSS и JavaScript — полноценный WebEditor.

Мини-симулятор показывает, как Flex и Grid по-разному раскладывают четыре блока. Перед сложными макетами полезно покрутить justify-content и align-items.

Базовые термины

Термин Простыми словами
HTML Разметка: заголовки, абзацы, кнопки, формы — «скелет» страницы
CSS Стили: цвета, отступы, сетка, расположение блоков
Макет (layout) Как блоки стоят относительно друг друга и экрана
Flexbox Раскладка в одну линию (ряд или столбец) с выравниванием
CSS Grid Раскладка в таблицу из строк и колонок сразу
Адаптив Страница подстраивается под ширину телефона и монитора
Медиазапрос @media Другие стили, когда экран уже или шире порога
rem Единица от размера шрифта корня; удобна для отступов
viewport Видимая область браузера; без meta-тега на телефоне страница «мелкая»

Порядок действий

  1. Скопируйте весь блок кода (от <!DOCTYPE html> до </html>).
  2. Вставьте в файл макет.html (или index.html).
  3. Откройте двойным щелчком или перетащите в Chrome / Edge / Firefox.
  4. Меняйте текст, цвета, числа в padding — смотрите, что изменилось.
  5. Если сломали — верните исходник из статьи и меняйте по одному свойству.
Flex или Grid
Flexbox — меню в ряд, кнопки в форме, колонка «шапка — контент — подвал», выравнивание по центру.
Grid — каркас страницы (шапка, сайдбар, контент), сетка карточек одинаковой ширины, bento-блоки разного размера.

В реальных сайтах их комбинируют: Grid для страницы, Flex внутри карточки.

Обязательный каркас каждой страницы

Любой пример ниже можно собрать на этом фундаменте.

Разбор по строкам.

Фрагмент Смысл
<!DOCTYPE html> Сообщает браузеру режим HTML5 (страница рисуется предсказуемо)
lang="ru" Язык страницы: озвучка скринридеров, переносы слов
<meta charset="UTF-8"> Кириллица и emoji отображаются правильно
viewport + width=device-width На телефоне ширина макета = ширина экрана, без «уменьшенного десктопа»
<style>…</style> CSS в том же файле; для учёбы удобно, в проекте стили часто в .css
box-sizing: border-box padding и border входят в заявленную ширину блока — сетка не «плывёт»
body &#123; margin: 0 &#125; Убирает белую полоску по умолчанию у краёв окна
img &#123; max-width: 100% &#125; Картинка не вылезает за экран на узком телефоне

Типичные ошибки.

  • Забыли viewport — на мобильном всё мелкое, нужен зум пальцами.
  • Стили в <body> через атрибут style="" на каждом теге — править макет трудно.
  • Нет box-sizing: border-box — блоки с width: 50% в два столбца не помещаются в ряд.

Вынести CSS в файл (как в «взрослых» проектах):

<link rel="stylesheet" href="style.css">

Файл style.css лежит в той же папке, что и HTML.

Стартовые макеты

Простые задачи, которые чаще всего ищут в интернете.

Центрированная карточка

Задача. Окно входа, сообщение «скоро откроемся», одна карточка по центру экрана.

Разбор CSS.

Свойство Зачем здесь
min-height: 100dvh Высота не меньше окна; dvh учитывает панель адреса на телефоне
display: grid на body Включает сетку из одной «ячейки» на весь экран
place-items: center Сокращение: центр по горизонтали и вертикали сразу
padding: 1rem на body На узком экране карточка не прилипает к краям
width: min(100%, 22rem) На телефоне — вся ширина минус отступы; на ПК — не шире ~352px
border-radius, box-shadow Скругление и лёгкая тень — визуально «карточка», а не просто белый прямоугольник
button &#123; width: 100% &#125; Кнопка на всю ширину карточки — привычный паттерн для форм

HTML. Тег <article> семантически означает самостоятельный блок контента (для курсовой и доступности лучше, чем голый <div>).

Типичные ошибки.

  • Центрируют через position: absolute; top: 50%; left: 50% без знания transform — на разной высоте контента блок съезжает.
  • Задают height: 100vh на мобильном — под карточкой появляется лишняя прокрутка из‑за адресной строки.

Попробуйте сами. Поменяйте place-items: center на start — карточка прижмётся к верху. Уберите box-shadow — плоский плоский дизайн.

Шапка и подвал — контент между ними (Flexbox)

Задача. Подвал всегда внизу окна, даже если текста в main мало («липкий footer»).

Разбор.

Блок Идея
body + flex + column Три зоны друг под другом: шапка, середина, подвал
main &#123; flex: 1 &#125; Средняя часть забирает всё свободное место, выталкивая footer вниз
max-width + margin: 0 auto на main Текст не растягивается на весь 4K-монитор — удобно читать
nav &#123; display: flex; gap: 1rem &#125; Ссылки в ряд с равномерным зазором без отступов на каждой ссылке
flex-wrap: wrap На узком экране пункты меню переносятся на следующую строку

Типичные ошибки.

  • Пытаются прижать подвал через position: fixed — он перекрывает текст при прокрутке.
  • Нет min-height: 100dvh на body — при длинном контенте разницы нет, при коротком подвал «всплывает» вверх.

Попробуйте сами. Добавьте в main десять абзацев — подвал уйдёт за нижний край и появится прокрутка (это нормально).

Адаптивная сетка карточек

Задача. Каталог товаров, галерея проектов, карточки новостей — сами перестраиваются в 1–2–3–4 колонки.

Разбор ключевой строки.

grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  • minmax(14rem, 1fr) — колонка не уже 14rem, но может растянуться (1fr).
  • auto-fit — браузер сам считает, сколько колонок влезает в ряд.
  • gap: 1rem — расстояние между карточками без margin на каждой.

Типичные ошибки.

  • Фиксируют grid-template-columns: repeat(4, 1fr) — на телефоне четыре узких полоски.
  • Делают отступы только через margin-right — у последней карточки в ряду отступ лишний; gap проще.

Попробуйте сами. Замените 14rem на 10rem — колонок станет больше. Добавьте пятую карточку в HTML — сетка пересчитается сама.

Две колонки — текст и картинка

Задача. Блок «о нас», лендинг, статья с иллюстрацией: на телефоне столбик, на планшете — две колонки.

Разбор.

Элемент Смысл
Без медиазапроса Одна колонка — mobile-first (сначала стили для телефона)
@media (min-width: 40rem) От ~640px включаются две равные колонки 1fr 1fr
align-items: center Текст и «картинка» по вертикали по центру друг относительно друга
aspect-ratio: 4 / 3 Прямоугольник держит пропорции, пока нет настоящего <img>
aria-hidden="true" на декоративном блоке Скринридер не озвучивает пустой градиент

Типичные ошибки.

  • Пишут max-width в медиазапросе для «десктопа» в новом проекте — путаница; для учёбы проще min-width от мобильной базы.
  • Ставят две колонки без медиазапроса — на телефоне текст и картинка слишком узкие.

Форма входа по центру

Задача. Страница логина, регистрации, восстановления пароля.

Разбор.

Приём Зачем
flex + align-items + justify-content на body Центрирование формы (альтернатива grid + place-items)
flex-direction: column + gap на form Поля друг под другом с одинаковыми промежутками
input внутри label Клик по тексту «Email» фокусирует поле — удобнее на телефоне
type="email", required, minlength Базовая проверка в браузере без JavaScript
width: 100% у input Поле на всю ширину формы при box-sizing: border-box

Типичные ошибки.

  • Забывают type="submit" у кнопки — Enter в поле может не отправить форму.
  • Нет name у полей — если позже подключите сервер (PHP и т.д.), данные не придут.

Попробуйте сами. Уберите required и отправьте пустую форму — браузер покажет подсказки (если не отключена валидация).

Готовые макеты страниц

Составные шаблоны для сайта, лендинга и панели администратора.

1. Каркас сайта на CSS Grid

1.1. Шапка, боковое меню, контент, подвал

Задача. Типичный учебный «сайт-визитка» или админка с меню слева.

Разбор grid-template-areas.

"header header"   ← шапка на всю ширину (2 колонки)
"nav    main"     ← слева меню 12rem, справа контент
"footer footer"   ← подвал на всю ширину

Каждый дочерний блок с grid-area: header (и т.д.) попадает в «клетку» схемы. Менять макет можно, переставив буквы в кавычках — без перестановки HTML.

На мобильном (max-width: 48rem) Что происходит
Одна колонка Области идут столбиком: шапка → меню → текст → подвал
nav &#123; display: flex &#125; Пункты меню в ряд, а не столбиком слева

Типичные ошибки.

  • Опечатка в имени области ("heder" вместо "header") — блок исчезает из сетки.
  • Разное количество столбцов в строках areas — правило CSS не применится.

2. Лендинг и навигация

2.1. Герой-блок и три преимущества

Задача. Одностраничный промо-сайт: меню, большой заголовок, кнопка, карточки ниже.

Разбор.

Приём Смысл
.wrap Ограничитель ширины контента по центру (max-width + margin: 0 auto)
justify-content: space-between в шапке Логотип слева, ссылки справа
clamp(1.75rem, 4vw, 2.75rem) Шрифт заголовка от 28px до 44px в зависимости от окна
border-radius: 999px на .cta «Таблетка» — типичная форма кнопки призыва
Повтор auto-fit + minmax в .features Та же адаптивная сетка, что у каталога карточек

2.2. Липкая шапка при прокрутке

Задача. Меню остаётся сверху, пока читаете длинную статью.

Разбор.

Свойство Смысл
position: sticky Элемент ведёт себя как обычный, пока не «прилипнет» к top: 0 при скролле
z-index: 10 Шапка рисуется поверх текста, а не под ним
rgba(255,255,255,0.92) Полупрозрачный фон — лёгкий эффект стекла
backdrop-filter: blur(8px) Размытие контента под шапкой (в старых браузерах просто непрозрачный фон)

Отличие от fixed. fixed вырывает шапку из потока — нужен padding-top у main. sticky проще для учебных статей.

3. Дашборд и bento-сетка

3.1. Боковая панель + плитки метрик

Задача. Макет «админки»: меню слева, сверху заголовок раздела, ниже виджеты.

Разбор.

  • Grid на body — две большие зоны: сайдбар и рабочая область.
  • Flex на .workspace — внутри правой части бар сверху, плитки заполняют остаток (flex: 1 у .tiles).
  • min-width: 0 — flex-ребёнок может сжиматься; без этого иногда появляется горизонтальная прокрутка.
  • Вложенный Grid в .tiles — снова auto-fit для карточек метрик.

3.2. Bento — плитки разного размера

Задача. Современная сетка «как у Apple / Notion»: одни ячейки шире или выше других.

Разбор.

Класс Эффект
grid-auto-rows: 5rem Высота одной «ступеньки» сетки — 80px
grid-column: span 2 Блок занимает 2 колонки
grid-row: span 2 Блок занимает 2 ряда
.big И ширина, и высота удвоены — крупная плитка

4. Статья и тарифы

4.1. Текст и боковая колонка

Задача. Блог, документация: основной текст + метаданные справа.

Разбор.

Приём Смысл
65ch Ширина текста в символах — глаза меньше устают, чем на всю ширину монитора
minmax(0, 1fr) Колонка с текстом может сжиматься; длинные слова не ломают сетку
Порядок в HTML: article, потом aside На мобильном сначала главное, метаданные ниже — хорошо для чтения и SEO
border-top у aside Визуально отделяет боковую колонку без лишней рамки вокруг всего

4.2. Три тарифа в ряд

Задача. Страница цен: карточки «Базовый / Про / Команда», средний выделен.

Разбор.

CSS Зачем
flex-direction: column на .plan Элементы карточки в столбик
flex: 1 на ul Список растягивается, кнопки на одной линии внизу у всех тарифов
.featured Выделение среднего тарифа — типичный приём на лендингах
transform: scale(1.02) Чуть крупнее соседей; на очень узком экране можно убрать, если мешает

5. Подвал с колонками ссылок

Задача. Внизу сайта группы ссылок (продукт, компания, правовое) и строка копирайта.

Разбор. main &#123; flex: 1 &#125; прижимает footer к низу окна. Внутри подвала снова auto-fit — колонки сами перестраиваются. Ссылки display: block — удобная зона нажатия на телефоне.

Типичная ошибка. Забыли flex: 1 у main — на короткой странице подвал оказывается посередине, а не внизу.

6. Адаптив и тёмная тема

6.1. Mobile-first — меню сверху, на ПК слева

Разбор. Сначала стили для узкого экрана, в @media (min-width: 48rem) — расширение. Так проще сопровождать, чем верстать только «десктоп» и ужимать через max-width. 48rem ≈ 768px при стандартном размере шрифта.

6.2. Светлая и тёмная тема через переменные

Разбор. Переменные --имя объявляют в :root (доступны везде). var(--bg) подставляет значение. Браузер сам выбирает тёмный блок, если в ОС включена тёмная тема.

Попробуйте сами. DevTools (F12) → «Rendering» → prefers-color-scheme — переключите light/dark.

7. Чистая база для своего проекта

Строка Зачем
-webkit-text-size-adjust: 100% iOS не раздувает мелкий шрифт в landscape
font: inherit на полях ввода Кнопки и input совпадают с шрифтом страницы
min(100% - 2rem, 64rem) Контейнер с отступами от краёв, но не шире 1024px
margin-inline: auto Центрирование (логичное свойство «слева–справа»)

Частые вопросы

Как центрировать div по центру страницы?
Самый короткий способ — body &#123; display: grid; min-height: 100dvh; place-items: center; &#125; или flex с align-items и justify-content (см. карточку и форму выше).

Почему два блока по 50% не влезают в ряд?
Часто из‑за box-sizing: content-box и padding. Добавьте глобально box-sizing: border-box или используйте gap во Grid/Flex вместо width: 50% + margin.

Flexbox или Grid для всего сайта?
Grid для «каркаса» (шапка, колонки, подвал), Flex для строк меню, кнопок в форме, выравнивания внутри карточки.

Нужен ли Bootstrap?
Для обучения и малых работ хватит чистого CSS из этой статьи. Фреймворки ускоряют большие проекты, но скрывают основы.

Как посмотреть макет на телефоне?
Откройте DevTools (F12) → режим устройства, или залейте файл на хостинг / откройте через «Поделиться» в локальной сети.

Что изучить дальше

Тема Куда перейти
Теги, формы, ссылки HTML
Flex и Grid подробно Flexbox и CSS Grid
Медиазапросы, clamp, viewport Адаптивность
Мини-шаблоны git, README Шаблоны
Рисование в Python (другой формат «примеров») Рисование в браузере (JavaScript)
Окна, формы, кнопки на Python Tkinter — окна и виджеты
Интерактив в браузере JavaScript — о разделе
Для отчёта и портфолио

В описании работы укажите, какой приём использовали: «адаптивная сетка на CSS Grid с auto-fit», «липкий header на position: sticky». Одно точное название свойства показывает, что вы понимаете код, а не только скопировали шаблон.