Это последний урок. В нем нам только предстоит оформить нижнюю часть странички, подправить несколько моментов и работу можно считать законченной. "Подвал" (footer) является, не смотря на расположение, довольно важной частью сайта и страницы в отдельности. Как правило, в этом месте повторяются ссылки на различные страницы сайта. Это делается для удобства. Другой важной информацией, которая размещена там, являются авторские права и контакты организации, которой принадлежит сайт.

Вы часто можете наблюдать ситуацию, когда разделы меню, расположенные слева, дублируются и вверху. Это выглядит довольно глупо. Внизу они смотрятся намного лучше "подвал" принято немного выделять, но не особо, чтобы он не бросался в глаза. Мы сделаем его немного контрастнее, несколько уменьшим высоту.

Нам следует найти в коде следующее место:

</ul> </div> <div class="clearfloat"><div>

Добавим следующий код:

<div id="footer"> <p>Главная | <a href="#">О нас</a> | <a href="#">Наша работа</a> | <a href="#">Наша страна</a> | <a href="#">Звонки</a> | <a href="#">...</a></p> </div>

Добавим нужный код в правила:

#footer {
background: #0066CC;
color: #fff;
font-size: 70%;
padding: 5px;
clear: both;
}
#footer a {
color: #ff0;
}
#footer a:hover {
color: #f00;
}
#footer p {
padding: 2px;
text-align: center;
}
.clearfloat {
clear: both;
}

Этим участком кода мы внесли следующие изменения: фон сделали синего цвета, а текст – белым. Самая нижняя строчка, в которую вписано (clear: both;) определяет, что обе стороны подвала должны быть пустыми. Исходя из этого понятно, что "подвал" будет занимать всю ширину контейнера, которая расположена в нижней части. Мы изменили и цвет ссылок, они желтые в неактивном состоянии, если навести курсор - становятся красными. Текст несколько мельче, через то, что нижняя часть, хоть и весома, не должна бросаться в глаза сразу.

Теперь можно снова сохраниться. При просмотре уже прослеживается четкость и завершенность. Но вид немного подпорчен полностью белым фоном. Для решения проблемы этого однообразия стоит добавить серую рамочку. Это просто. Следует найти вот такой участок кода:

#container {
width: 760px;
margin: 0 auto;
}

Необходимо просто добавить такую строку:

border: 1px solid #999;

И мы увидим:

#container {
width: 760px;
margin: 0 auto;
border: 1px solid #999;
}

Это все, что Вам необходимо знать на начальном этапе, если Вы решили заняться блочной версткой. Успехов Вам!