<!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;">登錄頁面，調(diào)查問卷</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;">
依據(jù)《網(wǎng)絡(luò)安全法》，為保障您的賬戶安全和正常使用，請盡快完成手機號驗證！
新版<a href="#" style="color: #000000;">《京東隱私政策》</a>已上線，將更有利于保護(hù)您的個人隱私。
</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;">
京東不會以任何理由要求您轉(zhuǎn)賬匯款，謹(jǐn)防詐騙。
</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="#">關(guān)于我們</a></span>
<span>|</span>
<span><a href="#">聯(lián)系我們</a></span>
<span>|</span>
<span><a href="#">人才招聘</a></span>
<span>|</span>
<span><a href="#">商家入駐</a></span>
<span>|</span>
<span><a href="#">廣告服務(wù)</a></span>
<span>|</span>
<span><a href="#">手機京東</a></span>
<span>|</span>
<span><a href="#">友情鏈接</a></span>
<span>|</span>
<span><a href="#">銷售聯(lián)盟</a></span>
<span>|</span>
<span><a href="#">京東社區(qū)</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 版權(quán)所有
</div>
</div>
</body>
</html>
效果圖
