Нижний колонтитул (футер) на HTML и CSS
 | |
| Здесь указана основная информация на нижний колонтитул сайта, что создан в современном стиле, где идут информационные блоки с информер и кодами. Когда HTML-страница содержит небольшое количество контента, то в большинстве низ сайта может иногда находиться на полпути вверх, где автоматически производит пустое пространство под ним, но не в нашем случай, где при установках он становится липкий, и устанавливается в самом низу, не смотря сколько контента на странице. Это один из лучших примеров нижнего колонтитула для сайтов идет такой стиль, где все читается справа налево. Что здесь изначально шел по умолчанию, что пришлось немного в стилистике переписать стороны. В крайнем правом углу отображаются данные о компании, за которыми следуют контактные данные о компании, а в крайнем левой стороне идет контактная информация вместе с соответствующими социальными сетями. Ознакомьтесь с дополнительными дополнениями в нижней части информации об авторских правах, которые идут на самом просматривающем виде, что будем считать его в самом низу, где идет графика, что производит небольшой перекос оттенка, что получается красиво. Если вы планируете этот тип нижнего колонтитула, посмотрите на CSS, который обеспечивает стиль справа налево для всех компонентов нижнего колонтитула. Так низ выглядит после полной установки:  Установочный процесс: В HEAD на странице Код <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> HTML Код <section class="container-fluid sec-footer"> <div class="container"> <div class="row"> <div class="col"> <div class="card desc-box"> <div class="card-body"> <div class="card-title">О нас</div> <div class="card-text"> Графический дизайнер использует этот текст в качестве элемента композиции для заполнения страницы и инициализации макета и общего макета заказа, чтобы графически представить тип и размер.</div> </div> </div> </div> <div class="col"> <div class="card desc-box"> <div class="card-body"> <div class="card-title">Свяжитесь с нами</div> <div class="card-text"> <div class="row"> <div class="col"> <i class="fas fa-phone ml-3"></i> <span>7 453 654 983 18</span> </div> </div> <div class="row"> <div class="col"> <i class="fas fa-map-marker ml-3"></i> <span>Шираз Йессициссис Сиссис</span> </div> </div> <div class="row"> <div class="col"> <i class="fas fa-envelope-open ml-3"></i> <span>info@dsdsdsds.ir</span> </div> </div> </div> </div> </div> </div> <div class="col text-center"> <img src="http://images.vfl.ru/ii/1561136749/595b11af/26962935.png" alt="ZorNet.Ru — сайт для вебмастера" class="mb-3"> <br class="clearfix"> <a href="#" class="bazovaya-modelased"><i class="fab fa-linkedin-in"></i></a> <a href="#" class="bazovaya-modelased"><i class="fab fa-instagram"></i></a> <a href="#" class="bazovaya-modelased"><i class="fab fa-telegram-plane"></i></a> <a href="#" class="bazovaya-modelased"><i class="fab fa-google-plus-g"></i></a> </div> </div> </div> </section> <section class="container-fluid sec-sub-footer"> <div class="container"> <div class="row"> <div class="col"> <span>Все права защищены образовательным комплексом.</span> </div><!--.col--> <div class="col text-left"> <a href="http://zornet.ru/" class="f-light text-dark">Дизайн и разработка:</a> <a href="http://mihanmedia.ir" class="f-light text-dark">Родина Медиа</a> </div> </div> </div> </section> CSS Код .sec-footer { background: #3a365a; text-align: left; color: #f9f8f8; padding-top: 2.5rem; padding-bottom: 2rem; text-align: left; } .sec-footer .desc-box{ background: transparent; border: 0; } .sec-footer .desc-box .card-title::after{ content: ' '; background: #ffffff; display: block; width: 95%; height: 0.2rem; margin-top:0.3rem; } .sec-footer .desc-box .card-text{ font-family:iranyekan_light; text-align: justify; } .sec-sub-footer { background: #323248; text-align: right; color: #efe9e9; padding-top: 1.5rem; padding-bottom: 1.5rem; font-size: 0.8rem; } .sec-sub-footer a{ font-size:0.8rem; } /*------------------*/ .bazovaya-modelased { position: relative; font-size: 20px; color: #e6e6e6; width: 45px; margin: 4px; height: 45px; line-height: 45px; display: inline-block; text-align: center; -webkit-perspective: 50em; perspective: 50em; text-decoration: none; -webkit-box-sizing: border-box; box-sizing: border-box; } .bazovaya-modelased:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border: 2px solid #e6e6e6; content: ''; z-index: -1; border-radius: 50%; } .bazovaya-modelased:before { color: #fff; } .bazovaya-modelased:before, .bazovaya-modelased:after { -webkit-transition: all 0.45s ease-in-out; transition: all 0.45s ease-in-out; } .bazovaya-modelased:hover, .bazovaya-modelased:active, .bazovaya-modelased.hover { color: #c0392b; } .bazovaya-modelased:hover:after, .bazovaya-modelased:active:after, .bazovaya-modelased.hover:after { border-color: #c0392b transparent #c0392b transparent; -webkit-transform: rotate(360deg); transform: rotate(360deg); } Если говорить про адаптивность футера, то можно посмотреть на demo страницу, где все корректно выводит. Все очень просто, это контейнеры собираются в одну колонку, что из горизонтального положение переходит на вертикальный вид. Какой метод вы выберете, зависит только от вас и от особенностей вашего дизайна. Где приведенный выше пример поможет вам сэкономить время при принятии решения и его реализации. При работе с динамическим контентом, который включает нижний колонтитул, иногда возникает проблема, когда контента на странице недостаточно для его заполнения. Нижний колонтитул вместо того, чтобы оставаться внизу страницы, где мы хотели бы, чтобы он оставался, поднимается и оставляет пустое пространство под ним. Демонстрация Также рекомендую пройти на форум, где есть специальная тема, это как сделать адаптивный футер для сайта, где представлена подюорка разнообразный низ сайта, которые идут в разной стилистики дизайна. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |