Файл: Лабораторная работа 2. Блочная верстка с использованием css.pdf

Основная часть

Лабораторные работы CSS3.
Web-legko.ru
height: 400px;
}
#content {
background: gray;
float: left;
width: 90%;
}
#clear {
clear:both;
}
footer {
background: #ff0404;
color: white;
height: 80px;
width: 100%;
}

Проверим результат в браузере
После применения стилей видно что наш сайт уже стал приобретать вид того что нам нужно. Теперь разберем код стилей.
Итак, начнем по порядку с тега

нам необходимо задать ему ширину в 100% от окна, это делается с помощьюсвойстваwidth:100%, и задаем высоту в 100 пикселей с помощью свойстваheight:100px. И соответственно используя свойствоbackground: yellow. Шапка готова. Значения ширины и высоты могут принимать значения в пикселях и в процентах. Что использовать зависит от конкретных ситуаций. Переходим дальше. Следующим элементом у нас является меню навигации. При стилизации блока меню используются те же самые свойства что и при стилизации шапки. Плюс мы добавили свойсто color: white, оно позволяет указать цвет текста. В качестве значений для свойств задающих цвета могут выступать названия цветов (например, red. Green, black), так и шестнадцатиричные значения цветов (например, #ff00ff, #000000 и т.д.).

Лабораторные работы CSS3.
Web-legko.ru
Следующим блоком у нас является сайдбар созданный с помощью тега к нему применяем свойства ширины, выстоты, цвет заливки и добавляется свойство float:left, оно позволяет задать позиционирование блока по левому краю. При задании размеров блоков нужно правильно рассчитывать ширину блоков, которые находятся рядом. Вся ширина экрана это 100%, то есть для того чтобы нам разместить два блока рядом необходимо одному блоку задать ширину Х второму задать ширину Y, но главное следует всегда просчитывать чтобы сумма значений X и Y всегда равнялась 100%. В противном случае может появиться пустое пространство, либо блоки не будут умещаться и будут не структурированы, то есть какой либо из блоков может переместиться ниже или выше другого, либо наложиться сверху.
Следующий блок это основная часть страницы, его мы создали с помощью тега

и присвоили ему идентификатор #content . данному идентификатору мы создали стили заливки фона (background), ширину (width), высоту (height), и обтекаемость (float).
Последним блоком является подвал, который мы создали с помощью тега . Стили для данного блока практически идентичны стилям которые мы использовали при стилизации шапки страницы.
Это небольшой пример того как можно сверстать веб-страницу с помощью блоков и стилей CSS.
Большие и качественные проекты безусловно требуют гораздо более сложного кода и структуры тегов. Но всегда нужно с чего то начинать и данная работа поможет вам в этом.
Практическое задание для выполнения.
Вам необходимо сверстать предложенный макет страницы используя HTML5 и CSS. Стили необходимо присоединить с помощью внешнего файла style.css. Его необходимо разместить в той же папке что и ваш HTMl файл.
Шапка сайта
Подвал 1
Л
е вы й са д
б а
р
П
а рв ы
й с
а д
ба р
Подвал 2