На данный момент самый популярный тип верстки — это блочная верстка. При таком подходе вся веб-страница состоит из блоков, а если говорить техническим языком, то из тега DIV. Так же это можно назвать “слоями” так как элементы могут входить друг в друга, тем самым образовывая иерархическую структуру. Тег DIV служит основным строительным элементом который в свою очередь содержит другие элементы страницы такие как текст и изображение. Основными достоинствами блочной верстки является:
- Гибкость настройки элементов
- Краткость кода
- Легкость масштабирования и поддерживания кода
Что бы понять основные принципы построения веб-страницы основывающейся на блочной верстке давайте попробуем потренироваться на практике. У нас есть определенный макет показанный на изображении ниже, он состоит из 4 элементов. Сразу будем учиться использовать HTML5 по этому наша разметка будет состоять из 1) — <header> 2) — <aside> 3) — <div id=”content”> и 4) — <footer>, но надо понимать что данные элементы ни чем не отличаются от обычного тега div и используются только для удобства чтения кода.
В результате у нас получиться такая разметка:
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<header>
<!— Другие элементы —>
</header>
<aside>
<!— Другие элементы —>
</aside>
<div id=«content»>
<!— Другие элементы —>
</div>
<footer>
<!— Другие элементы —>
</footer>
|
Добавив простые css-стили, наши контейнеры примут необходимую форму
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
header
{
width: 400px;
height: 40px;
background: black;
}
aside
{
display: inline-block;
width: 132px;
height: 184px;
background: #ffff00;
}
#content
{
display: inline-block;
width: 230px;
height: 184px;
background: #0000ff;
}
footer
{
width: 400px;
height: 40px;
background: #662d91;
}
|
Свойствами width и height мы задаем высоту и ширину, а background определяет цвет заливки элемента. Наши блоки выстроились на странице друг под другом поскольку все HTML контейнеры по умолчанию имеют свойство position: relative. Подробнее про позиционировании элементов. Обратите внимание на элементы aside и #content, для того что бы выстроить их в одну линию я использую display: inline-block, а не float: left так как этот способ более универсален. Об этом я писал в статье про выравнивание элементов в строку. Для того что бы задать отступы элементов друг от друга воспользуйтесь свойством margin. Я не буду приводить здесь пример — попробуйте сами.
