<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 12px;
color: darkgrey;
}
a{
text-decoration: none;
}
a:hover{
color: #e4393c;
cursor: pointer;
text-decoration: underline;
}
.top{
position: relative;
height: 60px;
padding: 10px 220px;
}
#logo{
margin-right: 10px;
display: inline-block;
}
#login-q{
margin-top: 40px;
float: right;
}
.center{
height: 520px;
background-color: azure;
}
.center-top{
position: relative;
height: 40px;
background-color: floralwhite;
text-align: center;
}
.center-top div{
display: inline-block;
}
.content{
height: 480px;
background: url(img/bg.png);
}
.content .login-form{
width: 350px;
height: 390px;
float: right;
margin-top: 10px;
margin-right: 225px;
background-color: white;
}
.form-top{
position: relative;
height: 40px;
background-color: floralwhite;
text-align: center;
}
#form-option{
position: relative;
height: 55px;
text-align: center;
border-bottom: 1px solid #EEEEEE;
}
#form-option a{
text-align: center;
margin: 25px;
font-size: 18px;
vertical-align: middle;
color: black;
text-decoration: none;
}
#form-option a:hover{
color: #e4393c;
font-weight: bold;
}
#input-form{
position: relative;
}
#input-form div span{
position: absolute;
width: 37px;
height: 37px;
margin-left: 25px;
border: 1px solid #A9A9A9;
}
#input-form input{
margin-left: 63px;
height: 35px;
width: 246px;
display: block;
margin-bottom: 20px;
padding-left: 10px;
}
.form-bottom{
height: 50px;
bottom: 0;
background-color: #EEEEEE;
}
.footer{
text-align: center;
}
.footer div{
color: #000000;
}
.footer span{
margin: 8px;
}
.footer span a{
color: #000000;
}
.footer span a:hover{
text-decoration: underline;
color: #e4393c;
}
</style>
</head>
<body>
<div class="top">
<div id="logo"><img src="img/logo.png" /></div>
<img src="img/l-icon.png" />
<div id="login-q"><img src="img/q-icon.png" /><a href="#" style="margin-left: 5px;">登录页面，调查问卷</a> </div>
</div>
<div class="center">
<div class="center-top">
<div style="margin-top: 8px;">
<img src="img/warning.png" style="vertical-align: middle;"/>
</div>
<div style="margin-top: 8px;">
依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！
新版<a href="#" style="color: #000000;">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。
</div>
</div>
<div class="content">
<div class="login-form">
<div class="form-top">
<div style="display: inline-block; margin-top: 8px;">
<img src="img/warning.png" style="vertical-align: middle;"/>
</div>
<div style="display: inline-block; margin-top: 8px;">
京东不会以任何理由要求您转账汇款，谨防诈骗。
</div>
</div>
<div id="form-option">
<hr style="height: 15px; border: none;" />
<a href="#">扫码登录</a>
<span>|</span>
<a href="#" style="color: #e4393c; font-weight: bold;">账户登录</a>
</div>
<hr style="height: 35px; border: none;" />
<form id="input-form">
<div>
<span><img src="img/pygame.png" /></span>
<input type="text" id="" name="username" value="" placeholder="邮箱/用户名/已验证手机"/>
</div>
<div>
<span><img src="img/password_icon.png"/></span>
<input type="password" name="pwd" value="" placeholder="密码"/>
</div>
<span>
<a href="#" style="float: right; color: black; margin-right: 27px; margin-bottom: 20px;">忘记密码</a>
</span>
<div style="margin-bottom: 20px;">
<button style="background-color: #e4393c; color: white; font-size: 20px; font-weight: bold; border: none; width: 300px; height: 35px; margin-left: 25px;">登 录</button>
</div>
</form>
<div class="form-bottom">
<div style="margin-left: 10px;">
<hr style="height: 10px; border: none;" />
<a href="#"><img src="img/qq.png" style="vertical-align: middle;"/> QQ</a>
<span>|</span>
<a href="#"><img src="img/weixin.png" style="vertical-align: middle;"/> 微信</a>
<div style="display: inline-block; float: right; margin-right: 15px;">
<img src="img/right.png" style="vertical-align: middle;"/><a style="color: #e4393c; font-size: 16px;">立即注册</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<hr style="height: 20px; border: none;" />
<div id="">
<span><a href="#">关于我们</a></span>
<span>|</span>
<span><a href="#">联系我们</a></span>
<span>|</span>
<span><a href="#">人才招聘</a></span>
<span>|</span>
<span><a href="#">商家入驻</a></span>
<span>|</span>
<span><a href="#">广告服务</a></span>
<span>|</span>
<span><a href="#">手机京东</a></span>
<span>|</span>
<span><a href="#">友情链接</a></span>
<span>|</span>
<span><a href="#">销售联盟</a></span>
<span>|</span>
<span><a href="#">京东社区</a></span>
<span>|</span>
<span><a href="#">京东公益</a></span>
<span>|</span>
<span><a href="#">English Site</a></span>
</div>
<hr style="height: 20px; border: none;" />
<div>
Copyright © 2004-2019 京东JD.com 版权所有
</div>
</div>
</body>
</html>
效果图
