发表于： 2016-10-28 21:52:16
1 618
今天任务四做的很烂，主要是不能自适应，请各位路过的师兄帮忙看下
<!DOCTYPE html>
<html lang="en" style="font-size: 20px;>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>T4</title>
<style>
body{
font-size: 62.5%;
width:100%;
padding: 0;
margin:0;
color: white;
background-color: gainsboro;
}
header{
width:100%;
background-color: #5fc0cd;
overflow: hidden;
}
.close{
width:25%;
float:left;
text-align: left;
margin-left: 5%;
font-size: 0.8rem;
margin-top: 1rem;
}
.tittle{
width:40%;
text-align: center;
float: left;
font-size: 1rem;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.register {
width: 25%;
text-align: right;
float: right;
margin-right: 5%;
font-size: 0.8rem;
margin-top: 1rem;
}
#login{
display: block;
background-color: #5fc0cd;
width: 100%;
border: 0;
padding: 0.4rem;
font-size: 1rem;
color: white;
}
.heip{
color: #5fc0cd;
font-size: 0.5rem;
float: right;
margin: 0.5rem;
}
.user{
display: inline-block;
width: 100%;
background-color: white;
margin-top: 1rem;
}
.icon{
width: 4rem;
height: 4rem;
margin: 1rem 0;
float: left;
}
input{
width: 20rem;
height: 4rem;
border: none;
border-left:solid 0.2rem gainsboro;
float: left;
margin-top: 1rem;
font-size: 1.5rem;
}
</style>
</head>
<body>
<header>
<p class="close">关闭</p>
<p class="tittle">登录</p>
<p class="register">注册</p>
</header>
<form method="post">
<label class="user">
<img class="icon" src="phone.png">
<input type="text" placeholder="请输入手机号">
</label>
</br>
<label class="user">
<img class="icon" src="lock.png">
<input type="password" placeholder="请输入密码">
</label>
</form>
<input id="login" type="submit"value="登录">
<a herf="" class="heip">忘记密码？</a>
</body>
</html>
返回列表
评论