Урок 17. Якість float

Здрастуй, шановний читачу.

Це сімнадцятий урок вивчення CSS. У цьому уроці, як я і обіцяв, каркас сайту на основі властивості float.

Перед вивченням даного уроку пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори
Урок 3. Групові селектори і селектори нащадків
Урок 4. Псевдоселектори посилань
Урок 5. Шрифти
Урок 6. Оформлення тексту
Урок 7. Рамки
Урок 8. Оформлення списків
Урок 9. Спадкування
Урок 10. Блокова модель
Урок 11. Висота і ширина блоку
Урок 12. Конфлікти полів
Урок 13. Робота з зображеннями. Частина 1
Урок 13. Робота з зображеннями. Частина 2
Урок 14. Таблиці
Урок 15. Форми
Урок 16. Властивість float

Теорія та практика

Приступимо до створення каркаса для сайту. Спершу нам необхідно обговорити яким чином буде відбуватися побудова каркасу і що буде в нього входити. Я пропоную створити його з шапки (header), лівого блоку з меню (sidebar), центральної частини (content) і підвалом (footer).

Крок 1. Створення необхідних блоків

Першим кроком необхідно створити потрібні нам блоки і виділити їх різними кольорами, щоб ми могли відрізняти блоки. Створюємо наступну html сторінку:

123456789101112131415

lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;div id="Wrapper"gt;lt;div id="Header"gt; lt;/divgt;lt;div id="Sidebar"gt; lt;/divgt;lt;div id="Content"gt; lt;/divgt;lt;div id="Footer"gt; lt;/divgt;lt;/divgt;lt;/bodygt;lt;/htmlgt;

І виділимо кожен блок різним кольором в CSS:

Відео: Курс CSS - Урок №30. Властивість FLOAT. Вступ

123456789101112131415161718192021222324252627282930

#wrapper{width:550px-height:100%-margin:0 auto-outline:1px solid #cccccc-}#header{width:550px-height:100px-background-color:# C40000- / * Червоний фон * /}#sidebar{width:550px-height:100px-background-color:# 2000C4- / * Синій фон * /}#content{width:550px-height:100px-background-color:# 01A006- /* зелений фон*/}#footer{width:550px-height:100px-background-color:# ED9600- / * Помаранчевий фон * /}

Ми взяли все блоки ще в один блок wrapper. Це тому щоб потім ми могли управляти всіма блоками відразу (наприклад по центру все розташувати).

Подивитися прімерСкачать

Крок 2. Зменшення блоків і обтікання

Зменшуємо другий блок sidebar, робимо обтікання зліва та відступ зліва у блоку content. А зараз кожен міні-етап докладно.

1) Зменшуємо блок sidebar:

12345

#sidebar{width:150px- / * Зменшуємо розмір до 150 пікселів * /height:100px-background-color:# 2000C4- / * Синій фон * /}

Як це виглядає в браузері:

2) Робимо обтікання зліва для sidebar:

123456

#sidebar{width:150px- / * Зменшуємо розмір до 150 пікселів * /height:100px-background-color:# 2000C4- / * Синій фон * /float:left- / * Обтікання зліва * /}

Для того щоб ви розуміли, що блок content(А піднявся він бо ми розташували його за блоком sidebar) Всього лише піднявся, подивіться на зображення нижче:

3) Встановлюємо ширину блоку content і даємо йому відступ зліва, трохи більше ніж ширина блоку sidebar і разом з цим зменшуємо його ширину:

123456

#content{width:395px- / * Зменшуємо ширину блоку * /height:100px-background-color:# 01A006- /* зелений фон*/margin-left:155px- / * Відступ зліва, щоб "вийти" з під блоку sidebar * /}

Відео: CSS для початківців

Як це виглядає в браузері:

Відео: Уроки CSS - Урок 5 - Властивості float, clear. Бестаблічная верстка

Подивитися прімерСкачать

Ось в два кроки ми створили каркас для сайту. Це всього лише заготовка, але з цього все починається. Розберіться ретельно в даному уроці. На цьому все, пробуйте самі написати і побудувати свій каркас для сайту.

Більше практикуйтеся!