head布局思路
以前的话，任务一到任务三都是用盒子来做出任务效果，到了任务四，虽然用四个盒子也能做好效果，但是只是单纯给人看，不能电击，完全找不到搜索方向?
代码
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<head>
<meta charset="UTF-8">
<title>登陆</title>
<style type="text/css">
*{
margin: 0;
}
body{
background: #eff0f4;
}
.box1{
font-family:"黑体";
font-size: 16px;
color: white;
line-height: 45px;
height: 45px;
width: 20%;
background-color: #66cccc;
text-align: center;
float: left;
}
.box2{
font-family: "黑体";
font-size: 16px;
color: white;
line-height: 45px;
height: 45px;
width: 60%;
background-color: #66cccc;
text-align: center;
float: left;
}
.box3{
font-family:"黑体";
font-size: 16px;
color: white;
line-height: 45px;
height: 45px;
width: 20%;
background-color: #66cccc;
text-align: center;
float: right;
}
.box4{
height: 45px;
width: 100%;
margin: 8px 0 0 0;
float: left;
background-color: white;
}
.box5{
height: 30px;
width: 20%;
border-right: 1px solid #66cccc;
float: left;
text-align: center;
margin: 0.469em 0;
}
.box6{
outline: none;
height: 100%;
border: white;
width: 79%;
float: right;
margin: 3px 0 0 0;
}
.box7 {
height: 45px;
width: 100%;
margin: 8px 0 0 0;
float: left;
background-color: white;
}
.box8{
height: 30px;
width: 20%;
border-right: 1px solid #66cccc;
float: left;
text-align: center;
margin: 0.469em 0;
}
.box9{
outline: none;
height: 100%;
width: 79%;
float: right;
margin: 3px 0 0 0;
}
.box10{
width: 65px;
height: 20px;
margin: 10px 10px;
float: right;
}
input{
width: 90%;
height: 81%;
font-size: 17px;
outline: none;
border: none;
padding-left: 20px;
}
a:link{
a{
color: #66cccc;
}
}
</style>
</head>
<body>
<header></header>
<main></main>
<footer></footer>
<div class="box1">注册</div>
<div class="box2">登陆</div>
<div class="box3">关闭</div>
<div class="box4">
<div class="box5"><img src="image/ipone.png" width="20px" height="30px"></div>
<div class="box6"><input type="text" maxlength="8" style="height: 80%" placeholder="请输入手机号"></div>
</div>
<div class="box7">
<div class="box8"><img src="image/suo.png"width="20px" height="30px"> </div>
<div class="box9"><input type="text" maxlength="8" style="height: 80%" placeholder="请输入密码"></div>
</div>
<div class="box10"> <a href="http://htmlpreview.github.io/?https://github.com/1947324563/start-a-project/blob/9c4c050c56913cd7811e59b62eaf42e5ef73c043/%E4%B9%9D%E5%AE%AB%E6%A0%BC.html"><p><span id="#66cccc">忘记密码</span></p></a></div>
</body>
</html>
武汉分院|真传弟子] JS-关楠
这个。。class的起名，不要这种box1、box2...你想想以后你在看你的代码的时候，一眼都是box，想找一个要对半天，去看一下比较常用的命名规范；
还有就是不太懂你说的，任务4其实就是给人看的么，最多就是input输入些东西，a标签点点跳转什么的，前期只要把样子做好就是你的任务，至于交互什么的现在不用考虑
上海分院|荣耀师兄] JS-杨亚洲
看了半天我大概理解了你的意思，你说的点击效果是吧，主要指的是JS交互效果，现在还没有学到，别着急后面有的。
1、不得不佩服你的命名方式。学学css规范吧。
2、
官网从css任务一就开始，要求使用外联的css,你不仅有有内联的样式，居然还有行内样式。
maxlength:8，难道手机号只有8位，难道不是11位？这里的type可以使用number
下面的输入框要用，type=password.啊。
3、老铁，学习不能好高骛远啊，你看看你写的代码？还是脚踏实地学好基础吧