Добрый вечер.
Сделала макет как на образце.
При этом на нижней картинке он отображается только в хроме кое как. То есть ближе всего к реальному изображению которое я вижу на верхней картинке.
В других браузерах вообще не видны изменения (Мозила, Яндекс). Просто строки
Что делать?
Давайте код, будем разбираться.
Код:
html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:300px;
font-size:16px;
font-family:“Tahoma”, sans-serif;
line-height:1.3;
background:white;
}
.login-form,
.login-form input[type=“text”],
.login-form input[type=“password”],
.login-form input[type=“submit”]{
font-weight:bold;
font-size:12px;
font-family:“Tahoma”, sans-serif;
text-transform:uppercase;
}
.login-form input[type=“checkbox”]{
vertical-align:middle;
margin-right:5px;
}
.form1 {
width:380px;
height:300px;
background:#34495e;
padding:20px 35px;
}
.login-form {
width:340px;
height:250px;
background:#ffffff;
padding-left:40px;
padding-top:20px;
}
.enter {
font-size:20px;
}
#login {
text-transform:none;
padding:10px 120px 10px 15px;
border:2px solid black;
background-color:#f9f6f3;
color:grey;
background-color:#f9f6f3;
background-image: url(’/assets/ifmo/icon-user.png’);
background-position:279px 10px;
background-repeat:no-repeat;
}
#password {
text-transform:none;
padding:10px 120px 10px 15px;
border:2px solid black;
background-color:#f9f6f3;
background-image: url(’/assets/ifmo/icon-lock.png’);
background-repeat:no-repeat;
background-position:279px 10px;
color:grey;
}
.forget-pass {
text-decoration:underline;
margin-left:45px;
}
#enter {
color:white;
background-color:black;
border:2px solid black;
padding:15px 130px 15px 130px;
}
И HTML-код тоже.
Кнопка для вставки </>
<html>
<head>
<title>Испытание 1: красивая форма</title>
<meta charset="utf-8">
</head>
<body>
<div class='form1'>
<form class="login-form" action="/auth" method="post">
<span class='enter'> Вход в кабинет </span>
<p>
<input type="text" name="login" value="Логин" id='login'>
<p>
<input type="text" name="password" value="Пароль" id='password'>
<p>
<input type="checkbox" id='memory'>
<label for="memory">Запомните меня</label>
<span class='forget-pass'> Я забыл пароль </span>
<p>
<input type="submit" value="Войти" id='enter'>
</form>
</div>
</body>
</html>Из HTML-кода уберите параграфы.
Переход на новую строку делается с помощью <br>, отступы между элементами с помошью свойства margin. Размеры полей задаются с помощью свойств width и padding. Значения полей ввода сделаны с помощью placeholder.
“Я забыл пароль” - это ссылка.
Размеры кнопки тоже можно задать с помощью width и height.
Без кода не разобраться…
<body>
<form class="login-form" action="/auth" method="post">
<h3> ВХОД В КАБИНЕТ</h3>
<input type="text" name="login" id="login" placeholder="Логин"></input> <br>
<input type="password" name="password" id="password" placeholder="Пароль"></input>
<a href="#" class="ahref">Я ЗАБЫЛ ПАРОЛЬ </a><br>
<label class="forgot"><input type="checkbox" name="foghot" id="foghot"> ЗАПОМНИТЕ МЕНЯ</input></label>
<input type=SUBMIT value=ВОЙТИ></input>
</form>
</body>
css
html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:300px;
padding-top:20px;
font-size:16px;
font-family:“Tahoma”, sans-serif;
line-height:1.3;
background:#34495e;
}
.login-form{
background-color: white;
width: 320px;
height: 230px;
margin: 0px 33px;
padding: 10px 30px 30px 30px;
}
.login-form,
.login-form input[type=“text”],
.login-form input[type=“password”],
.login-form input[type=“submit”]{
font-weight:bold;
font-size:12px;
font-family:“Tahoma”, sans-serif;
text-transform:uppercase;
border: 2px solid #000;
}
.login-form input[type=“text”],
.login-form input[type=“password”]{
padding: 10px 150px 10px 15px;
margin-bottom: 10px;
margin-left: 10px;
color:#aeadab;
}
.login-form input[type=“text”]{
background: #f9f6f3 url("/assets/ifmo/icon-user.png") no-repeat 270px 10px;
}
.login-form input[type=“password”]{
background: #f9f6f3 url("/assets/ifmo/icon-lock.png") no-repeat 270px 10px;
}
.ahref {
color: #000;
font-weight: bold;
font-size: 12px;
/display: inline-block;/
position: absolute;
left: 263px;
top: 186px;
}
.login-form input[type=“checkbox”]{
margin-left: 13px;
vertical-align:middle;
margin-right:5px;
}
label {
display: inline;
color: #000;
font-weight: bold;
font-size: 12px;
}
.login-form input[type=“submit”]{
background: #000;
color: white;
padding: 13px 127px;
margin-top: 10px;
margin-left: 10px;
}
h3{
padding-left: 10px;
font-size: 20px;
margin-bottom: 5px;
}
Вот код)
Вы наверное не смотрели на вкладку “Различия”. И то что поля не той ширины - это далеко не всё. Ни один элемент не стоит на своем месте…
Начать наверное стоит с HTML-кода. Все форматирование текста должно быть сделано в CSS. Все слова пишутся одинаково, маленькими буквами.
Заглавными они становятся с помощью свойства text-transform.
Ваша форма почему-то получилась в черной рамке, хотя в образце ее нет.
Размеры полей состоят только из внутренних отступов. Поэтому в некоторых случаях они слишком большие.
Размеры полей делайте с использованием width и padding.
Определяя отступы между элементами, пользуйтесь образцом и вкладкой “Различия”.
на фото это то, что я сделала и то как оно выглядит. для того что бы добиться результата я исказила свой. text-transform я применила но не добилась что бы мой пример отображался как надо. у рамку я убрала также ничего не добилась. не отображается мой реальный результат
Не надо искажать свой код. Если результат в мини-браузере и тот, что попадает на сервер, различаются то попробуйте выполнить задание в другом браузере.