<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京東-歡迎登陸</title>
<link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}
#login_img{
margin-left: 265px;
margin-top: 3px;
float: left;
}
#login_word{
font-size: 24px;
/*font-weight: bold;*/
margin-left: 23px;
margin-top: 24px;
float: left;
color: dimgray;
}
#login_href{
float: right;
margin-right: 255px;
margin-top: 40px;
font-size: 13px;
}
#message{
background-color: floralwhite;
float: left;
height: 40px;
width: 100%;
font-size: 13px;
color: lightgray;
}
#message_img{
margin-left: 366px;
height: 16px;
margin-top: 8px;
float: left;
}
#message_word{
margin-top: 13px;
font-size: 13px;
color: darkgrey;
}
.href{
text-decoration: none;
}
#login_box{
background-color: white;
height: 400px;
width: 350px;
position: absolute;
top: 51px;
right: 270px;
}
</style>
</head>
<body>
<!--第一格-->
<div style="height: 70px;">
<div id="login_img">
<img src="img/logo-201305-b.png"/>
</div>
<div id="login_word">
<font >歡迎登錄</font>
</div>
<div id="login_href">
<a class="href" ><img src="img/message_image.png" height="17px";"/>登陸頁面，調(diào)查問卷</a>
</div>
</div>
<!--第二格-->
<div id="message" style="height: 40px;">
<div id="message_img">
<img src="img/15579.jpg" height="25px" width="25px"/>
</div>
<div id="message_word">
<font >依據(jù)《網(wǎng)絡安全法》，為保障您的賬戶安全和正常使用，請盡快完成手機號驗證！ 新版<a class="href" >《京東隱私政策》</a>已上線，將更有利于保護您的個人隱私。</font>
</div>
</div>
<!--第三格-->
<div id="" style="height: 550px;position: relative;">
<div id="login_box">
<div id="" style="background-color: floralwhite ; width: 100%;">
<div style="height: 13px;width: 5px;margin-left: 20px;">
<img src="img/15579.jpg"/>
</div>
<font style="font-size: 12px; margin-left:48px ;margin-top: 0px; color: darkgray;">京東不會以任何理由要求您轉賬匯款，謹防詐騙。</font>
</div>
<div style="float: left;margin-left: 40px; margin-top: 18px; ">
<font size="4" color="#696969"><a class="href" href="">掃碼登陸</a></font>
</div>
<div " style="float: right;margin-right: 50px; margin-top: 18px;">
<font size="4" color="#696969"><a class="href" href="">賬戶登陸</a></font>
</div>
<hr style="margin-top: 60px; border-top:1px solid gainsboro;"/>
<form action="" method="get">
<input type="text" name="user_name" id="user_name" value="" placeholder="郵箱/用戶名/已驗證手機" style="position: relative; height: 40px;width: 250px;margin-left: 20px; margin-top: 20px;background-image: url(img/sadaiu.png);background-repeat: no-repeat;background-size: 43px;padding-left: 53px;"/>
<input type="password" name="user_name" id="user_name" value="" placeholder="密碼" style="position: relative; height: 40px;width: 250px;margin-left: 20px; margin-top: 20px;background-image: url(img/233131.png);background-repeat: no-repeat;background-size: 43px;padding-left: 53px;"/>
<div style="float: right;margin-top:17px;margin-right: 10px;">
<font style="font-size: 13px;color: #696969;"><a class="href" >忘記密碼</a></font>
</div>
<input type="submit" value="登陸" style="margin-top: 26px;margin-left:18px; width: 300px;height: 40px; color: white;background-color:#DC143C; font-size: 20px;"/>
</form>
<hr style="margin-top: 20px; border-top:1px solid gainsboro;"/>
<a class="href" >
<img src="img/wechat.png" height="25px" width="22px" style="margin-left: 13px;"/>
<font style="font-size: 12px;">QQ</font>
</a>
<font style="color: #696969; margin-left: 8px;">|</font>
<a class="href" >
<img src="img/qq.png" height="25px" width="22px" style="margin-left: 13px;"/>
<font style="font-size: 12px;">微信</font>
</a>
<a class="href" style="float: right;">
<img src="img/1111.png" style="height: 19px;"/>
<font style="font-size: 14px;color:#DC143C ; margin-right: 15px;margin-top: 16px;">立即注冊</font>
</a>
</div>
<img src="img/23456.png" width="100%" height="485px" style="display: block;"/>
</div>
<div id="bottom_message" style="position: absolute;margin-left: 350px;">
<a class="href" style="font-size: 12px;color: #696969;">關于我們  |</a>
<a class="href" style="font-size: 12px;color: #696969;">聯(lián)系我們  |</a>
<a class="href" style="font-size: 12px;color: #696969;">人才招聘  |</a>
<a class="href" style="font-size: 12px;color: #696969;">商家入駐  |</a>
<a class="href" style="font-size: 12px;color: #696969;">廣告服務  |</a>
<a class="href" style="font-size: 12px;color: #696969;">手機京東  |</a>
<a class="href" style="font-size: 12px;color: #696969;">友情鏈接  |</a>
<a class="href" style="font-size: 12px;color: #696969;">銷售聯(lián)盟  |</a>
<a class="href" style="font-size: 12px;color: #696969;">京東社區(qū)  |</a>
<a class="href" style="font-size: 12px;color: #696969;">京東公益  |</a>
<a class="href" style="font-size: 12px;color: #696969;">English Site</a>
</div>
<div id="end" style="position: absolute;margin-top: 30px; margin-left: 600px;">
<font style="font-size: 11px;color: #696969;">Copyright ? 2004-2019 京東JD.com 版權所有</font>
</div>
</body>
</html>
成品
jddddd.png
