<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
font-family: 微软雅黑;
font-size: 16px;
color: #707070;
}
#middle{
background-image: url(img/bg.png);
height: 476px;
}
#img1{
margin:30px auto 0 auto;
}
#img2{
margin-left: 15px;
}
#top1{
text-align:left;
padding-bottom:0;
}
.img3{
margin: 0 auto 0 900px;
}
.p1{
margin-right: 10px;
}
.font1{
font-size: 15px;
display: inline-block;
margin:0;
}
.font2{
margin-left: 290px;
}
.font3{
}
.img4{
margin: 15px auto 0 200px;
/*padding-top: 20px;*/
}
.img5{
margin: 8px auto auto 25px;
}
#div1{
width: 380px;
height: 400px;
background-color: white;
margin: 10px 30px auto auto;
float: right;
}
#div11{
width: 380px;
height: 40px;
background-color: papayawhip;
}
#div14{
background-color: #EEEEEE;
height: 60px;
}
.table1{
/*border-bottom: 2px;*/
width: 380px;
height: 50px;
/*border-bottom-color: red;*/
border:1px solid #eee
/*border="1" cellspacing="0" cellpadding="0" width="380" height="50"*/
}
.td1{
font-size: 25px;
font-family: "微软雅黑";
}
.input1{
margin-left: 40px;
background-color: firebrick;
}
.login-btn{
height: 32px;
background-color: red;
/*margin-top: 30px;*/
width: 100%;
}
.login-btn a{
color: #FFFFFF;
text-align: center;
display: block;
padding-top: 2px;
/*vertical-align: middle;*/
height: 32px;
font-size: 20px;
}
ul{
list-style: none;
margin: 0;
padding: 0;
/*padding-top: 15px;*/
}
</style>
</head>
<body>
<div id="top" style="background-color: white; height: 150px;">
<div id="top1" style="height: 100px; padding-left: 20px;">
<span id="">
<img id="img1" src="img/logo.png"/>
</span>
<span id="">
<img id="img2" src="img/l-icon.png"/>
</span>
<img class="img3" src="img/q-icon.png" />
<font style="font-size: 15px; margin:auto 10px 10px auto">登录页面,调查问卷</font>
</div>
<div id="top2" style="background-color: bisque; height: 50px;background-color:papayawhip;">
<img class="img4" src="img/warning.png" />
<font class="font1">依据《网络安全法》,为保障您的账户安全和正常使用,请尽快完成手机号验证! 新版<a href="https://about.jd.com/privacy/" target="_blank">《京东隐私政策》</a>已上线,将更有利于保护您的个人隐私。</font>
</div>
</div>
<div id="middle" style="background-color: chartreuse; ">
<div id="div1">
<div id="div11">
<img class="img5" src="img/warning.png"/>
<font class="font1" style="">京东不会以任何理由要求您转账汇款,谨防诈骗</font>
</div>
<div id="div12">
<table class="table1">
<tr align="center">
<td class="td1">扫码登录</td>
<td class="td1" style="color: red;">账户登录</td>
</tr>
</table>
</div>
<!-- form -->
<form>
<div class="h252 pl20 pr20">
<div class="w100p">
<div class="h40 center">
<div class="warning fs10 color-r"></div>
</div>
</div>
<div class="w100p">
<div class="h50 center">
<label for="username" id="username" class="itxt-icon"><img src="img/pygame.png"></label>
<input placeholder="邮箱/用户名/已验证手机" id="username" class="itxt" type="text" name="username" autocomplete="off">
</div>
</div>
<div class="w100p">
<div class="h50 center pt10">
<label for="password" id="password" class="itxt-icon"><img src="img/password_icon.png"></label>
<input placeholder="密码" id="password" class="itxt" type="password" name="password" autocomplete="off">
</div>
</div>
<div class="w100p">
<div class="h32 right-link">
<div class="fr fs10 pt10"><a href="">忘记密码</a></div>
</div>
</div>
<div class="w100p">
<div class="h50 center">
<div class="login-btn"><a href="">登 录</a></div>
</div>
</div>
</div>
</form>
<div class="w90p">
<div class="login-plus h50 pt15">
<ul>
<li class="fl fs20 mr10"><img src="img/qq.png"/>QQ</li>
<li class="fl fs20 mr10">|</li>
<li class="fl fs20 mr10"><img src="img/weixin.png"/>微信</li>
<li class="fr fs20 color-r"><img src="img/right.png"/>立即注册</li>
</ul>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="w">
<div class="footer">
<div class="pt15 fs10 center">
<a href="">关于我们</a> <span>|</span>
<a href="">联系我们</a> <span>|</span>
<a href="">人才招聘</a> <span>|</span>
<a href="">商家入驻</a> <span>|</span>
<a href="">广告服务</a> <span>|</span>
<a href="">手机京东</a> <span>|</span>
<a href="">友情链接</a> <span>|</span>
<a href="">销售联盟</a> <span>|</span>
<a href="">京东社区</a> <span>|</span>
<a href="">京东公益</a> <span>|</span>
<a href="">English Site</a>
</div>
</div>
</div>
</body>
</html>

jd.png