«Footer» веб-страницы — это раздел, который обычно располагается внизу страницы и содержит информацию о владельце сайта, его контактные данные, ссылки на социальные сети и другую информацию.
Для создания «footer» веб-страницы используются стандартные элементы HTML, такие как <footer>
, <div>
, <a>
, <ul>
и другие.
Пример HTML-кода для создания «footer» веб-страницы:
<footer>
<div class="footer-content">
<div class="footer-logo">
<a href="#"><img src="logo.png" alt="Logo"></a>
</div>
<ul class="footer-links">
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Услуги</a></li>
</ul>
<div class="footer-social">
<a href="#"><i class="fab fa-facebook"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="footer-bottom">
<p>© 2021 MyCompany. Все права защищены.</p>
</div>
</footer>
Здесь мы использовали элемент <footer>
для создания блока «footer». Мы разместили в «footer» несколько подблоков, такие как .footer-content
, .footer-logo
, .footer-links
, .footer-social
, .footer-bottom
, и задали им соответствующие стили CSS для отображения на странице.
Чтобы оформить «footer» в соответствии с дизайном страницы, рекомендуется использовать CSS-стили. Например:
footer {
background-color: #333;
color: #fff;
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.footer-logo img {
width: 150px;
height: auto;
}
.footer-links li {
display: inline-block;
margin-right: 1rem;
}
.footer-links a {
color: #fff;
}
.footer-social a {
color: #fff;
margin-right: 1rem;
}
.footer-social i {
font-size: 1.5rem;
}
.footer-bottom {
background-color: #222;
text-align: center;
padding: 1rem;
}
В данном примере задаются стили для блоков «footer». Мы задаем цвет фона и цвет текста для footer
, а также стили flex
для блока .footer-content
, чтобы расположить его элементы в нужном порядке.
Мы также задаем цвет текста и отступы для элементов .footer-links
и .footer-social
, а также размер иконок социальных сетей.
Для элемента .footer-bottom
мы устанавливаем другой цвет фона и выравниваем текст по центру блока.
Такие стили могут быть изменены в соответствии с дизайном страницы и требованиями контента.