Урок 7. Создание Футера сайта

Подвал, или «футер» — это важная часть сайта, где обычно дублируются ссылки на разделы сайта, пишутся копирайты и контактная информация.

<li><a href= «#»>Рейтинги</a></li>
<li><a href= «#»>Статьи</a></li>
<li><a href= «#»>Аналитика</a></li>
<li><a href= «#» >Электронные услуги</a></li>
</ul>

Запишем после текстовых блоков следующий код:

<div ></div>

<div id= «footer» >

<p>Главная | <a href= «#»> Рейтинги </a> | <a href= «#»> Статьи </a> | <a href= «#»>Аналитика</a> | <a href= «#» >Электронные услуги</a> | </p>
<p>Copyright © 2012. Сайт об электронном правительстве </p>
</div>

Верстка страницы закончена, проверьте только, чтобы в конце кода у вас было два </div>

Определим правила для футера:

#footer {
background: #665;
color: #fff;
font-size: 70%;
padding: 5px; clear : both;
}

Мы задали фон серо-зелёного цвета, цвет текста — белый.

#footer a {
color: #ff0;
}

#footer a:hover {
color: #f00;
}

Ссылки в футере ярко-жёлтые, а в активном состоянии — красные. Для текста мы выбрали размер мельче всех на странице — 70%, для того, чтобы он не бросался в глаза.

#footer p {
padding: 2px;
text-align: center;
}

.clearfloat {

clear: both;
}

Правило clear:both; означает, что с обоих сторон подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера.

Сохраняемся, смотрим результат.