ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Адаптивный низ страницы сайта на CSS

Адаптивный низ страницы сайта на CSS

Невозможно представить сайт или блог без нижнего элемента, где вашему вниманию адаптивный низ в темном оттенке цвета с использованием HTML и CSS. Где вы можете разместить небольшие баннеры, что будет прямой ссылкой на ваш материал, а это разбить по категориям или разделам. Но главное, все что установлено на футор, все корректно показывает, как на мониторе, так на мобильном гаджет. Где подключены шрифтовые значки, которые отлично впишутся под этот стиль дизайна.

Все разбито на три части, где первая отвечает на категории, также в ней находятся социальные значки, но и название можно написать в самом верху, где по умолчанию написано под карту сайта. Далее идет информационный блок, он затрагивает самый актуальный материал или выставляет новый, здесь больше от вебмастера зависит, что он хотел бы видеть по центру. И остается 4 изображение на 150+100 пикселей, где идет место под клик, что вероятнее в нем находится самые популярные запросы.

Здесь показан реальный дизайн при установочном процессе:

Адаптивный футер для сайта на CSS + jQuery

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

Установка:

Подключаем в HEAD

Код

HTML

Код

<footer>
  <div class="container">
  <div class="row">

  <div class="col-lg-4 col-md-6">
  <h3>ZORNET.RU</h3>
  <ul class="list-unstyled three-column">
  <li>Главная</li>
  <li>Скрипты</li>
  <li>Шаблоны</li>
  <li>Дизайн</li>
  <li>Стили</li>
  <li>Снимки</li>
  <li>Каталоги</li>
  <li>Разделы</li>
  <li>Контакты</li>
  </ul>
  <ul class="list-unstyled socila-list">
  <li><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/Twitter-icon.png" alt="" /></li>
  <li><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/Youtube-icon.png" alt="" /></li>
  <li><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/Blogger-icon.png" alt="" /></li>
  <li><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/Behance-icon.png" alt="" /></li>
  <li><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/Yahoo-icon.png" alt="" /></li>
<li><img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/MySpace-icon.png" alt="" /></li>
  </ul>
  </div>

  <div class="col-lg-4 col-md-6">
  <h3>Последние статьи</h3>
  <div class="media">
  <a href="#" class="pull-left">
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/content-icon.png" alt="" class="media-object" />
  </a>
  <div class="media-body">
  <h4 class="media-heading">Программирование</h4>
  <p>Нет сомнений, что 3D-печать дотошно продвинулась дальше.</p>
  </div>
  </div>

  <div class="media">
  <a href="#" class="pull-left">
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/comments-icon.png" alt="" class="media-object" />
  </a>
  <div class="media-body">
  <h4 class="media-heading">3D-печать</h4>
  <p>В последние десятилетия концепцию 3D-печати можно было читать.</p>
  </div>
  </div>

  <div class="media">
  <a href="#" class="pull-left">
  <img src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/video-marketing-icon.png" alt="" class="media-object" />
  </a>
  <div class="media-body">
  <h4 class="media-heading">Web технология</h4>
  <p>Тем не менее, некоторые производители используют эту технологию.</p>
  </div>
  </div>

  </div>

  <div class="col-lg-4">
  <h3>Наша работа</h3>
  <img class="img-thumbnail" src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/800px-Indi.jpg" alt="" />
  <img class="img-thumbnail" src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/800px-Indi.jpg" alt="" />
  <img class="img-thumbnail" src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/5124860_1200px.jpg" alt="" />
  <img class="img-thumbnail" src="http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/5124860_1200px.jpg" alt="" />
  </div>

  </div>
  </div>
  <div class="copyright text-center">
  Copyright © 2020 <span>
ZorNet.Ru — сайт для вебмастера</span>
  </div>
</footer>

CSS

Код

footer {
  background: #171717;
  color: #aaa;
  padding-top: 10px;
}

footer a {
  color: #aaa;
}

footer a:hover {
  color: #ececec;
}

footer h3 {
  color: #25ade8;
  letter-spacing: 1px;
  margin: 28px 0 18px;
}

footer .three-column {
  overflow: hidden;
}

footer .three-column li {
  width: 33%;
  float: left;
  padding: 4.7px 0;
}

footer .socila-list {
  overflow: hidden;
  margin: 18px 0 8px;
}

footer .socila-list li {
  float: left;
  margin-right: 2px;
  opacity: 0.9;
  overflow: hidden;
  border-radius: 100%;
  transition: all 0.3s ease-in-out;
}

footer .socila-list li:hover {
  opacity: 1;
}

footer .img-thumbnail {
  background: rgba(21, 21, 21, 0.2);
  border: 1px solid #525151;
  margin-bottom: 4px;
}

footer .copyright {
  padding: 20px 0;
  background: #0e0e0e;
  margin-top: 20px;
  font-size: 14px;
}

footer .copyright span {
  color: #0894d1;
}

Это один из самых распространенных примеров нижнего колонтитула, который понятен для пользователя, что заходит на сайт. Где по сторонам отображаются данные, как о самой компаний, там и о контенте, что находится на этом ресурсе.

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

Демонстрация

24 Февраля 2020 Загрузок: 1 Просмотров: 1175 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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