发表于： 2016-11-19 22:12:54
3 951
今天完成的事情：写了下task4,电脑端还算正常,可是....手机端..就...
明天计划的事情：继续修改task4 可是我不知道该怎么修改啊..
明天计划的事情：继续修改task4 可是我不知道该怎么修改啊..
遇到的问题：手机页面蹦了..实在是不知道怎么改..问题挺多,感觉打字说不清楚.
收获：学会了用margin之间的布局关系..
还有rem.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>登陆</title>
<style type="text/css">
body{
background:#eff0f4;
font-family:Arial;
color:white;
margin:0;
padding:0;
}
a:link{color:white;text-decoration: none}
img{
width:auto;
height:auto;
max-width:100%;
max-height:100%;-ms-interpolation-mode:bicubic;
}
.top{
background-color:#5fc0cd;
width:100%;
height: 4rem;
}
.close{
width:31%;
margin:1rem 1% 1rem 1%;
float:left;
font-size:1.5rem;
}
.login{width:31%;
margin: 1rem 2% 1rem 1%;
float:left;
text-align: center;
font-size: 2rem;
}
.signup{
float:right;
margin:1rem 1% 1rem 1%;
font-size: 1.5rem;
}
.box1{
background-color: white;
margin:2% 0;
padding:2% 0;
width:100%;
}
.phone {
float:left;
padding-left:2%;
}
.ban{float:left;
padding-left:5%;
}
.input{
border: none;
padding-left: 3%;
font-size: 200%;
color:#bababa;
width:80%;
}
.signin{
width:100%;
text-align: center;
vertical-align: middle;
background-color: #5fc0cd;
border-radius:0.5rem;
padding-bottom: 1%;
padding-bottom: 1%;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="top">
<div class="close"><a href="javascript:window.close();">Close</a></div>
<div class="login">Login</div>
<div class="signup"><a href="javascript:window.open('http://jnshu.com/#/login/1/','_blank');">SignUp</a></div>
</div>
<div class="box1">
<div class="phone"><img src="phone_06.png"></div>
<div class="ban"><img src="ban_03.png" ></div>
<input class="input" type="text" placeholder="Please enter your phone number">
</div>
<div class="box1">
<div class="phone"><img src="lock_11.png"></div>
<div class="ban"><img src="ban_03.png" ></div>
<input class="input" type="text" placeholder="Please enter your Password">
</div>
<div class="signin">Sign In</div>
</body>
</html>
返回列表
评论