Элементы и техники макета HTML
Сайты часто отображают содержимое в нескольких колонках, как журнал или газета.
Элементы макета HTML
В HTML есть несколько семантических элементов, обозначающих части страницы: <header> (заголовок документа или раздела), <nav> (набор навигационных ссылок), <section> (раздел), <article> (независимый, самодостаточный контент), <aside> (боковое содержимое, например боковая панель), <footer> (подвал), <details> (дополнительные детали, которые пользователь может открыть и закрыть), и <summary> (заголовок для <details>). Подробнее можно прочитать в главе о семантике HTML.
Техники макета HTML
Есть четыре распространённых способа создания многоколоночных макетов, у каждого свои плюсы и минусы: CSS-фреймворки, CSS-свойство float, CSS flexbox и CSS grid.
CSS-фреймворки
Чтобы быстро создать макет, можно использовать CSS-фреймворк, например Bootstrap.
Макет CSS с Float
Можно создавать целые макеты с помощью CSS-свойства float. Float легко изучить; нужно лишь понять, как работают float и clear. Недостаток: элементы с обтеканием привязаны к потоку документа, что может снижать гибкость.
Пример
Многоколоночный макет, созданный с помощью float.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.nav {
float: left;
width: 30%;
background: #ccc;
padding: 20px;
}
.main {
float: left;
width: 70%;
padding: 20px;
}
.footer {
clear: both;
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Города</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">Лондон</a></li>
<li><a href="#">Париж</a></li>
<li><a href="#">Токио</a></li>
</ul>
</div>
<div class="main">
<h1>Лондон</h1>
<p>Лондон — столица Англии. Это самый населённый город Соединённого Королевства, с агломерацией более 13 миллионов жителей.</p>
<p>Расположенный на реке Темзе, Лондон был крупным поселением на протяжении двух тысячелетий, его история восходит к основанию римлянами, которые назвали его Лондиниум.</p>
</div>
<div class="footer">
<p>Подвал</p>
</div>
</body>
</html>
Макет CSS с Flexbox
Flexbox заставляет элементы вести себя предсказуемо, когда макет должен подстраиваться под разные размеры экрана и устройства.
Пример
Тот же макет, созданный с помощью flexbox.
Вывод: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
background-color: #f1f1f1;
padding: 20px;
text-align: center;
}
.row {
display: flex;
}
.nav {
flex: 30%;
background: #ccc;
padding: 20px;
}
.main {
flex: 70%;
padding: 20px;
}
.footer {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">
<h1>Города</h1>
</div>
<div class="row">
<div class="nav">
<ul>
<li><a href="#">Лондон</a></li>
<li><a href="#">Париж</a></li>
<li><a href="#">Токио</a></li>
</ul>
</div>
<div class="main">
<h1>Лондон</h1>
<p>Лондон — столица Англии. Это самый населённый город Соединённого Королевства, с агломерацией более 13 миллионов жителей.</p>
<p>Расположенный на реке Темзе, Лондон был крупным поселением на протяжении двух тысячелетий, его история восходит к основанию римлянами, которые назвали его Лондиниум.</p>
</div>
</div>
<div class="footer">
<p>Подвал</p>
</div>
</body>
</html>
Макет CSS с Grid
Модуль компоновки CSS Grid предоставляет систему на основе сетки из строк и столбцов, упрощая проектирование страниц без float или позиционирования. Подробнее можно узнать в главе о CSS Grid.