发表于： 2016-10-04 23:18:44
2 1090
完成任务四。花了点时间。
主要是input的width花了点时间，到最后，input 输入框也没有填满，主要是div里要先放两个图片，然后页面要自适应的情况下，input的width要自适应就比较麻烦了。其实直接吧input用display弄成block是个好主意，但我不喜欢用很多div的样子= = 难受。
手机端：
可以看到 登陆的按钮有边框属性，以为是 input直接 display为block的。
PC端效果图：
如果点进去输入手机号或者密码时候，还是能看到input的区域的宽和高，有点遗憾。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>task 04</title>
<meta name="viewport" content="width=device-width, intial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<link rel="stylesheet" href="04.css">
</head>
<body>
<header>
<div id="close_btn">关闭</div>
<div id="login">登陆</div>
<div id="register">注册</div>
</header>
<section>
<form action="" method="post">
<div>
<img src="iphone.png" alt="phone"><img src="feng.png" alt="feng">
<input type="number" name="phone_number" maxlength="11" placeholder="请输入手机号" required></input>
</div>
<div>
<img src="locked.png" alt="phone"><img src="feng.png" alt="feng">
<input type="password" name="password" placeholder="请输入密码" required></input>
</div>
<input id="login_btn" type="submit" value="登陆"></input>
</form>
<p>忘记密码？</p>
</section>
</body>
</html>
css代码： class 还是起的非常差劲。还是没有优化css写的顺序。= =
margin:0;
}
color:white;
font-size:32px;
text-align:left;
background-color:#eff0f4;
}
background-color:#5fc0cd;
height:88px;
padding: 0 28px;
}
#close_btn , #login , #register{
float:left;
width:33%;
line-height:88px;
}
#login {
text-align:center;
font-size:36px;
}
#register{
text-align:right;
}
padding-top:1px;
}
div.in {
background-color:white;
margin:15px 0;
line-height:88px;
}
div.in img{
vertical-align:middle;
}
div.in img.lpng{
padding:0 40px;
}
input.input {
display:inline-block;
width:70%;
border:none;
text-align:center;
font-size:32px;
}
#login_btn {
display:block;
background-color:#5fc0cd;
height:88px;
width:100%;
color:white;
font-size:36px;
}
p.forget{
margin-top:20px;
color:#5fc0cd;
text-align:right;
}
网址：http://thefang.applinzi.com/
代码：https://github.com/mrfangbin/task
返回列表
评论