HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京東-歡迎登錄</title>
<link rel="stylesheet" type="text/css" href="css/test.css"/>
</head>
<body>
<div id="logo">
<img src="img/logo.png" />
</div>
<div id="logo_test">
<font>歡迎登錄</font>
</div>
<div id="q">
<img src="img/q-icon.png" />
<div id="q1">
<font id="id1">登錄頁面，調(diào)查問卷</font>
</div>
</div>
<div id="tiaowen" style="background-color: blanchedalmond;">
<p align="center">依據(jù)《網(wǎng)絡(luò)安全法》，為保障您的賬戶安全和正常使用，請盡快完成手機號驗證！ 新版《京東隱私政策》已上線，將更有利于保護您的個人隱私。</p>
</div>
<div id="bgpic">
<img src="img/bg.png" width="1280px"/>
</div>
<div id="login" style="background-color:white;">
<div id="d01">
<p><font size="1">京東不會以任何理由要求您轉(zhuǎn)賬匯款，謹防詐騙。</font></p>
</div>
<div id="login1">
<font size="5" id="saoma">掃碼登錄</font>
</div>
<div id="login2">
<font size="5" id="denglu">賬戶登錄</font>
</div>
<p id="forget">忘記密碼</p>
<div id="qq">
<!--<div id="qq_img">-->
<img src="img/qq.png" style="float: left;"/>
<!--</div>-->
<font size="2" id="qq1">QQ</font>
<img src="img/weixin.png" id="vx1" />
<font size="2" id="vx2">微信</font>
<img src="img/right.png" id="zhuce01"/>
<font size="3" id="zhuce02">立即注冊</font>
</div>
</div>
<div id="user">
<form action="" method="post">
<img src="img/user.png" />
<input type="text" name="user" id="user01" value="" placeholder="郵箱/用戶名/已驗證手機"/><br />
<img src="img/password_icon.png" />
<input type="password" name="password" id="password" value="" placeholder="密碼"/><br />
<div id="">
<input type="submit" name="" id="form_login" value="登錄" />
</div>
</form>
</div>
<font size="2" id="p1">關(guān)于我們 </font>
<font size="2" id="shu1">丨</font>
<font size="2" id="p2">聯(lián)系我們 </font>
<font size="2" id="shu2">丨</font>
<font size="2" id="p3">人才招聘 </font>
<font size="2" id="shu3">丨</font>
<font size="2" id="p4">商家入駐 </font>
<font size="2" id="shu4">丨</font>
<font size="2" id="p5">廣告服務(wù)</font>
<font size="2" id="shu5">丨</font>
<font size="2" id="p6">手機京東</font>
<font size="2" id="shu6">丨</font>
<font size="2" id="p7">友情鏈接</font>
<font size="2" id="shu7">丨</font>
<font size="2" id="p8">銷售聯(lián)盟</font>
<font size="2" id="shu8">丨</font>
<font size="2" id="p9">京東社區(qū)</font>
<font size="2" id="shu9">丨</font>
<font size="2" id="p10">京東公益</font>
<font size="2" id="shu10">丨</font>
<font size="2" id="p11">English Site</font>
<font size="2" id="p12">Copyright ? 2004-2018 京東JD.com 版權(quán)所有</font>
</body>
</html>
CSS代碼
body{
margin: 0px;
}
#zhuce02:hover,#vx2:hover,#qq1:hover,#forget:hover,#id1:hover,#p1:hover,#p2:hover,#p3:hover,#p4:hover,#p5:hover,#p6:hover,vp7:hover,#p8:hover,#p9:hover,#p10:hover,#p11:hover{
color: red;
text-decoration: underline;
}
#logo{
position: absolute;
left: 130px;
top: 24px;
}
#logo_test{
position: absolute;
left: 320px;
top: 45px;
font-size: 25px;
}
#q{
position: absolute;
left: 992px;
top: 75px;
}
#q1{
position: relative;
left: 30px;
top:-22px;
font-size: 13px;
}
#tiaowen{
position: absolute;
width: 100%;
top: 100px;
font-size: 13px;
}
#bgpic{
position: absolute;
width: 100%;
top: 143px;
}
#login{
position: relative;
width: 348px;
height: 400px;
left: 850px;
top: 148px;
}
#d01{
position: absolute;
height: 40px;
padding: 0px 42px;
line-height: 10px;
background-color: blanchedalmond;
text-align: center;
}
#login1{
position: absolute;
top: 50px;
left: 50px;
}
#login2{
position: absolute;
top: 50px;
left: 210px;
}
#forget{
position: absolute;
top: 225px;
left: 260px;
font-size: 10px;
}
#user{
position: absolute;
top: 280px;
left: 890px;
}
#user01{
position: relative;
top: -14px;
left: -7px;
height: 30px;
width: 230px;
}
#password{
position: relative;
top: -14px;
left: -7px;
height: 30px;
width: 230px;
}
#form_login{
position: absolute;
top:150px;
left: -30px;
height: 34px;
width: 270px;
margin-left: 28px;
margin-right: 28px;
background-color: rgb(229,56,60);
}
#qq{
position: absolute;
left: 19px;
top: 360px;
}
#qq1{
float: left;
position:absolute;
left: 25px;
top: 5px;
}
#vx1{
float: left;
position:absolute;
left: 52px;
}
#vx2{
float: left;
position:absolute;
left: 80px;
top: 5px;
width: 50px;
}
#zhuce01{
float: left;
position:absolute;
left: 200px;
}
#zhuce02{
float: left;
position:absolute;
left: 226px;
top: 2px;
width: 100px;
}
#saoma:hover,#denglu:hover{
color: rgb(229,56,60);
font-weight:bold ;
}
#p1{
position: absolute;
top: 605px;
left: 200px;
}
#shu1{
position: absolute;
top: 605px;
left: 260px;
}
#p2{
position: absolute;
top: 605px;
left: 280px;
}
#shu2{
position: absolute;
top: 605px;
left: 340px;
}
#p3{
position: absolute;
top: 605px;
left: 360px;
}
#shu3{
position: absolute;
top: 605px;
left: 420px;
}
#p4{
position: absolute;
top: 605px;
left: 440px;
}
#shu4{
position: absolute;
top: 605px;
left: 500px;
}
#p5{
position: absolute;
top: 605px;
left: 520px;
}
#shu5{
position: absolute;
top: 605px;
left: 580px;
}
#p6{
position: absolute;
top: 605px;
left: 600px;
}
#shu6{
position: absolute;
top: 605px;
left: 660px;
}
#p7{
position: absolute;
top: 605px;
left: 680px;
}
#shu7{
position: absolute;
top: 605px;
left: 740px;
}
#p8{
position: absolute;
top: 605px;
left: 760px;
}
#shu8{
position: absolute;
top: 605px;
left: 820px;
}
#p9{
position: absolute;
top: 605px;
left: 840px;
}
#shu9{
position: absolute;
top: 605px;
left: 900px;
}
#p10{
position: absolute;
top: 605px;
left: 920px;
}
#shu10{
position: absolute;
top: 605px;
left: 980px;
}
#p11{
position: absolute;
top: 605px;
left: 1000px;
}
#p12{
position: absolute;
top: 630px;
left: 505px;
}
效果如下
