jd.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>京东</title>
<link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
<style>
#div1{
height:120px;
}
#div2{
position: relative;
height: 475px;
background-image: url(img/bg.png);
}
#div3{
height: 205px;
background-color: yellow;
position: relative;
}
#div11{
position: relative;
height: 80px;
}
#div12{
height: 40px;
background-color:#FDF5E6;
font-size:10px;
position: relative;
}
#div21{
height: 400px;
width: 340px;
background-color: white;
position: absolute;
left: 790px;
top: 10px;
}
#div111{
position: absolute;
left: 135px;
top: 5px;
}
#div112{
position: absolute;
left: 1000px;
top: 50px;
font-size: 10px;
}
#div122{
width: 100%;
height: 40px;
display: flex;
align-items: center;
position: absolute;
left: 263px;
}
#div211{
width: 100%;
height: 45px;
background-color:#FDF5E6;
}
#div2111{
height: 45px;
display: flex;
align-items: center;
font-size: 10px;
position: absolute;
left:23px
}
.c1{
height: 52px;
display: flex;
align-items: center;
font-size: 20px;
position: absolute;
left:45px
}
#div2131{
height:37px;
width:302px;
position:absolute;
left:20px;
top: 128px;
}
#div2132{
height:37px;
width:302px;
position:absolute;
left:20px;
top: 188px;
}
#div21311{
height:33px;
width:252px;
position:absolute;
left:38px;
top: 0px;
padding-left: 10px;
}
#div21321{
height:33px;
width:252px;
position:absolute;
left:38px;
top: 0px;
padding-left: 10px;
}
#div214{
font-size:10px;
position: absolute;
left: 273px;
top: 246px;
}
#div2151{
height: 40px;
width: 300px;
font-size:20px;
position: absolute;
left: 20px;
top: 294px;
background-color: #EE4000;
}
#div216{
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgb(230,230,230);
font-size:5px;
}
.c311{
float: left;
margin-left: 220px;
margin-top:20px;
}
.c312{
float: left;
margin-left: 20px;
margin-top:20px;
padding-left: 10px;
border-left:1px solid black;
}
#div32{
position: absolute;
top:50px;
left: 510px;
font-size:10px
}
#es1:hover{
color: red;
}
#es2:hover{
color: red;
}
a{
text-decoration:none
}
</style>
</head>
<body>
<div id="div1">
<div id="div11">
<div id="div111">
<img src="img/logo.png"/>
<img style="margin-left: 10px;" src="img/l-icon.png"/>
</div>
<div id="div112">
<img src="img/q-icon.png"/>
<a target="_blank" href="https://surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans">
登录页面，调查问卷
</a>
</div>
</div>
<div id="div12">
<div id="div122">
<img src="img/warning.png"/>
<font>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版</font>
<a target="_blank" href="https://about.jd.com/privacy/">《京东隐私政策》</a>
<font>已上线，将更有利于保护您的个人隐私。</font>
</div>
</div>
</div>
<div id="div2">
<div id="div21">
<div id="div211">
<div id="div2111">
<img src="img/warning.png"/>
京东不会以任何理由要求您转账汇款，谨防诈骗。
</div>
</div>
<div id="div212" style="height: 52px;border-bottom: 1px solid #FFF0F5">
<div id="2121" style="position:relative;width: 50%;height: 52px;float: right;">
<div id='es1' class="c1">
<a href="#">扫码登录</a>
</div>
</div>
<div id="2122" style="position:relative;width: 50%;height: 52px;float: right;">
<div id='es2' class="c1">
<a href="#">账户登录</a>
</div>
</div>
</div>
<div id="div213">
<form action="" method="get">
<div id="div2131">
<img style="border: 1px solid burlywood;" src="img/pygame.png"/>
<input id="div21311" type="text" name='用户名' value="" placeholder="邮箱/用户名/已验证手机"/>
</div>
<div id="div2132">
<img style="border: 1px solid burlywood;" src="img/password_icon.png"/>
<input id="div21321" type="password" name='密码' value="" placeholder="密码"/>
</div>
</form>
</div>
<div id="div214">
<a href="https://aq.jd.com/process/findPwd?s=1">忘记密码</a>
</div>
<div id="div215">
<button id="div2151">登 录</button>
</div>
<div id="div216">
<div style="height: 50px;display: flex;align-items: center;position:absolute; left:20px;">
<img src="img/qq.png"/>
</div>
<div id="" style="height: 50px;display: flex;align-items: center;position:absolute; left:45px;">
<a id="qq" href="#">QQ</a>
</div>
<div style="height: 50px;display: flex;align-items: center;position:absolute; left:90px;">
<img src="img/weixin.png"/>
</div>
<div id="" style="height: 50px;display: flex;align-items: center;position:absolute; left:115px;">
<a id='wx' href="#">微信</a>
</div>
<div id="" style="height: 50px;display: flex;align-items: center;position:absolute; right:75px;">
<img src="img/right.png"/>
</div>
<div id="" style="height: 50px;display: flex;align-items: center;position:absolute; right:25px;">
<a style="color: red;" href="#">立即注册</a>
</div>
</div>
</div>
</div>
<div id="div3" style="font-size: 10px;">
<div id="31">
<div class="c311"><a href="#">关于我们</a></div>
<div class="c312"><a href="#">联系我们</a></div>
<div class="c312"><a href="#">人才招聘</a></div>
<div class="c312"><a href="#">商家入驻</a></div>
<div class="c312"><a href="#">广告服务</a></div>
<div class="c312"><a href="#">手机京东</a></div>
<div class="c312"><a href="#">友情链接</a></div>
<div class="c312"><a href="#">销售联盟</a></div>
<div class="c312"><a href="#">京东社区</a></div>
<div class="c312"><a href="#">京东公益</a></div>
<div class="c312"><a href="#">English Site</a></div>
</div>
<div id="div32">
Copyright © 2004-2019 京东JD.com 版权所有
</div>
</div>
</body>
</html>
