效果圖
01.代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#img1{
width: 375px;
height: 84px;
padding-top: 1px;
}
#div1{
width: 100%;
height: 84px;
background-color: white;
}
#div1 .right{
background: url(../img/提示.png) no-repeat left center;
padding-left: 20px;
margin-top: 62px;
}
#div2{
width: 100%;
height: 50px;
background: url(../img/提示.png) no-repeat 246px center;
background-color: cornsilk;
}
.right{
float: right;
}
.top{
text-align: center;
padding-top: 12px;
}
a:link,a:visited{
text-decoration:none;
}
#imgtop{
padding-top: 10px;
}
#mian{
/*background-size:contain|cover;
height: auto;*/
background: url(../img/GJ.jpg) no-repeat;
background-color: darkgray;
background-size: 100% 100%;
height: 550px;
width:auto;
margin:0 auto;
}
.img2{
padding-left: 10px;
}
#div4{
width: 1000px;
height: 550px;
}
#div5{
width:380px;
height:500px;
background-color: white;
margin-left: 60px;
margin-top: 25px;
}
#div4,#div5{float:left;}
</style>
</head>
<body>
<div id="div1">
<img id="img1" src="../img/JDlog.png"/>
<a class="right" href="">登錄頁面负拟，調(diào)查問卷</a>
</div>
<div id="div2">
<p class="top">依據(jù) 《網(wǎng)絡(luò)安全法》饥侵，為保障您的賬戶安全和正常使用，請盡快完成手機號驗證鸟雏！新版
<a href="">《京東隱私政策》</a>已上線载萌，將更有利于保護您的個人隱私惧财。</p>
</div>
<div id="mian">
<div id="div4">
</div>
<div id="div5" style="text-align:center; vertical-align:middel;>
<form action="" method="post" >
<p style="pa">
<img src="../img/提示.png" />京東不會以任何理由要求您轉(zhuǎn)賬匯款，謹防詐騙</p>
<a href=""><p style="font-size: 25px; text-align: center;">賬戶登錄</p></a><hr />
<input type="text" name="user" value="" placeholder="賬號" style="width: 290px; height: 30px; margin-top: 30px;"/><br />
<input type="password" name="password" value="" placeholder="密碼" style="width: 290px; height: 30px; margin-top: 20px;"/><br />
<a href="" style="float: right; margin-right: 12px;margin-top: 9px;">忘記密碼</a><br /><br />
<input type="button" name="" value="登 錄" style=" border=0; background-color: red;width: 290px;height: 40px;"/>
</form>
</div>
</div>
<p style="text-align: center;"><a href="">關(guān)于我們</a>丨<a href="">聯(lián)系我們</a>丨<a href="">人才招聘</a>丨<a href="">商家入駐</a>丨<a href="">廣告服務(wù)</a>丨
<a href="">手機京東</a>丨<a href="">友情鏈接</a>丨<a href="">銷售聯(lián)盟</a>丨<a href="">京東社區(qū)</a>丨<a href="">京東公益</a>丨
<a href="">English Site</a></p>
<p style="text-align: center;">Copyright ? 2004-2018 京東JD.com 版權(quán)所有</p>
</body>
</html>
