Иногда нам нужно на одной страницы создать один низ сайта, так, чтоб на нем можно было разместить как можно больше информации, но главное, чтоб он был на HTML и CSS. Оригинальный стиль дизайна безусловно важен при работе с большим количеством информации на сайте, что вероятно будет иметь место для нижнего колонтитула.
Придерживайтесь чистых элементов, много места и организуйте с целью. Постарайтесь избежать беспорядка и подумайте о том, какие элементы будут жить в вашем нижнем колонтитуле и почему они должны быть там. Размер нижнего колонтитула часто зависит от объема информации и количества страниц на вашем сайте.
Низ сайта с контактной информацией HTML + CSS
HTML
Код
<div class="nerdum-nonkasd">
<div id="lopesan">
ZorNet.Ru — сайт для вебмастера
</div>
<div id="nerdum-nonkasd">
<div class="lopeusa-nilassan">
<div class="kasmub">
<h3>Поддержка</h3>
<a href="#">Вопросы и ответы</a>
<a href="#">Связаться с нами</a>
<a href="#">Конфиденциальность</a>
<a href="#">Перевозка</a>
<a href="#">Возвращает</a>
<a href="#">Обмен продуктами</a>
<a href="#">Возврат денежных средств</a>
</div>
<div class="kasmub">
<h3>About</h3>
<a href="#">About Us</a>
<a href="#">Testimonials</a>
</div>
<div class="kasmub">
<h3>Follow</h3>
<div id="social">
<a id="fb" href="#" title="Facebook"></a>
<a id="twitter" href="#" title="Twitter"></a>
<a id="blog" href="#" title="Blog"></a>
<a id="pinterest" href="#" title="Pinterest"></a>
<a id="instagram" href="#" title="Instagram"></a>
<a id="ravelry" href="#" title="Ravelry"></a>
<a id="rss" href="#" title="RSS"></a>
</div>
</div>
</div>
</div>
<div id="legal">
За это время я усвоил несколько невероятно ценных уроков.
<br>В течение последних пятидесяти лет я работал с брендами по всему миру, чтобы создавать ценный и привлекательный контент, чтобы помочь поднять их сайты и их бренды на новый уровень.
<br>Если вы хотите попасть в игру по созданию контента, либо как профессиональный писатель создатель контента, либо как владелец сайта, который хочет воспользоваться всеми преимуществами фантастического SEO.
<br><br>© Copyright 2002 - 2014 Lorem Ipsum Dolor
</div>
</div>
CSS
Код
.nerdum-nonkasd{
width: 100%;
margin: 30% auto;
position: absolute;
left: 0;
z-index: -1;
}
#lopesan{
background: #B6B6AB;
text-align: center;
width: 100%;
padding: 10px;
color: #fff;
font: 16pt Georgia;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
}
#nerdum-nonkasd{
background: #22697F;
padding: 15px 0 15px 0;
}
.lopeusa-nilassan{
margin: auto;
width: 600px;
padding: 5px 0 5px 25px;
}
.kasmub{
overflow: hidden;
display: inline-block;
width: 180px;
margin: 0 15px 15px 0;
font-size: 10pt;
line-height: 1.6em;
vertical-align: top;
}
.kasmub a{
display: block;
text-decoration: none;
color: #fff;
}
.kasmub a:hover{
text-decoration: underline;
}
.kasmub h3{
color: #fff;
text-transform: uppercase;
text-align: center;
font-size: 12pt;
display: inline-block;
letter-spacing: 1px;
}
#legal{
width: 100%;
text-align: center;
color: #EAEAEA;
background: #22697F;
font-size: 8pt;
line-height: 1.6em;
padding: 10px 10px 30px 10px;
}
#social a{
display: inline-block;
width: 29px;
height: 29px;
margin: 0 3px 3px 0;
}
#fb{
background: url("http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/fCRgp42.png") 0 0 no-repeat;
}
#twitter{
background: url("http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/fCRgp42.png") -29px 0 no-repeat;
border-radius: 4px;
}
#blog{
background: url("http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/fCRgp42.png") -58px 1px no-repeat;
}
#pinterest{
background: url("http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/fCRgp42.png") -87px 0 no-repeat;
border-radius: 4px;
}
#instagram{
background: url("http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/fCRgp42.png") -146px 0 no-repeat;
}
#ravelry{
background: url("http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/fCRgp42.png") -117px 0 no-repeat;
}
#rss{
background: url("http://zornet.ru/ZORNET-RU/ZR/Alinuversa/zorner-ru/fCRgp42.png") -175px 0 no-repeat;
}
На этом установка завершена.
Демонстрация
Набор на адаптивные низ сайта HTML + CSS