— wrapper (оболочка), в нём располагаются другие блоки.
так называется область в которой расположена шапка сайта.
3.
Слайд 5Теперь, в таблице стилей, задаём этим блокам предварительные параметры. Подключим стили глобальным
способом, в тело тега head, при помощи тега style.
Оболочке wrapper прописываем ширину (высота по мере заполнения увеличивается автоматически), временную рамку, внутренний отступ, и выравнивание по центру страницы.
Для шапки задаём высоту, фоновый цвет, и внешний отступ снизу, для того, чтоб следующие блоки не прижались к нему вплотную.
Для блоков sidebar, content, и footer — высоту, и отступ снизу, зададим пока такие же, как и у “header”, а фоновый цвет дадим, временно, каждому свой, чтоб они друг от друга отличались.
Слайд 7Теперь посмотрим на то, что у нас получилось
Слайд 8Вот такое вышло начало. Все блоки одинаковой высоты расположились друг под другом и
оболочка раздвинулась и заключает их в себе.
Теперь задаём сайдбару полагающуюся ему ширину, примерно в 200 пикселей, и смещаем на привычный правый край, задав внешний отступ слева в 700px, так как общая заданная ширина составляет 900px (900-200=700).
Слайд 9#sidebar{
width: 200px; /* Ширина */
height: 80px; /* Высота временная */
background: #2ff553; /*
Фоновый цвет */
margin-bottom: 10px; /* Отступ снизу */
margin-left: 700px; /* Отступ слева */
}
Слайд 10Сайдбар занял своё место и готов к дальнейшим преобразованиям
И вот теперь пришло
время познакомиться с ещё одним замечательным свойством CSS, которое называется float (наплывание или обтекание).
Прописываем его в селектор sidebar, и происходит следующее: блок сайдбар, как бы приподнимется, и освободит место для других блоков, которые тут же его займут, а сайдбар, как бы наплывёт на них. В значении у float ставим right(справа), так как сайдбар находится справа.
Слайд 11#sidebar{
height: 80px; /* Высота, временная */
width: 200px; /* Ширина */
background: #2ff553; /*
Фоновый цвет */
margin-bottom: 10px; /* Отступ снизу */
margin-left: 700px; /* Отступ слева */
float: right; /* Обтекание справа */
}
Слайд 12Теперь нам осталось укоротить блок content, Так как общая заданная длина у нас
900px, то расчёт делается исходя из этого: 900-200(ширина сайдбара) — 10(ширина зазора между блоками)=690px.
Слайд 13Каркас сайта с одним сайдбаром справа
#content{
height: 80px; /* Высота временная */
width: 690px;
/* Ширина */
background: #9ef7af; /* Фоновый цвет */
margin-bottom: 10px; /* Отступ снизу */
}
Слайд 14Полный код страницы
Каркас сайта
Оболочка
Шапка
Сайдбар
Контент
Подвал
Слайд 16Каркас сайта с одним сайдбаром слева. Найдите три отличия в коде.
/>
Каркас сайта