Exore LTD » Основы CSS » Урок 17. Свойство float
Лого SiteHere.ru

Октябрь 22, 2019 Запись была обновлена

Время чтения: 3 мин. Прочитать позже

Урок 17. Свойство float

Урок 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 страницу:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="sidebar"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>
</html>

И выделим каждый блок разным цветом в 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
27
28
29
30

#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:

1
2
3
4
5

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

Как это выглядит в браузере:

Уменьшаем размер блока в CSS

2) Делаем обтекание слева для sidebar:

1
2
3
4
5
6

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

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

Применено обтекание слева

3) Устанавливаем ширину блока content и даем ему отступ слева, чуть больше чем ширина блока sidebar и вместе с этим уменьшаем его ширину:

1
2
3
4
5
6

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

Как это выглядит в браузере:

Посмотреть примерСкачать


Вот в два шага мы создали каркас для сайта. Это всего лишь заготовка, но с этого всё начинается. Разберитесь тщательно в данном уроке. На этом всё, пробуйте сами написать и построить свой каркас для сайта.

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

Предыдущий урок
Следующий урок

Еще материалы по этой теме

Спасибо за ваше обращение!

Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)

1 комментарий к записи
  • Leo

    Хороший материал, спасибо!
    Только вот мне почему-то не понадобился шаг 3, где устанавливаем ширину блока content и даем ему отступ слева, — итак этот блок не скрыт получается за sidebar. Для проверки добавил небольшой текст в каждый блок, проверил в Chrome, Firefox и IE.

     
    Ответить

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *