<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>京东登录页面</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#top,#middle,#footer{
width: 100%;
}
#top{
height:120px;
background-color: white;
}
#middle{
height: 475px;
background-color: #0D264E;
position: relative;
top: -7px;
}
#footer{
height: 380px;
background-color: white;
}
/* 网页顶部 */
#top1,#top2{
height:70px;
width: 50%;
float: left;
background-color: #ffffff;
}
#top3{
background-color: #fff8f0;
height: 40px;
}
#top1 #topimg1{
padding-left: 480px;
}
#top2 #topimg2{
padding-top: 35px;
padding-left: 390px;
}
#top2 a{
font-size: 14px;
}
#top2 a:link{
color: grey;
text-decoration: none;
}
#top3{
text-align: center;
}
#top3 font{
color: grey;
font-size: 12px;
position: absolute;
top: 12px;
left: 610px;
}
#top3 img{
position: absolute;
top: 9px;
left: 580px;
}
#top3 a:link{
color: black;
text-decoration: none;
}
/* 网页中部 */
#middle1,#middle2{
height: 475px;
width: 50%;
float: left;
}
#middle1 img{
margin-left: 500px;
}
#logoin{
height: 400px;
width: 380px;
background-color: #ffffff;
margin-top: 15px;
margin-left: 150px;
}
#notice{
background-color: #fff8f0;
height: 40px;
font-size: 14px;
color: gray;
width: 380px;
}
#a,#b{
height: 32px;
width: 280px;
}
#middle2_0{
height: 50px;
width: 380px;
}
#middle2_1,#middle2_2{
width: 185px;
}
#middle2_3{
width: 10px;
overflow: hidden;
}
#middle2_1,#middle2_2,#middle2_3{
float: left;
font-size: 22px;
text-align: center;
margin-top: 10px;
}
#middle2_1,#middle2_3{
color: gray;
}
#middle2_2{
color: red;
}
#logoin-f1,#logoin-f2,#logoin-f3,#logoin-f4{
float: left;
padding-top:12px;
padding-left:20px;
}
#logoin-f1,#logoin-f2,#logoin-f3,#logoin-f4 span{
font-size: 14px;
}
</style>
</head>
<body>
<!-- 网页顶部 -->
<div id="top" class="" style="overflow: hidden;">
<div id="top1">
<img src="img/logo.png" id="topimg1"><img src="img/l-icon.png" >
</div>
<div id="top2">
<img src="img/q-icon.png" id="topimg2"><a href="www.">登录页面,调查问卷</a>
</div>
<div id="" style="clear: both;">
</div>
<div id="top3" style="position: relative;">
<div><img src="img/warning.png" ></div>
<div><font>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="www.">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</font></div>
</div>
</div>
<!-- 网页中部 -->
<div id="middle" class="">
<div id="middle1">
<img src="img/bgimg.png" >
</div>
<div id="middle2">
<div id="logoin">
<div style="width: 380px; background-color:#fff8f0 ;height: 40px; position: relative;">
<div><img src="img/warning.png" style="position: absolute; top: 7px;left: 20px;"></div>
<div><font style="font-size: 12px; color: gray;position: absolute; top: 11px; left: 49px;">京东不会以任何理由要求您转账汇款，谨防诈骗</font></div>
</div>
<div id="" style="border: 1px; border-color: #000000; height: 310px; width: 380; background-color: #ffffff;">
<div id="middle2_0">
<div id="middle2_1">扫码登录</div><div id="middle2_3">|</div><div id="middle2_2">账号登录</div>
</div>
<hr style="background-color:lightgrey;height:1px;border:none;">
<div style="position: relative;">
<form action="" method="get">
<table border="0" cellspacing="" cellpadding="">
<tr>
<td><div style="position: absolute; top: 30px; left: 30px;"><img src="img/pygame.png" ></div></td>
<td><div style="position: absolute; top: 28px; left: 67px; line-height:37px ;"><input type="text" name="username" placeholder="邮箱/用户名/已验证手机"style="line-height:33px ; width: 280px;"/></div></td>
</tr>
<tr>
<td><div style="position: absolute; top: 80px; left: 30px;"><img src="img/password_icon.png" ></div></td>
<td><div style="position: absolute; top: 80px; left: 67px; "><input type="password" name="psw" placeholder="密码" style="line-height:33px ;width: 280px;"/></div></td>
</tr>
<tr>
<td><div style="width: 380px; font-size: 12px; color: grey; text-align: right;position: absolute; top:130px; right: 31px;">忘记密码</div></td>
</tr>
<tr>
<td><button type="button" style="width: 320px;height: 35px;position: relative;top: 180px; left: 30px; font-size: 20px; background-color: #e4393c; color: white; border: none;">登 录</button></td>
</tr>
</table>
</form>
</div>
</div>
<div style="height: 50px; width: 380px; background-color: #fcfcfc; border-top-color: gray;">
<div id="logoin-f1"><img src="img/qq.png" ><span style="display: inline-block; position:relative; top:-6px;">QQ</span></div>
<div id="logoin-f2"><span>|</span></div>
<div id="logoin-f3"><img src="img/weixin.png" ><span style="display: inline-block; position:relative; top:-6px;">微信</span></div>
<div id="logoin-f4" style="position: relative;left: 90px;"><img src="img/right.png" ><span style="display: inline-block; position:relative; top:-6px;">立即注册</span></div>
</div>
</div>
</div>
</div>
<!-- 网页底部 -->
<div id="footer" class="" style="text-align: center; font-size: 14px; color: blackgray; padding-top:15px;">
<p>关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 京东公益 | English Site</p>
<p style="margin-top: 7px;">Copyright © 2004-2019 京东JD.com 版权所有</p>
</div>
</body>
</html>
1.png
