Урок 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; означает, что с обоих сторон подвала не должно быть ничего. То есть он у нас занимает всю ширину нижней части контейнера.
Сохраняемся, смотрим результат.
One Commentto Урок 7. Создание Футера сайта
Добавить комментарий
Для отправки комментария вам необходимо авторизоваться.
Большое спасибо за пост, очень много подчеркнул для себя и своего небольшого интернет магазина.