发表于： 2017-03-07 22:55:44
2 569
今天完成的事：
任务4只差最后一步了，把header做好了，footer只要做个按钮，主要就剩下mainbody的input表单了。在header中添加颜色，高度，居中，字体大小颜色之后，用span把文字进行组合，再分别添加左右浮动就可以了。
明天计划的事：
把mainbody的的表单做完。学习任务5。
问题:
主要是input表单的制作，还在琢磨中。按钮的话在看穆克网的视频。
收获：
尝试了header标签的用法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录页</title>
<style type="text/css">
html{font-size: 62.5%;}
body{margin-top: 0;background: #EFF0F4;}
.header{
background: #68cdd5;
height: 10rem;
text-align: center;
line-height: 10rem;
color: white;
font-size: 2rem;
}
.mainbody{
height: 30rem;
}
.footer{background: #68cdd5;
height: 100px;
text-align: center;
line-height: 10rem;
color: white;
font-size: 2rem;
}
.abc{color: #68cdd5;
float: right;
font-size: 2rem;
padding-right: 5%;
}
.left{
float: left;
padding-left: 5%;
}
.right{
float: right;
padding-right: 5%;
}
img{
max-width: 100%;
max-height: 100%;
}
input{
height: 6rem;
width: 100%;
}
</style>
</head>
<body>
<div class="header">
<span class="left">注册</span>
<span class="center">登录</span>
<span class="right">关闭</span>
</div>
</br>
<div class="mainbody">
<img src="iphone.png"><img src="1.png"><input type="text" placeholder="请输入手机号">
</br>
<img src="locked.png"><img src="2.png"><input type="text" placeholder="请输入密码">
</br>
</div>
<div class="footer">
<input type="button" value="登录">
</div>
</br>
<div class="abc"><u>忘记密码？</u></div>
</body>
</html>
返回列表
评论