Рейтинг@Mail.ru
Часть I. Статья №6. Верстка подвала – блока футтер - ДРУиД
Войти
или
Зарегистрироваться
Главная Файлы Видеоматериалы Форум
Карта сайта
Главная -> РУБРИКИ: -> Создание сайта | блога | своими руками -> Часть I. Статья №6. Верстка подвала – блока футтер

Статья опубликована: 2017-04-01/22:27:43-admin

Часть 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;
		}
	/* --------------- /Футер сайта ---------*/

 

 

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

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

 

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

 

Лирическое отступление:
Большие объемные курсы по верстке сайта доступны на следующих тематических ресурсах:
  1. Видеокурс "Вёрстка сайта с нуля"
  2. HTML для начинающих
  3. HTML5 и CSS3 с Нуля до Профи
Еще много полезной информации можно найти в поиске от гугла и яндекса.

 

Видео данного урока.

 

 

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

 

Заключение.

 

Цикл по верстке шаблона сайта на основе макета фотошопа подошел к концу. Теперь приступим к написанию CMS сайта. В процессе написания прицепим наш шаблон к собственно разработанному движку сайта. Забегая вперед, скажу, что шаблон нам понадобиться с первых минут написания собственного движка сайта.

 


Просмотров: 830



Комментарии: (0)

Оставить комментарий

Да, Я Хочу Всегда Быть В Курсе Новых Событий На Сайте!

Подпишитесь прямо сейчас, и получайте обновления на свой E-Mail:

Ваш E-Mail в безопасности


Рекомендованные статьи:




На прошлом уроке мы сверстали правое боковое меню. В него вошла навигация по рубрикам сайта, блок рекламы, анонс последней статьи, форма подписки на новостную рассылку, а также список самых читаемых статей на ресурсе. В сегодняшнем уроке сверстаем основной блок – контент.


РУБРИКИ:








Последняя статья:

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

На прошлом уроке мы сверстали основной блок контент. Оформили  статьи, которые отображаются на главной странице. Оформили их стилями, не входящими в макет сайта, но вписывающимися в общий дизайн сайта. На сегодняшнем уроке мы оформим подвал сайта. В данный блок войдут ссылки на стандартные страницы любого сайта, а также копирайт.

Читать далее »


Справка Обратная связь Вопросы и ответы Контакты RSS-лента © 2013-2016, ДРУиД - Дом Рационально-Умный и Душевный
Рейтинг@Mail.ru Яндекс.Метрика