Последнее испытание [23/23]
Чтобы пройти это испытание, примените знания о продвинутых типах элементов, полученные в третьей части курса.
Изменять нужно только свойства, относящиеся к блочной модели, и одно свойство, связанное с отображением рамок таблицы.
block23.html
Курс «Сетки» Пробуем управлять потоком [1/32]
О понятии потока документа рассказывается в курсе про позиционирование.
Поток — это порядок отображения элементов на странице. По умолчанию блочные элементы отображаются как прямоугольные области, идущие друг за другом сверху вниз, а строчные элементы располагаются сверху вниз и слева направо и при необходимости переносятся на новую строку.
Потоком можно управлять и изменять привычное поведение элементов в потоке. Например, можно заставить блочные элементы двигаться не сверху вниз, а выстраиваться в несколько колонок.
А научившись управлять потоком, вы сможете строить сетки.
В первой серии заданий мы продемонстрируем как один и тот же HTML-код можно выстроить в разные потоки. Например, вот так:
Вам нужно просто выполнять указания системы.
block-1-32.html
Курс «Сетки»
Управление потоком, шаг 2 [2/32]
На первом шаге мы с помощью свойства float изменили поведение первого блока.
Обратите внимание, как он стал наезжать на последующие блоки. Это одна из особенностей флоатов, которую мы разберём позже в курсе.
А пока продолжим: сейчас будем изменять поведение второго блока.
block-2-32.html
Управление потоком, шаг 3 [3/32]
Со вторым блоком разобрались. Теперь уже первые два блока наезжают на третий.
Чтобы получить нужный нам поток, осталось задать размеры третьему блоку, отцентровать его и избавиться от эффекта «наезжания».
Поможет нам в этом свойство clear.
block-3-32.html
Создадим другой поток [4/32]
У вас получилось создать первый поток. Теперь попробуем те же самые элементы выстроить по-другому. Вот так:
Просто выполняйте указания системы.
block-4-32.html
Другой поток, шаг 2 [5/32]
А пока вы пошагово создаёте второй поток, поговорим о сетках.
Сетка — это взаимное расположение крупных блоков сайта. Вспомните любой сайт, например, ВКонтакте или HTML Academy.
У ВКонтакте простая сетка, которая состоит из верхней части, или «хедера», под которой располагаются две колонки, а в самом низу расположен «футер» или нижняя часть сайта. Вот так схематично можно представить сетку ВКонтакте:
-------------------------------------
хедер
-------------------------------------
левая колонка | правая колонка
меню | основное содержание
-------------------------------------
футер
-------------------------------------
У HTML Academy на разных страницах используются разные сетки. Например, на главной странице есть двухколончатый хедер, под ним содержание страницы в три колонки, затем нижнее меню и двухколончатый футер.
Как вы понимаете, сетки могут быть самыми разными.
block-5-32.html
Другой поток, шаг 3 [6/32]
Что нужно знать и уметь, чтобы строить сетки? Две вещи:
управлять размерами элементов;
управлять поведением элементов в потоке.
Первая часть детально разбирается в курсе «Блочная модель документа». Там вы учитесь:
задавать размеры;
рамки;
внешние и внутренние отступы;
рассчитывать полный размер элемента;
рассчитывать занимаемую им площадь.
Управлять поведением в потоке мы будем учиться в этом курсе.
block-6-32.html