Как переместить Футер вниз страницы?/ Как выровнять картинки в линию?
Футер стоит сразу после меню. назначила ему clean:both . Правильнное ли было решение? Как нужно верно это делать?
Картинки не становятся друг за другом в линию. Зависит ли это от размеров их? Что можно придпринять? Какую команду лучше всего использовать?
file:///D:/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B/front-end/milki%20skin/index.html
<!DOCTYPE html>
<html lang="rus">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="Milki Skin">
<meta name="keyworld" content="skin cosmetics japon korean">
<link href="https://fonts.googleapis.com/css?family=Comfortaa&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/milky.css">
<title>Milki Skin</title>
</head>
<body>
<div class="main">
<div class="header">
<div class="logo">
<div class="LogoTekst">
<h2><a href="/"> Milki Skin</a></h2>
<h4 class="Skin">Кожа - в твоих руках! Действуй!</h4>
</div>
</div>
<div class="menubar">
<ul class="menu">
<li class="selected"><a href="#">Новинки</a></li>
<li><a href="#">Уход за лицом</a></li>
<li><a href="#">Декоративная косметика</a></li>
<li><a href="#">Волосы & Тело</a></li>
<li><a href="#">Пробники</a></li>
<li><a href="#">Распродажа</a></li>
</ul>
</div>
</div>
<div class="site_content">
<div class="sitebar_conteiner">
<div class="sitebar">
<h1>Поиск</h1>
<form method="POST" action="#" id="search_form">
<input type="search" name="search_field" placeholder=" Ваш запрос"/>
<input type="submit" class="btn" value="найти" />
</form>
</div>
<div class="sitebar">
<h1>Вход</h1>
<form method="POST" action="#" id="Login">
<input type="text" name="login_field" placeholder="Логин"/>
<input type="password" name="password_field" placeholder="Пароль"/>
<input type="submit" class="btn" value="вход"/>
<div class="labels_passrag_text">
<span><a href="#">забыли пароль?</a></span>/<span><a href="#">регистрация</a></span>
</div>
</form>
</div>
<div class="sitebar">
<h1>Блог</h1>
<span>25.10.2019</span>
<p>Как подобрать крем для Вашего типа кожи.</p>
<a href="#">Читать</a>
</div>
<div class="sitebar">
<h1>Рейтинг косметических компаний</h1>
<ul>
<li><a href="#"> Tony Moli</a><span class="reviews">10</span></li>
<li><a href="#"> Missha</a><span class="reviews">9</span></li>
<li><a href="#"> Laneige</a><span class="reviews">8</span></li>
<li><a href="#"> MediFlower</a><span class="reviews">7</span></li>
<li><a href="#"> Iunik</a><span class="reviews">7</span></li>
</ul>
<span class="reiting_sitebar"></span>
</div>
</div>
<div class="content">
<h1>Новинки!</h1>
<div class="cream_block">
<a href="#"><img src="./img/cleanDev.jpg" alt="cleanDev"></a>
<a href="#"><img src="./img/dunkey.jpg" alt="dunkey"></a>
<a href="#"><img src="./img/foka.jpg" alt="foka"></a>
<a href="#"><img src="./img/handKrem.jpg" alt="handKream"></a>
</div>
</div>
<div class="footer">
<p>
<a href="#">Новинки</a>|
<a href="#">Уход за лицом</a>|
<a href="#">Декоративная косметика</a>|
<a href="#">Волосы & Тело</a>|
<a href="#">Пробники</a>|
<a href="#">Распродажа</a>|
</p>
<p>2019, www.Dot.com</p>
</div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
font-size: 1.2em;
background-color: rgb(255, 251, 246);
color: rgb(99, 98, 98);
}
p{
padding:0 0 20px 0;
line-height: 1em;
}
h1, h2{
font: normal 100% 'Comfortaa';
margin: 0 0 15px 0;
padding: 10px 0 5px 0;
color: #4a148c;
}
h2
{
font-size: 40%;
}
a, a:hover{
text-decoration: none;
outline: none;
color: #4f1052;
}
input [type="text"], input [type="password"], input [type="sear"] {
color: #c51162;
width: 60%;
padding: 8px;
}
input, textarea{
outline: none;
border: none;
border: solid 1px #c51162;
}
ul{
margin: 2px 0 22px 17px;
}
ul, li{
margin: 0 0 6px 0;
padding: 0 0 4px 5px;
line-height: 1.5em;
}
.header{
background-color: #ffebee;
height: 177px;
font-size: 0.8em;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
}
.main,.logo,.menubar,.site-content,.footer{
margin-left: auto;
margin-right: auto;
}
.logo{
width: 880px;
padding-bottom: 40px;
text-align: center;
}
.logo h2{
font-size: 26px;
font-family: 'Comfortaa';
font-weight: 500;
margin: 0 0 0 9px;
}
.logo h4{
font-size: 16px;
color: #c51162;
font-family: 'Comfortaa';
font-weight: 500;
margin: 0 0 0 9px;
}
.LogoTekst h2, .LogoTekst h2 a, .LogoTekst h2 a:hover{
padding: 26px 0 0 0;
color: #880e4f;
letter-spacing: 0.1em;
text-decoration: none;
}
.menubar{
width: 900px;
height: 45px;
}
ul.menu{
float: right;
}
ul.menu li{
float: left;
padding: 0 0 0 9px;
margin: 1px 2px 0 0;
list-style: none;
}
ul.menu li a{
display: block;
font-family: 'Comfortaa';
padding: 6px 35px 5px 28px;
color: #880e4f;
text-decoration: none;
height: 20px;
font-size: 14px;
}
ul.menu li.selected a{
color: #6a1b9a;
}
ul.menu li a:hover{
color: #90caf9;
}
.site_content{
width: 880px;
overflow: hidden;
margin: 20px auto 0 auto;
}
.sitebar_conteiner{
float: right;
width: 236px;
padding: 3px;
}
.sitebar{
float: right;
width: 222px;
padding: 5%;
margin: 0 0 16px 0;
background-color: #ffebee;
}
.btn{
padding: 4px;
background-color: #ffebee;
cursor: pointer;
}
.labels_passrag_text{
font-size: 0.7em;
margin-top: 3%;
margin-left: 2%;
}
.sitebar ul{
margin: 0;
}
.sitebar ul li{
margin: 0 0 0 0;
list-style-type: none;
}
.sitebar .reviews{
float: right;
}
.content{
text-align: left;
width: 620px;
padding: 0 0 0 5px;
float: left;
}
.content a{
text-decoration: none;
}
.footer{
width: 100%;
height: 100px;
padding: 28px 0 5px 0;
text-align: center;
background-color: #ffebee;
color: lightpink;
margin-left: 0px;
margin-right: 0px;
min-width: 900px;
clear: both;
}
.footer a{
color: #880e4f;
text-decoration: none;
}
.footer a:hover{
color: #000000;
text-decoration: none;
}
.footer p {
padding: 0 0 10px 0;
}
