УРОК 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

Добавить комментарий