• Страница 1 из 1
  • 1
Как сделать нижний колонтитул на страницы
Kosten
Пятница, 13 Декабря 2019, 21:50 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Иногда нам нужно на одной страницы создать один низ сайта, так, чтоб на нем можно было разместить как можно больше информации, но главное, чтоб он был на 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
Прикрепления: 6218990.png (42.8 Kb) · website-footer.zip (4.3 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: