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>