1. 效果图
image.png
2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/ico" href="img/jd_logo.ico" />
<title>京东-欢迎登录</title>
<style type="text/css">
#box {
text-align: center;
}
#idpa{
margin-top: 30px;
}
#button{
width: 200px;
height: 30px;
background-color: red;
border: 0;
}
.p1{
position: absolute;
left: 250px;
bottom: 50px;
}
.p2{
position: absolute;
left: 500px;
bottom: 30px;
}
</style>
</head>
<body>
<div style="height: 100px;">
<img src="img/logo.png" width="170" height="60" style="position: absolute; top: 30px; left: 200px;"/>
<img src="img/l-icon.png" width="110" height="40" style="position: absolute; top: 50px; left: 370px;"/>
<span style="position: absolute; right: 250px; top: 80px;"><img src="img/q-icon.png" />登录页面，调查问卷</span>
</div>
<div id="box" style="background-color: papayawhip; float: left; height: 50px; width: 100%;">
<p color="rgb(150,150,150)"><img src="img/warning.png"/> 依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</p>
</div>
<div style="background-image: url(img/bg.png); width: 100%; height: 500px; float:left; position: relative;">
<!--<img src="img/bg.png" style="width: 100%" style="float: left;"/>-->
<div id="box" style="font-size: 12px;display: inline-block; background-color: papayawhip; width: 400px; height: 40px; position: absolute; right: 100px; top: 20px;">
<p><img src="img/warning.png"/>京东不会以任何理由要求您转账汇款，谨防诈骗。</p>
</div>
<div style="position: relative; border-bottom:1px solid red;background-color: red; font-size: 24px; display: inline-block; background-color: white; width: 400px; height: 40px; position: absolute; right: 100px; top: 60px;">
<span style="border-bottom:1px solid rgb(150,150,150); display: inline-block; width: 200px; position: absolute; left:60px;">扫码登录 | </span><span style="position: absolute; left: 200px; border-bottom:1px solid rgb(150,150,150); display: inline-block; width: 200px; color:red;">账户登录</span>
</div>
<div style="display: inline-block; background-color: white; width: 400px; height: 300px; position: absolute; right: 100px; top: 100px;">
<div id="idpa" style="position: absolute; left: 100px;" align="center">
<img src="img/pygame.png" width="24" height="24"/><input style="height: 20px;" name="id" value="" placeholder="邮箱/用户名/已验证手机"/><br />
<img src="img/password_icon.png" width="24" height="24"/><input style="height: 20px;" name="id" value="" placeholder="密码"/>
</div>
</div>
<div style="display: inline-block; background-color: white; width: 400px; height: 20px; position: absolute; right: 100px; top: 200px;">
<span style="position: absolute; right: 6px;">
<a href="https://aq.jd.com/process/findPwd?s=1">忘记密码</a>
</span>
</div>
<div style="display: inline-block; background-color: white; width: 400px; height: 20px; position: absolute; right: 100px; top: 230px;">
<button id="button" style="position: absolute; left: 100px;">登录</button>
</div>
<div style="display: inline-block; background-color: white; width: 400px; height: 20px; position: absolute; right: 100px; top: 350px;">
<span>
<img src="img/qq.png" width="30" height="30"/>
<span> | </span>
<img src="img/weixin.png" width="30" height="30"/>
</span>
<span style="position: absolute; right: 20px;">
<img src="img/right.png" width="30" height="30"/>
<a href="https://reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com">立即注册</a>
</span>
</div>
</div>
<div id="box" style="float: left;">
<p class="p1">关于我们 | 联系我们 | 人才招聘 | 商家入驻 | 广告服务 | 手机京东 | 友情链接 | 销售联盟 | 京东社区 | 京东公益 | English Site</p>
<p class="p2">Copyright © 2004-2019 京东JD.com 版权所有</p>
</div>
</body>
</html>
