УРОК 5. КЛАССИЧЕСКАЯ БЛОЧНАЯ МОДЕЛЬ
Блочная модель пришла на смену табличной верстке, что значительно уменьшило объем кода и упростило работу с этим кодом.
Пример блочной модели
Используем созданный ранее шаблон, несколько изменив его
Для «обертки» всей страницы используем элемент div с атрибутом id. Таким образом, мы можем задавать общую ширину страницы, отступы, шрифт и т.д.
Задав значения (main, navi …) каждому блоку или элементу с помощью атрибутов id и class, мы можем легко регулировать любые параметры в блоках.
Далее работаем с файлом style.css!
Универсальный селектор *
Селектор * задает общее правило для всего сайта.
Зададим нулевые отступы для всех блоков сайта
* {
margin: 0px;
padding: 0рх;
}
Не все браузеры понимают новые элементы как блочные, поэтому зададим следующее правило
header, section, footer, aside, nav, article, figure, figcaption, hgroup {
display: block; }
Главный блок main
Главный блок нашего сайта мы назвали main. Пропишем правила для данного блока.
#main {
width: 1024px;
margin: 10px auto;
text-align: left;
background-color:#c4c4c4;
}
width — ширина блока
margin – отступы от верхнего, правого, нижнего и левого края. Если задать 2 значения, то первая цифра укажет отступы от верхнего и нижнего края (у нас 10px), вторая – от правого и левого края. Параметр auto означает автоматическое вырывание. Т.к. разрешение экрана может быть разное, то при использовании параметра auto сайт на всех мониторах будет выравнен по центру.
Шапка header
Поскольку ширина основного блока main 1024px, то задавать ширину шапки и другим блокам нет необходимости. Она будет составлять 100% от родительского элемента.
#main_header {
background: #F09;
border: 1px solid #999999;
padding:20px;
height:50px;
}
background – фон с цветом #F09
border – рамка шириной 1pxи цветом #999999
padding – отступы от текста до границ шапки
height – высота блока
Навигационное меню
Блок меню с id navi располагает под шапкой и располагается по всей ширине страницы (в границах родительского элемента main)
#navi {
background: #0CF;
padding:5px 15px;
}
background – фон с цветов #0CF
padding – верхний и нижний отступ от текста до границ блока 5px, отступы справа и слева 15px
Поскольку в коде меню используется тег списка <li>, то для оформления меню сначала указывается название блока меню navi, а затем тег li.
#navi li {
display: inline-block;
list-style: none;
padding: 10px 20px;
}
display: inline-block – расположение пунктов меню в линию, т.к. по умолчанию они располагаются в столбик
list-style: none – убираем кружки у пунктов меню
padding – отступы текста
Основное содержимое сайта и боковая панель
Блоки content и aside располагают рядом и не во всю ширину основного блока main.
Чтобы прикрепить блоки к краю доступного пространства используют свойство float.
#content {
float: left;
width: 800px;
margin: 20px 0px;
}
#aside {
float: left;
width: 184px;
margin: 20px 0px;
padding: 20px;
background: #FCF;
}
Логика: блок content прикрепляется к левому краю блока main, блок aside к левому краю блока content
Создадим правило для статей (новостей) на странице
article {
background: #CCDBF2;
border: 1px solid #999999;
padding: 20px;
margin-bottom: 15px;
}
а также параметры картинок
articleimg {
height:100px;
}
Подвал footer
Блок располагается по всей ширине созданной страницы. Для того, чтобы блок не прикреплялся к краю предыдущего блока используем свойство clear.
#footer {
clear: both;
text-align: center;
padding: 20px;
border-top:2px solid #999;
}