Блочная верстка или тег div
На данный момент самый популярный тип верстки — это блочная верстка. При таком подходе вся веб-страница состоит из блоков, а если говорить техническим языком, то из тега 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. Я не буду приводить здесь пример — попробуйте сами.
Проверка
=> main — заменить
Что?
Не стоит в качестве селектора для основного контейнера использовать id.
Лучше использовать классы.
Посмотрите здесь:
http://hellohtml.ru/articles/html-css/verstka-blokami-div-s-samogo-nachala/
Hello, please give me see subject advert object and example advert banner.