Макет сайта на CSS
Display и Position показали, как боксы сидят и складываются. Макет сайта задаёт больший вопрос: как регионы страницы — шапка, навигация, основной сюжет, сайдбар, подвал — спокойно делят один экран? Сначала набросайте оболочку; Flexbox и Grid скоро углубят ремесло колонок.
Набор инструментов регионов макета
📊 Регионы страницы одним взглядом
| Регион | Повседневная роль |
|---|---|
| Header | Идентичность сайта, главные действия, иногда поиск |
| Navigation | Ссылки на важные разделы (часто внутри или под шапкой) |
| Main | Основной контент, о котором страница |
| Aside / sidebar | Связанные ссылки, подсказки, вторичные карточки |
| Footer | Юридические заметки, вторичная навигация, следы контакта |
| Container | Обёртка max-width, центрирующая читаемый контент |
Хороший макет начинается с HTML-landmarks, затем отступы и колонки в CSS. Красить каждый бокс через position: absolute редко масштабируется.
Семантическая оболочка страницы
Называйте регионы настоящими элементами. Классы уточняют вид, но landmarks держат структуру честной для читателей и вспомогательных технологий.
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
color: #222;
}
header,
nav,
main,
aside,
footer {
display: block;
}
Центрированный контейнер max-width
Длинные строки утомляют глаза. Оберните читаемую колонку в контейнер с max-width и горизонтальным margin: auto.
.container {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}
Основы полосы шапки
Шапка часто тянется на контейнер или на всю ширину. Держите отступы ровными; глубокий стиль навигации оставьте следующему уроку.
.site-header {
padding: 1rem 0;
border-bottom: 1px solid #e5e5e5;
background: #fff;
}
.site-header .brand {
font-weight: 700;
font-size: 1.25rem;
}
Простой эскиз двух колонок
До уроков Flexbox/Grid спокойный float-эскиз может показать main + aside. Дальше изучайте Flex/Grid для настоящих колонок страницы — это мост, не вечный план.
.layout {
display: flow-root;
}
.layout__main {
float: left;
width: 68%;
}
.layout__aside {
float: right;
width: 28%;
}
Подвал под сюжетом
После float-колонок очистите footer, чтобы он упал под обе колонки. Позже макеты Flex/Grid удержат колонки без привычек clearfix float.
.site-footer {
clear: both;
margin-top: 2rem;
padding: 1.5rem 0;
border-top: 1px solid #eee;
font-size: 0.9rem;
color: #555;
}
Спокойная привычка макета
Сначала landmarks, затем контейнер, потом отступы. Float — только временный эскиз колонок. В следующих модулях беритесь за Flexbox и Grid для устойчивой структуры — не кучи absolute и не вечные float-сетки.
.page {
min-height: 100vh;
}
.page__header { /* identity + nav hook */ }
.page__main { /* primary story */ }
.page__aside { /* secondary column */ }
.page__footer { /* closing chrome */ }
Попробуйте сами
- Соберите оболочку landmarks: header, nav, main, aside, footer.
- Оберните контент в
.containerс max-width и центрированными отступами. - Оформите простую полосу шапки с padding и нижней границей.
- Набросайте main + aside ширинами float, затем очистите footer.
- Напишите предложение: почему Flex/Grid позже заменит этот float-эскиз?
Частые ошибки
- Absolute для каждой колонки страницы
- Текст на всю ширину viewport без max-width
- Пропуск семантических landmarks ради безымянных куч div
- Восприятие урока как object-fit (рамки медиа, не регионы страницы)
- Вечные float-сетки страницы вместо изучения Flex/Grid дальше
Итог
- Макет сайта — о регионах страницы, делящих один экран
- Используйте семантические landmarks и центрированный контейнер max-width
- Float-эскиз main/aside может кратко показать колонки
- Очищайте footer под float; скоро предпочитайте Flex/Grid для структуры
- Layout ≠ object-fit — регионы против подгонки медиа в боксе
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху