Часть I. Статья №6. Верстка подвала – блока футтер

Часть I. Верстка шаблона сайта на основе макета фотошопа.

Статья №6. Верстка подвала – блока футтер.

Блок футер будет по стилистики близок к макету. Подвал сайта будет состоять из двух частей: список ссылок и блок копирайта.

Ссылки оформим в том же стиле, что и главное навигационное меню.

	<footer>
		<div class="footer">
			<nav>
				<ul>
					<li></li>
				</ul>
				<ul>
					<div></div>
				</ul>
			</nav>
		</div>
	</footer>

Простая конструкция.

Начнем её заполнять по смыслу.

Пропишем всем классы и добавим ссылки, а также блок копирайт. Вот что в итоге.

<ul class="footer-nav-ul-left">
					<li class="footer-nav-ul-left-li"><a class="footer-nav-ul-left-li-a" href="#" title="RSS-лента">RSS-лента</a></li>
					<li class="footer-nav-ul-left-li"><a class="footer-nav-ul-left-li-a" href="#" title="Контакты">Контакты</a></li>
					<li class="footer-nav-ul-left-li"><a class="footer-nav-ul-left-li-a" href="#" title="Вопросы и ответы">Вопросы и ответы</a></li>
					<li class="footer-nav-ul-left-li"><a class="footer-nav-ul-left-li-a" href="#" title="Обратная связь">Обратная связь</a></li>
					<li class="footer-nav-ul-left-li"><a class="footer-nav-ul-left-li-a" href="#" title="Справка">Справка</a></li>
				</ul>
				<ul class="footer-nav-ul-right">
					<div class="footer-nav-ul-right-div">© 2013-2017, ДРУиД - Дом Рационально-Умный и Душевный</div>
				</ul>

Стили не сложные.

/* --------------- Футер сайта ---------*/
footer {
	background-image: url(../images/fon_header.jpg);
}
	.footer {
		height: 40px;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}
		.footer-nav-ul-left {
				float: left;
				padding-top: 8px;
		}
		.footer-nav-ul-left-li {
			float: right;
			padding-left: 25px;
		}
		.footer-nav-ul-left-li-a:hover {
			border-bottom: 2px solid #fff;		
			text-decoration: none;
			color: #fff;
		}
		.footer-nav-ul-left-li-a {
			color: #fff;
			text-decoration: none;
			display: block;				
			text-align: center; /* Выравнивание по центру */
			height: 100%;
		}
		.footer-nav-ul-right {
				float: right;
				padding-top: 11px;
				font-size: 89%;
		}
		.footer-nav-ul-right-div{
			float: left;
			padding-right: 15px;
			color: #000;
		}
	/* --------------- /Футер сайта ---------*/

Итог можно увидеть по следующей ссылке.

Вместо заключения.

Шаблон сайта сверстан. От макета взято не много, но за основу общего дизайна сайта он пригодился. Можно найти макет сайта по своему вкусу и сверстать на его основе шаблон сайта один в один.