*{padding: 0;
margin: 0;}
.header{background-color: #FFFFFF;
margin-top: 0;
width: 100%;
height:120px ;
display: flow-root;
padding: 20px;
border: 1px solid#F8F8F8 ;}
.logobox{height: 81px;
width:248px ;
margin-right:428px ;
margin-top:13px;
margin-bottom: 35px;
}
#righthead{width: 607px;
height: 67px;
margin: 13px 324px;
float: right;}
#righthead>li img{width:59px ;
height: 51px;}
#righthead>li{display:inline}
#right::after{content: '';
display: block;
clear: both;}
.middle{width: 100%;
height: 100%;
background-color:#F8F8F8 ;
}
.middle
.chart{height: 282px;
width: 492px;
margin: 247px 247px 241px 315px;
}
.loginform{height: 391px;width: 435px;
margin:135px 314px 209px 247px;
border: 2px solid rgb(138, 136, 136);
text-align: center;
}
.loc{width: 339px; height: 58px; background-color: red;}
.font{font-size: x-small;
color: gray;}
```html
<body >
<div class="header">
<div class="logobox">
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\考拉logo.png" alt="考拉">
<a href="#"></a>
</div><!--第二层-->
<div>
<ul id="righthead">
<li> <img src="C:\Users\杨云飞飞\Desktop\yyf\image\tuihuo.png" >30天无忧退货</li>
<li><img src="C:\Users\杨云飞飞\Desktop\yyf\image\feiji.png"> 100%全球优选</li>
<li> <img src="C:\Users\杨云飞飞\Desktop\yyf\image\zheng.png" >正品保证</li>
</ul>
</div><!--第二层-->
</div><!--第一层-->
<div class="middle">
<div>
<div class="chart">
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\正品图.png" alt="">
</div><!--第三层-->
<div class="loginform">
<form name="loginform" action="" method="post" >
<h2 class="title">手机号登录</h2>
<h6 class="otherlogin">使用密码验证登录</h6>
<div class="tell">
<input type="tel" maxlength="11" autofocus placeholder="请输入手机号" required ></div>
<div class="test">
<input type="text" placeholder="请输入验证码" required name="test"><br/>
<input class="logc" type="submit" name="login" value="登录" ><br/>
<div class="font" >注册/登录代表同一隐私政策和服务条款</div>
</form>
<div><img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-tao.png" >
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-zhi.png" >
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-wei.png" >
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-xin.png" >
<img src="C:\Users\杨云飞飞\Desktop\yyf\image\icon-wang.png" >
</div>
<div class="regist">
<!-- a标签表示链接 ，用于页面跳转-->
<a href="password.html">找回密码</a>
</div>
</div><!--第三层登录表单-->
</div><!--第二层-->
<div></div><!--第二层-->
</div><!--第一层-->
```
