• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Добавить нижний колонтитул для вашего сайта (Нижний колонтитул для сайта внизу HTML-страницы)
Добавить нижний колонтитул для вашего сайта
Kosten
Дата: Среда, 2018-10-17, 14:02 | Сообщение 1
Администраторы
Сообщений:18467
Награды: 55


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

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

Что включать в свой нижний колонтитул сайта

Перед полной установки нижнего колонтитула, вы изначально спросите себя, что вам нужно, чтоб посетители сделали, как только они достигли нижней части вашего сайта. Так как они безусловно заметят его, и большинство откроет, и главное что должно там содержаться. Некоторые описывают свой сайт, другие пишут полные контакты, и многое другое.



HTML

Код
<section>
  <h1>Классическая сортировка</h1>
  <h3>Наведите указатель мыши на круг ниже</h3>
</section>
<div class="moresomation">
  <div id="button"></div>
<div id="nimpodarea">
<div id="cont">
<div class="moresomation_center">
    <h3>Классный текст</h3>
</div>
</div>
</div>
</div>


CSS

Код
section{
  text-align:center;
}
.moresomation #button{
    width:35px;
    height:35px;
    border: #727172 12px solid;
    border-radius:35px;
    margin:0 auto;
    position:relative;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.moresomation #button:hover{
    width:35px;
    height:35px;
    border: #3A3A3A 12px solid;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    position:relative;
}
.moresomation {
    bottom:0;
    left:0;
    position:fixed;
    width: 100%;
    height: 2em;
    overflow:hidden;
    margin:0 auto;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    z-index:999;
}
.moresomation:hover {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
    height: 10em;
}
.moresomation #nimpodarea{
    margin-top:5px;
    width:100%;
height:100%;
  position:relative;
  top:0;
  left:0;
    background: #3A3A3A;
}
.moresomation #cont{
  position:relative;
  top:-45px;
  right:190px;
    width:150px;
    height:auto;
    margin:0 auto;
}
.moresomation_center{
    width:500px;
    float:left;
  text-align:center;
}
.moresomation h3{
    font-family: 'Helvetica';
    font-size: 30px;
    font-weight: 100;
    margin-top:70px;
    margin-left:40px;
}


Как напоминание, что сделайте по установке максимально удобным и доступным.

Демонстрация
Прикрепления: 9722754.jpg(10.2 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Добавить нижний колонтитул для вашего сайта (Нижний колонтитул для сайта внизу HTML-страницы)
  • Страница 1 из 1
  • 1
Поиск: