ps：模仿的京東的登陸界面，但只是個靜態的，還沒有怎麼熟練運用javascript的知識，代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京東-歡迎登錄</title>
<link rel="icon" href="//www.jd.com/favicon.ico"/>
<style>
*{
margin:0px;
padding:0px;
}
a{
color: #666;
text-decoration:none;
}
a:hover{
text-decoration: underline;
}
body{
font: 12px/150% Arial,Verdana;
color: #666;
}
#header{
width: 990px;
margin: 0 auto;
}
#header #log{
position: relative;
width: 300px;
margin: 10px 0;
height: 60px;
float: left;
}
#header #log b{
display: inline-block;
width: 110px;
height: 40px;
position: absolute;
right: 0;
bottom: 0;
background: url(../img/l-icon.png) no-repeat;
}
#header .q-link{
position: relative;
color: #999;
top: 52px;
float: right;
}
#header b{
display: inline-block;
width: 18px;
height: 14px;
margin: 0 5px;
background: url(../img/q-icon.png) no-repeat;
vertical-align: middle;
}
#header a:hover{
text-decoration: underline;
}
#header:after{
content: "";
display: block;
clear: both;
}
#container{
margin: 0 auto;
background: #fff8f0;
}
#container #container_top{
padding: 10px 0px 10px 0px;
text-align: center;
}
#container #container_top i{
background: url(../img/icon-tips.png);
vertical-align: middle;
display: inline-block;
width: 16px;
height: 16px;
margin-right: 5px;
}
#container #container_top p{
vertical-align: middle;
color: #999;
font-size: 12px;
display: inline-block;
}
#container #container_top p a{
color: #333;
}
#container #container_top p a:hover{
text-decoration: underline;
}
#container #container_bottom{
background-color: #01061a;
}
#container #container_bottom #background_picture{
width: 990px;
margin:0 auto;
background: url(../img/jdback.jpg) 0px 0px no-repeat;
height: 475px;
}
#container #container_bottom #background_picture:after{
content: "";
display: block;
clear: both;
}
#container #container_bottom #background_picture #right{
float: right;
margin-top: 10px;
width: 346px;
background: #fff;
}
#container #container_bottom #background_picture #right #right-top{
background: #fff8f0;
padding: 10px 0px 10px 0px;
text-align: center;
}
#container #container_bottom #background_picture #right #right-top i{
background: url(../img/icon-tips.png) no-repeat;
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 5px;
}
#container #container_bottom #background_picture #right #right-top p{
vertical-align: middle;
color: #999;
font-size: 12px;
display: inline-block;
}
#container #container_bottom #background_picture #right #right-middle-left{
float: left;
width: 172px;
height: 54px;
font: 18px/54px "microsoft yahei";
border-bottom: 1px solid #f4f4f4;
border-right: 1px solid #f4f4f4;
text-align: center;
}
#container #container_bottom #background_picture #right #right-middle-right{
margin: 0 auto;
width: 173px;
height: 54px;
font: 18px/54px "microsoft yahei";
border-bottom: 1px solid #f4f4f4;
text-align: center;
float: right;
}
#container #container_bottom #background_picture #right:after{
content: " ";
display: block;
clear: both;
}
#container #container_bottom #background_picture #right #right-middle-right a{
font-weight: 700;
color: #e4393c;
cursor: pointer;
}
#container #container_bottom #background_picture #right #right-middle-middle{
margin-top: 58px;
padding: 20px;
}
#container #container_bottom #background_picture #right #right-middle-middle #userinfo{
border: 1px solid #bdbdbd;
margin-bottom: 20px;
position: relative;
}
#container #container_bottom #background_picture #right #right-middle-middle #userinfo label{
display: inline-block;
position: absolute;
width: 38px;
height: 38px;
border-right: 1px solid #bdbdbd;
background: url(../img/denglv.png) no-repeat;
}
#container #container_bottom #background_picture #right #right-middle-middle #txt{
border: 0;
padding: 10px 0 10px 50px;
width: 254px;
font: 14px/18px '\5b8b\4f53';
}
#container #container_bottom #background_picture #right #right-middle-middle span{
position: absolute;
right: 6px;
top: 12px;
width: 14px;
height: 14px;
background: url(../img/denglv.png) -25px -143px no-repeat;
cursor: pointer;
}
#container #container_bottom #background_picture #right #right-middle-middle #password{
border: 1px solid #bdbdbd;
margin-bottom: 20px;
position: relative;
}
#container #container_bottom #background_picture #right #right-middle-middle #password label{
display: inline-block;
position: absolute;
width: 38px;
height: 38px;
border-right: 1px solid #bdbdbd;
background: url(../img/denglv.png) -48px 0px no-repeat;
}
#container #container_bottom #background_picture #right #right-middle-middle #login{
margin-top: 20px;
border: 1px solid #cb2a2d;
text-align: center;
}
#container #container_bottom #background_picture #right #right-middle-middle #login a{
border: 1px solid #e85356;
display: block;
background: #e4393c;
color: #fff;
font: 20px/36px 'Microsoft YaHei';
cursor: pointer;
}
#container #container_bottom #background_picture #right #right-bottom{
margin-top: 10px;
padding:0 20px 0 20px;
line-height: 50px;
border-top: 1px solid #f4f4f4;
background-color: #fcfcfc;
}
#container #container_bottom #background_picture #right #right-bottom ul{
list-style: none;
}
#container #container_bottom #background_picture #right #right-bottom ul li{
float: left;
}
#container #container_bottom #background_picture #right #right-bottom ul:after{
content: "";
display: block;
clear: both;
}
#container #container_bottom #background_picture #right #right-bottom ul li a{
position: relative;
display: inline-block;
padding-left: 24px;
cursor: pointer;
}
#container #container_bottom #background_picture #right #right-bottom ul li a #QQ-icon{
width: 19px;
height: 18px;
position: absolute;
left: 0;
top: 16px;
background: url(../img/QQ-weixin.png) no-repeat;
}
#container #container_bottom #background_picture #right #right-bottom ul li #line{
color: #ccc;
padding: 0 10px;
}
#container #container_bottom #background_picture #right #right-bottom ul li a #weixin-icon{
width: 19px;
height: 18px;
position: absolute;
left: 0;
top: 16px;
background: url(../img/QQ-weixin.png) -20px 0 no-repeat;
}
#container #container_bottom #background_picture #right #right-bottom ul li a b{
display: inline-block;
width: 16px;
height: 16px;
background: url(../img/denglv.png) -104px -75px no-repeat;
margin-right: 5px;
vertical-align: middle;
}
#rooter{
padding:20px 0px 30px 0px;
text-align: center;
width: 990px;
margin: 0 auto;
}
#rooter a{
margin: 0 10px;
}
</style>
</head>
<body>
<div id="header">
<div id="log">
<a href="//www.jd.com/">
<img src="../img/jd.png" alt="京東" width="170px" >
</a>
<b></b>
</div>
<a href="//surveys.jd.com/index.php?r=survey/index/sid/568245/lang/zh-Hans" target="_blank" class="q-link">
<b></b>登錄頁面，調查問卷</a>
</div>
<div id="container">
<div id="container_top">
<div>
<i></i><p>依據《網絡安全法》，爲保障您的賬戶安全和正常使用，請儘快完成手機號驗證！ 新版<a href="https://about.jd.com/privacy/" target="_blank">《京東隱私政策》</a>已上線，將更有利於保護您的個人隱私。</p>
</div>
</div>
<div id="container_bottom">
<div id="background_picture">
<div id="right">
<div id="right-top">
<div style="text-align: center;display: inline-block;">
<i></i><p>京東不會以任何理由要求您轉賬匯款，謹防詐騙。</p>
</div>
</div>
<div id="right-middle-left">
<a>掃碼登錄</a>
</div>
<div id="right-middle-right">
<a>賬戶登錄</a>
</div>
<div id="right-middle-middle">
<form>
<div id="userinfo">
<label></label>
<input id="txt" placeholder="郵箱/用戶名/已驗證手機">
<span></span>
</div>
<div id="password">
<label></label>
<input id="txt" placeholder="密碼">
<span></span>
</div>
<a href="/uc/links?tag=safe" style="position:relative;margin-left:258px;width: 100%;">忘記密碼</a>
<div id="login">
<a>登 錄</a>
</div>
</form>
</div>
<div id="right-bottom">
<ul>
<li>
<a><b id="QQ-icon"></b><span>QQ</span></a>
<span id="line">|</span>
</li>
<li>
<a><b id="weixin-icon"></b>
<span>微信</span></a>
</li>
<li style="float: right;">
<a style="font-size: 14px;color: #b61d1d;" href="//reg.jd.com/reg/person?ReturnUrl=http%3A%2F%2Fwww.jd.com" target="_blank"><b></b>立即註冊</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="rooter">
<a target="_blank" href="//www.jd.com/intro/about.aspx">
關於我們
</a>
|
<a target="_blank" href="//www.jd.com/contact/">
聯繫我們
</a>
|
<a target="_blank" href="//zhaopin.jd.com/">
人才招聘
</a>
|
<a target="_blank" href="//www.jd.com/contact/joinin.aspx">
商家入駐
</a>
|
<a target="_blank" href="//www.jd.com/intro/service.aspx">
廣告服務
</a>
|
<a target="_blank" href="//app.jd.com/">
手機京東
</a>
|
<a target="_blank" href="//club.jd.com/links.aspx">
友情鏈接
</a>
|
<a target="_blank" href="//media.jd.com/">
銷售聯盟
</a>
|
<a href="//club.jd.com/" target="_blank">
京東社區
</a>
|
<a href="//gongyi.jd.com" target="_blank">
京東公益
</a>
|
<a target="_blank" href="//en.jd.com/" >English Site</a>
<div style="margin: 10px 0;">
Copyright © 2004-2018 京東JD.com 版權所有
</div>
</div>
</body>
</html>