Как сделать текст внизу страницы html

<footer>

<footer> создаёт нижнюю часть страницы или блока — «подвал». Обычно здесь находятся контакты, ссылки на разделы сайта, копирайт.

Пример

Скопировать ссылку на секцию «Пример» Скопировано

В нашем блоке со статьёй будет небольшой футер с указанием автора и его контактами:

Как понять

Скопировать ссылку на секцию «Как понять» Скопировано

Как правило, у сайта есть «шапка» и «подвал»: верхняя и нижняя части страницы. Обычно эти блоки выглядят одинаково на всех страницах. Эти разделы помогают пользователю сориентироваться и получить основную инфу о сайте.

В подвале мы чаще всего видим название компании, правовую информацию, ссылки на соцсети и другие контакты.

<footer> может быть не только у всего сайта целиком, но и у отдельного блока или секции.

Как пишется

Скопировать ссылку на секцию «Как пишется» Скопировано

Тег <footer> парный, должен всегда закрываться < / footer> .

Атрибуты

Скопировать ссылку на секцию «Атрибуты» Скопировано

Подсказки

Скопировать ссылку на секцию «Подсказки» Скопировано

�� У <footer> блочные стили по умолчанию ��

�� Нельзя вкладывать в <address> , <header> или другой <footer> .

�� Контакты и информацию об авторе стоит поместить в контейнер <address> , а его добавить в <footer> .

На практике

Скопировать ссылку на секцию «На практике» Скопировано

Дока Дог советует

Скопировать ссылку на секцию «Дока Дог советует» Скопировано

�� У <footer> особо нет никаких хитростей. Это нижняя часть страницы: там располагаются разные эпилоги. Если это лендинг, там могут лежать иконки соцсетей и информация о компании. Важно выделить <footer> , чтобы поисковик понял, что находится в этом блоке.

Простой footer у веб-сайта

На этом уроке сделаем простой футер для веб-сайта. Для красоты верх футера украсим волной.

HTML разметка

Обычно в футере сайта ставятся иконки ведущие на социальные сети и основные пункты меню навигации.

Простой footer у веб-сайта.

Стилизация меню и социальных иконок

Далее зададим стили для тегов в HTML-разметке.

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
* <
margin: 0;/*обнуление отступов*/
padding: 0;/*обнуление полей*/
box-sizing: border-box;/*метод расчета размеров бокса*/
font-family: 'Poppins', sans-serif;/*название шрифта*/
>
body <
display: flex;/*флексбокс сетка*/
flex-direction: column;/*направление главной оси*/
justify-content: flex-end;/*элементы в конце контейнера*/
min-height: 100vh;
>
footer <
position: relative;/*относительное позиционирование*/
width: 100%;/*на всю ширину*/
padding: 20px 50px;/*поля для контента*/
background: #3586ff;/*цвет футера*/
display: flex;
justify-content: center;/*в центре по горизонтали*/
align-items: center;/*в центре по вертикали*/
flex-direction: column;
margin-top: 100px;/*отступ сверху*/
>
footer .wave <
position: absolute;/*абсолютное позиционирование*/
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: url(wave.png);/*картинка волны*/
background-size: 1000px 100px;/*ширина и высота волны*/
>
.social,
.menu <
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
flex-wrap: wrap;/*разрешен перенос на новую строку*/
>
.social li,
.menu li <
list-style: none;/*удалить черные маркеры*/
>
.social li a <
font-size: 2em;/*размер иконок*/
color: #fff;/*цвет иконок*/
margin: 0 10px;
display: inline-block;/*отображать как строчно-блочный элемент*/
transition: 0.5s;/*плавный переход*/
>
.menu li a <
font-size: 1.2em;/*размер ссылок меню*/
color: #fff;/*цвет ссылок меню*/
opacity: 0.75;/*значение прозрачности*/
margin: 0 15px;
text-decoration: none;/*ссылка без подчеркивания*/
display: inline-block;
>
.menu li a:hover <
opacity: 1;
>
footer p <
color: #fff;
text-align: center;
margin-top: 15px;
font-size: 1.1em;
>

Простой footer у веб-сайта.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

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

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

HTML тег <footer>

Тег <footer> выделяет нижний колонтитул (“подвал”) веб-сайта или раздела. Как правило, в нем размещается информация об авторских правах, контактные данные, ссылки для навигации и т.д.

В пределах одной страницы можно разместить несколько тегов <footer>. К примеру, можно разместить нижний колонтитул внутри тега <article> для хранения относящейся к статье информации (ссылки, сноски, и т.д.).

В нем могут содержаться другие HTML элементы, кроме тегов <footer> и <header>.

Тег <footer> недавно вошел в спецификацию HTML 5, он поддерживается всеми браузерами.

Синтаксис

Содержимое тега пишется между открывающим (<footer>) и закрывающим (</footer>) тегами.

Как создать статический футер с помощью HTML и CSS

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

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

В последнем мануале этой серии по CSS мы поговорим о том, как создать статический футер и зафиксировать его (он будет оставаться в нижней части области просмотра, когда посетитель прокручивает страницу вниз).

Методы, которые использованы здесь, можно применить к любым другим проектам, разработанным на CSS и HTML.

Требования

Чтобы выполнить эти инструкции, вам следует подготовит среду согласно мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

В качестве контента для футера мы используем несколько значков социальных сетей. Если вы тоже хотите использовать эти значки, загрузите их и сохраните в папке images как:

Примечание: Чтобы загрузить изображение, перейдите по нужной вам ссылке, нажмите Ctrl и кликните левой кнопкой (на Mac) или правой кнопкой мыши (в Windows) по изображению, выберите «Сохранить изображение как» и сохраните его в своей папке images. Сохраните изображения с указанными именами.

