УРОК 6. ГИБКАЯ ВЕРСТКА
В отличие от классической блочной модели гибкая верстка позволяет использовать всю ширину экрана, не ограничиваясь шириной основного блока.
Создадим новую страницу со следующим кодом:
В файле style.css пропишем код который мы использовали ранее:
header, section, footer, aside, nav {
display: block;
}
* {
margin: 0px;
padding: 0рх;
}
а также
body {
font-family:Arial, Helvetica, sans-serif;
width:100%;
display: -moz-box;
display: -webkit-box;
}
Поскольку свойства CSS находятся на стадии разработки, большинство их них необходимо объявлять с использованием специального префикс. Можно использовать свойство display: box, но в определенных версиях браузеров сайт будет отображаться некорректно.
перечислим префиксы для браузеров:
-moz- (Firefox);
-webkit- (Safari и Chrome);
-о- (Opera);
-khtml- (Konqueror);
-ms- (Internet Explorer);
-chrome- (только Google Chrome).
box-orient
Одно из новых свойств расположения блоков имеет название box-orient. Оно определяет вертикальную (vertical) или горизонтальную (horizontal) ориентацию дочерних элементов. Значение по умолчанию равно horizontal, поэтому для <body> его указывать не нужно, но для главного блока main оно необходимо.
#main {
margin: 10px 0px;
display: -moz-box;
display: -webkit-box;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-flex: 1; /*1 означает, что блок гибкий */
-webkit-box-flex: 1;
}
box-flex
Свойство box-flex задает расположение блока по ширине:
значение 1 — гибкий блок,
а значение 0 — фиксированный.
Зададим свойства для других блоков
header {
background: #f3f3f1;
border: 1px solid #999999; /*граница шапки*/
padding: 20px;
}
nav {
background: #0CF;
}
nav li {
display: inline-block; /*расположение пунктов меню в линию и задание элементам li свойства блочности*/
list-style: none;
padding: 10px 20px;
}
section {
margin: 20px;
}
footer {
text-align: center;
padding: 20px;
border-top:2px solid #999; /*верхняя граница футера*/
}
Шаблон создан!
Внутри блока section вставим 3 абзаца текста со страницы
http://cruelten.ru/html5_01/
Заключим абзацы в тэг <p>абзац</p>
Для текста используем тег абзацев <p> со свойством
p {
padding: 5px; /*интервал между абзацами*/
line-height:1.5em; /*межстрочный интервал*/
}
Внутри блока nav добавим тег ссылок <a>
Вместо символа # мы пропишем адреса соответствующих страниц.
Создадим страницы html для пунктов меню Статьи, Видеокурсы, Контакты (article.html, videocurse.html, contacts.html). Для этого скопируем файл index.html (3 копии) и зададим соответсвующие имена страниц: article.html, videocurse.html, contacts.html
Откроем каждый из этих файлов и изменим содержимое блока <section>
Чтобы ссылки в меню были рабочими, оно будет выглядеть следующим образом
Изменим данный код во всех 4-х файлах html