jd.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>京東</title>
<link rel="icon" type="image/ico" href="img/jd_logo.ico"/>
<style>
#div1{
height:120px;
}
#div2{
position: relative;
height: 475px;
background-image: url(img/bg.png);
}
#div3{
height: 205px;
background-color: yellow;
position: relative;
}
#div11{
position: relative;
height: 80px;
}
#div12{
height: 40px;
background-color:#FDF5E6;
font-size:10px;
position: relative;
}
#div21{
height: 400px;
width: 340px;
background-color: white;
position: absolute;
left: 790px;
top: 10px;
}
#div111{
position: absolute;
left: 135px;
top: 5px;
}
#div112{
position: absolute;
left: 1000px;
top: 50px;
font-size: 10px;
}
#div122{
width: 100%;
height: 40px;
display: flex;
align-items: center;
position: absolute;
left: 263px;
}
#div211{
width: 100%;
height: 45px;
background-color:#FDF5E6;
}
#div2111{
height: 45px;
display: flex;
align-items: center;
font-size: 10px;
position: absolute;
left:23px
}
.c1{
height: 52px;
display: flex;
align-items: center;
font-size: 20px;
position: absolute;
left:45px
}
#div2131{
height:37px;
width:302px;
position:absolute;
left:20px;
top: 128px;
}
#div2132{
height:37px;
width:302px;
position:absolute;
left:20px;
top: 188px;
}
#div21311{
height:33px;
width:252px;
position:absolute;
left:38px;
top: 0px;
padding-left: 10px;
}
#div21321{
height:33px;
width:252px;
position:absolute;
left:38px;
top: 0px;
padding-left: 10px;
}
#div214{
font-size:10px;
position: absolute;
left: 273px;
top: 246px;
}
#div2151{
height: 40px;
width: 300px;
font-size:20px;
position: absolute;
left: 20px;
top: 294px;
background-color: #EE4000;
}
#div216{
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgb(230,230,230);
font-size:5px;
}
.c311{
float: left;
margin-left: 220px;
margin-top:20px;
}
.c312{
float: left;
margin-left: 20px;
margin-top:20px;
padding-left: 10px;
border-left:1px solid black;
}
#div32{
position: absolute;
top:50px;
left: 510px;
font-size:10px
}
#es1:hover{
color: red;
}
#es2:hover{
color: red;
}
a{
text-decoration:none
}
</style>
</head>
<body>
<div id="div1">
<div id="div11">
<div id="div111">
<img src="img/logo.png"/>
<img style="margin-left: 10px;" src="img/l-icon.png"/>
</div>
<div id="div112">
<img src="img/q-icon.png"/>
<a target="_blank" >
登錄頁面，調(diào)查問卷
</a>
</div>
</div>
<div id="div12">
<div id="div122">
<img src="img/warning.png"/>
<font>依據(jù)《網(wǎng)絡(luò)安全法》配深，為保障您的賬戶安全和正常使用庵芭，請盡快完成手機號驗證！ 新版</font>
<a target="_blank" >《京東隱私政策》</a>
<font>已上線闹蒜，將更有利于保護您的個人隱私。</font>
</div>
</div>
</div>
<div id="div2">
<div id="div21">
<div id="div211">
<div id="div2111">
<img src="img/warning.png"/>
京東不會以任何理由要求您轉(zhuǎn)賬匯款抑淫，謹防詐騙绷落。
</div>
</div>
<div id="div212" style="height: 52px;border-bottom: 1px solid #FFF0F5">
<div id="2121" style="position:relative;width: 50%;height: 52px;float: right;">
<div id='es1' class="c1">
<a href="#">掃碼登錄</a>
</div>
</div>
<div id="2122" style="position:relative;width: 50%;height: 52px;float: right;">
<div id='es2' class="c1">
<a href="#">賬戶登錄</a>
</div>
</div>
</div>
<div id="div213">
<form action="" method="get">
<div id="div2131">
<img style="border: 1px solid burlywood;" src="img/pygame.png"/>
<input id="div21311" type="text" name='用戶名' value="" placeholder="郵箱/用戶名/已驗證手機"/>
</div>
<div id="div2132">
<img style="border: 1px solid burlywood;" src="img/password_icon.png"/>
<input id="div21321" type="password" name='密碼' value="" placeholder="密碼"/>
</div>
</form>
</div>
<div id="div214">
<a >忘記密碼</a>
</div>
<div id="div215">
<button id="div2151">登 錄</button>
</div>
<div id="div216">
<div style="height: 50px;display: flex;align-items: center;position:absolute; left:20px;">
<img src="img/qq.png"/>
</div>
<div id="" style="height: 50px;display: flex;align-items: center;position:absolute; left:45px;">
<a id="qq" href="#">QQ</a>
</div>
<div style="height: 50px;display: flex;align-items: center;position:absolute; left:90px;">
<img src="img/weixin.png"/>
</div>
<div id="" style="height: 50px;display: flex;align-items: center;position:absolute; left:115px;">
<a id='wx' href="#">微信</a>
</div>
<div id="" style="height: 50px;display: flex;align-items: center;position:absolute; right:75px;">
<img src="img/right.png"/>
</div>
<div id="" style="height: 50px;display: flex;align-items: center;position:absolute; right:25px;">
<a style="color: red;" href="#">立即注冊</a>
</div>
</div>
</div>
</div>
<div id="div3" style="font-size: 10px;">
<div id="31">
<div class="c311"><a href="#">關(guān)于我們</a></div>
<div class="c312"><a href="#">聯(lián)系我們</a></div>
<div class="c312"><a href="#">人才招聘</a></div>
<div class="c312"><a href="#">商家入駐</a></div>
<div class="c312"><a href="#">廣告服務(wù)</a></div>
<div class="c312"><a href="#">手機京東</a></div>
<div class="c312"><a href="#">友情鏈接</a></div>
<div class="c312"><a href="#">銷售聯(lián)盟</a></div>
<div class="c312"><a href="#">京東社區(qū)</a></div>
<div class="c312"><a href="#">京東公益</a></div>
<div class="c312"><a href="#">English Site</a></div>
</div>
<div id="div32">
Copyright ? 2004-2019 京東JD.com 版權(quán)所有
</div>
</div>
</body>
</html>