После этого вы можете приступать к работе.

Читать:

Как объединить 2 объекта в 3d max

Создание класса для оформления футера

Сначала мы определим класс footer, добавив следующий фрагмент кода в конец файла styles.css:

Сохраните файл styles.css. Как всегда, новый раздел кода начинается с комментария (/* Footer */). Затем мы определяем класс footer и объявляем несколько правил стиля. Первое правило объявляет параметр position со значением fixed, что означает, что элемент не будет перемещаться из указанного вами расположения, когда пользователь будет прокручивать страницу вниз. Это расположение задается следующими двумя объявлениями: bottom:0 и left:0 – 0 пикселей слева и 0 пикселей снизу области просмотра браузера.

Откорректировав эти значения, вы можете изменить расположение элемента на странице. Однако помните: любое значение, кроме нуля, должно включать суффикс px после числа. В наборе правил также указаны ширина, высота и цвет фона класса footer.

Добавление футера на страницу

Чтобы добавить контент для футера, мы создадим новый контейнер <div> и присвоим ему только что созданный класс footer. Вернитесь в файл index.html и вставьте следующий фрагмент кода после последнего закрывающего тега </div>:

Сохраните файл index.html и загрузите его в браузере.

Если вы не знаете, как открыть оффлайн-файл, обратитесь к нашему руководству Основы работы с html-элементами (раздел Просмотр оффлайн HTML-файла в браузере).

На экране будет пустой контейнер для футера, который остается на месте при прокрутке страницы вверх и вниз.

Теперь можно добавить контент – сделаем это в следующем разделе руководства.

Добавление и оформление контента футера

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

Вернитесь к styles.css и добавьте следующий фрагмент кода в конец файла:

Давайте подробно рассмотрим каждый из созданных нами наборов правил:

Первый набор определяет класс footer-text-left, который будет использоваться для стилизации текста меню. Обратите внимание, свойство float имеет значение left – следовательно, текст, оформленный по этому классу, будет размещен в левой части страницы. Свойство word-spacing предоставляет дополнительное пространство между элементами меню. Однако если какой-либо из пунктов вашего меню состоит из более чем одного слова, вам нужно создать класс для стилизации пунктов меню (недостаточно просто изменить значение интервала между словами).
Второй набор правил использует псевдокласс hover, чтобы сделать желтым цвет фона того текста, на который пользователь наводит курсор.

Теперь давайте пропишем в файле index.html пункты меню. Вставьте следующий выделенный фрагмент кода в контейнер footer, который вы создали ранее:

<a href=»https://css.sammy-codes.com/about.html» >about</a>

<a href=»https://css.sammy-codes.com/credits.html» >credits</a>

Этот фрагмент кода добавляет два элемента меню (about и credits), связывает эти элементы и стилизует текст с помощью только что созданных классов footer-text-left и a.menu.

Сохраните оба файла и перезагрузите веб-страницу в браузере. В левой части закрепленного футера появится три пункта меню: home, about и credits. При наведении на них фон будет менять свой цвет на желтый.

Добавление значков социальных сетей

Давайте добавим в наш футер значки социальных сетей, которые можно использовать для ссылки на свои учетные записи. Если вы хотите использовать значки для других соцсетей, вы можете найти их бесплатные логотипы в Интернете и загрузить их в папку images, а затем добавить на свою страницу. Откройте styles.css и вставьте следующие три набора правил в конец файла:

Остановимся на этих правилах подробнее:

Первый набор правил определяет класс footer-content-right и присваивает определенные значения его внутренним полям, внешним отступам и выравниванию (padding, margin и float соответственно). Этот набор правил нужен для стилизации элемента <div>, который будет содержать значки социальных сетей.
Второй набор создает класс icon-style, который задает высоту и внешние поля для значков социальных сетей, учитывая их размер и расположение.
Третий набор правил использует псевдокласс hover, что изменит цвет фона значка на желтый при наведении курсора.

Сохраните файл styles.css. Теперь давайте добавим значки в футер. Вернитесь в свой файл index.html и добавьте следующий фрагмент кода после последнего закрывающего тега </a>:

Примечание: Не забудьте заменить нашу ссылку в коде ссылками на свои соцсети. При необходимости откорректируйте пути к файлам.

Этот фрагмент кода создает контейнер <div>, которому присваивается класс footer-content-right. Внутри этого контейнера div находятся три значка социальных сетей, вставленные с помощью HTML-тега <img>; с помощью тега HTML <a> каждое изображение поддерживает ссылку на соответствующую соцсеть.

Также мы добавили атрибут alt – это альтернативный текст, описывающий каждый значок. При создании веб-сайтов альтернативный текст следует добавлять ко всем изображениям, чтобы обеспечить доступность сайта для людей, использующих скринридеры. Чтобы узнать больше об использовании альтернативного текста с HTML, читайте мануал Добавление изображения на веб-страницу с помощью HTML.

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

Заключение

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

Поздравляем, работа над тестовым сайтом завершена! Теперь вы знаете, как стилизовать HTML-элементы с помощью определения классов и псевдоклассов CSS. Вы также ознакомились с несколькими вариантами верстки сайта, которые можно реализовать через различные HTML-элементы и CSSстили.

CSS можно изучать бесконечно, но описанные в этой серии методы обеспечат вам прочную основу для развития ваших навыков работы с CSS и подготовят вас к изучению других инструментов (таких как JavaScript) и фреймворков (как, к примеру, Tailwind). Также у вас теперь есть все файлы и папки, необходимые для развертывания готового веб-сайта в облаке.

Для практики попробуйте изменить что-нибудь на веб-сайте, который у вас получился. Вот пара идей, которые могут вас заинтересовать: