Сездание футера
В футере (или подвале) сайта размещается различная дублирующая и не только информация. Обычно это пункты меню, контакты, ссылки на соцсети, счетчики посещений, информация об авторах и другие элементы в зависимости от сайта.
В данном случае в футер мы добавим меню и контакты. Меню будет расположено не горизонтально а вертикально. Меню будет с левой стороны, а контакты с правой. Сам футер окрасим под цвет меню.
Перед закрывающем тегом </body> в файле index.html добавим контейнер с классом footer.
Далее скопируем меню которое обернем в контейнер с классом footermenu. Контакты обернем в контейнер с классом kontakt.
Весь код:
<ul class ="menu">
<li><a href ="#">О компании</a></a></li>
<li><a href ="#">Продукция</a></li>
<li><a href ="#">Прайс-лист</a></li>
<li><a href ="#">Контакты</a></li>
</ul><li><a href ="#">Продукция</a></li>
<li><a href ="#">Прайс-лист</a></li>
<li><a href ="#">Контакты</a></li>
Тел: +7(343)0000000
<br>
Почта: qqqq@wwwwwww.ru
А в файл стилей добавим следующий код:
.footer{
height : 200px;
width : 100%;
margin : 0 auto;
margin-top : 24px;
background-color : maroon;
{
.footermenu{
float : left;
margin-left : 10%;
{
.footermenu a {
color : #fff;/*устанавливает цвет шрифта*/
padding : 12px 20px;/*устанавливает отступ внутри контейнера. 12px сверху и снизу, 20px справа и слево*/
display : inline-block;/*отображение элементов в виде блоков в строку. Можно применить ширину и высоту*/
font-size : 15px;/*размер ширифта*/
text-decoration : none;/*убирает подчеркивание у ссылок*/
{
.kontakt {
float : right;/*отображение элементов в виде блоков в строку. Можно применить ширину и высоту*/
margin-top : 80px;/*размер ширифта*/
margin-right : 10%;/*убирает подчеркивание у ссылок*/
{
Результат:
