效果：
Index.html：
<!DOCTYPE html><html><!--作者：zzy时间：-07-28描述：模仿京东登陆页面（自己练习，非商用）--><head><meta charset="utf-8" /><title>京东-欢迎登录</title><!--<link rel="icon" href="///favicon.ico"/>--><link rel="stylesheet" type="text/css" href="css/fa/css1/all.css"/><link rel="stylesheet" type="text/css" href="css/reset/reset.css"/><link rel="stylesheet" type="text/css" href="css/index.css"/><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript" src="js/index.js" ></script><style>.clearfix::after,.clearfix::before{content: "";display: table;clear: both;}</style></head><!--用onload的意图是等到页面加载完就触发move_1和move_2方法，不需要手动的第一次触发，导致第二次才生效--><body onload="move_1() , move_2()"><!--头部--><div class="head clearfix"><div class="logo"><a href="javascript:;"><img src="img/logo-05-b.png"/></a><span><img src="img/l-icon.png"/></span></div><div class="question"><a href="javascript:;"><img src="img/q-icon.png"/>登录页面，调查问卷</a></div></div><!--脖颈--><div class="neck-wrapper"><div class="neck"><p><img src="img/icon-tips.png"/>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="javascript:;">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p></div></div><!--主体--><div class="main"><div class="center"><img src="img/5aa68632Nd7790d0c.png"/><form action="" method="post"><div class="login-wrapper"><!--转账提醒--><div class="remind"><p><img src="img/icon-tips.png"/>京东不会以任何理由要求您转账汇款，谨防诈骗。</p></div><div class="login clearfix"><!--扫码登录--><div class="qrcode-login"><a id="a_qrcode" class="loginbtn" href="javascript:;" onclick="show_1()">扫码登录</a><div class="qrcode" id="qrcode"><div class="qrcode-wrapper"><img src="img/show.png"/><span></span></div><ul class="ul1 clearfix"><li><span>打开</span><a href="javascript:;">手机京东</a></li><li><span> 扫描二维码</span></li></ul><ul class="ul2 clearfix"><li><span>免输入</span></li><li><span>更快 </span></li><li><span>更安全</span></li></ul></div></div><!--账户登录--><div class="account-login clearfix"><a id="a_account" class="loginbtn" href="javascript:;" onclick="show_2()">账户登录</a><div class="account clearfix" id="account"><div class="account-name"><span id="avatar"></span><input onclick="move_1()" type="text" id="text" autocomplete="off" placeholder="邮箱/用户名/登录手机" /></div><div class="account-password"><span id="lock"></span><input onclick="move_2()" type="password" id="password" autocomplete="off" placeholder="密码"/></div><div class="forget"><a href="javascript:;">忘记密码</a></div><div class="button"><a href="javascript:;">登 录</a></div></div></div></div><div class="registered"><ul class="qw"><li class="qq"><a href="javascript:;">QQ</a></li><li class="line">|</li><li class="wechat"><a href="javascript:;">微信</a></li></ul><div class="regist"><a href="javascript:;">立即注册</a></div></div></div></form></div></div><!--尾部--><div class="footer clearfix"><ul class="clearfix"><li><a href="javascript::">关于我们</a></li><li class="line">|</li><li><a href="javascript::">联系我们</a></li><li class="line">|</li><li><a href="javascript::">人才招聘</a></li><li class="line">|</li><li><a href="javascript::">商家入驻 </a></li><li class="line">|</li><li><a href="javascript::">广告服务</a></li><li class="line">|</li><li><a href="javascript::">手机京东</a></li><li class="line">|</li><li><a href="javascript::">友情链接</a></li><li class="line">|</li><li><a href="javascript::">销售联盟</a></li><li class="line">|</li><li><a href="javascript::">京东社区</a></li><li class="line">|</li><li><a href="javascript::">京东公益</a></li><li class="line">|</li><li><a href="javascript::">Englise Site</a></li></ul><div class="copy"><span>Copyright © - 京东 版权所有</span></div></div></body></html>
Index.css：
body{font-size: 12px;font-family:Arial,Verdana,"\5b8b\4f53";}/*设置头部*/.head{width: 990px;height: 90px;margin: 0 auto;/*background-color: #bfa;*/position: relative;}/*设置头部logo*/.head .logo{width: 300px;height: 60px;margin-top: 10px;position: relative;/*background-color: beige;*/}.logo span{position: absolute;right: 0;bottom: 0;}/*设置头部右边*/.question a{position: absolute;right: 0;bottom: 15px;font-size: 12px;color: #999;}/*设置脖颈*/.neck-wrapper{background-color: #FFF8F0;padding: 10px 0;width: 100%;}.neck {width: 100%;text-align: center;}.neck p{color: #999;font-size: 12px;}.neck p img{width: 16px;height: 16px;line-height: 16px;margin-right: 5px;}.neck p a{color: #333;}.neck p a:hover{text-decoration: underline;}/*设置主体*/.main{width: 100%;background-color: #E93854;}/*设置主体中间的部分*/.main .center{width: 990px;height: 475px;margin: 0 auto;margin-bottom: 20px;position: relative;}/*设置登录*/.center .login-wrapper{width: 346px;height: 400px;background-color: #FFFFFF;position: absolute;top: 10px;right: 0;}/*设置登录提醒*/.center .login-wrapper .remind{width: 100%;background-color: #FFF8F0;padding: 10px 0;text-align: center;}.login-wrapper p{color: #999;font-size: 12px;}/*设置登录*/.login-wrapper .login{width: 100%;line-height: 55px;text-align: center;}/*设置登录方式的字体大小和颜色*/.login .loginbtn{display: block;font-size: 18px;font-weight: normal;font-family: "微软雅黑";color: #666;background-color: #FFFFFF;border-bottom: 1px solid #F4F4F4;}/*设置“扫码登录”的初始值*/.login #a_qrcode{font-weight: bold;color: #e4393c;}/*用js设置改变登录方式时字体的大小和颜色的改变*//*设置扫码登录*/.login .qrcode-login{float: left;width: 173px;height: 55px;}/*设置具体扫码登录*/.qrcode{/*background-color: aquamarine;*/width: 306px;margin-left: 20px;display: block;}/*设置扫码登录外部的容器，使其*/.qrcode .qrcode-wrapper{padding-top: 30px;}/*设置二维码旁边的隐藏图片*/.qrcode .qrcode-wrapper img{/*设置初始值，只有这样transition才管用*/padding-right: 0;/*设置完成时间为0.3s*/transition: padding-right 0.3s; }/*设置隐藏的图片*/.qrcode .qrcode-wrapper span{content: "";width: 141px;height: 168px;background-image: url(../img/phone-orange.png);background-repeat: no-repeat;/*设置图片的位置*/margin-left: 160px;margin-top: -168px;/*刚开始隐藏，当鼠标移入二维码时才显示*/display: none;}/*当鼠标移入时，二维码图片向左移动*/.qrcode .qrcode-wrapper:hover img{padding-right: 150px;}/*然后隐藏图片显示*/.qrcode .qrcode-wrapper:hover span{display: block;}/*设置二维码图片下面的文字*/.qrcode ul{width: 257px;margin: 0 auto;}.qrcode ul li{float: left;}/*设置.ul1的字体颜色*/.qrcode .ul1 li{color: #666666;}.qrcode .ul1 li:first-child{padding-left: 60px;}.qrcode .ul1 a{color: #E4393C;}.qrcode .ul1 a:hover{text-decoration: underline;}/*设置第二行（免输入、更快、更安全）*/.qrcode .ul2 li:first-child{padding-left: 10px;padding-right: 5px;}.qrcode .ul2 li{width: 80px;height: 25px;position: relative;}.qrcode .ul2 li span{padding-bottom: 20px;position: absolute;top: -14px;left: 32px;}.qrcode .ul2 li:first-child span{left: 42px;}.qrcode .ul2 li:before{display: block;content: "";width: 25px;height: 25px;background-image: url(../img/qr-coagent.png);}/*设置背景图片的位置*/.qrcode .ul2 li:nth-child(2):before{background-position: -27px 0;}.qrcode .ul2 li:last-child:before{background-position: -54px 0;}/*设置账户登录*/.login .account-login{float: right;width: 173px;height: 55px;position: relative;}/*设置具体账户登录*/.account-login .account{width: 306px;height: 280px;padding: 0 20px;position: absolute;left: -173px;top: 45px;/*刚开始隐藏*/display: none;}/*点击账户登录时，再显示*/.account-login a:active .account{display: block;}.account .account-name,.account .account-password{width: 100%;}/*设置输入框前的头像*/.account .account-name span,.account .account-password span{display: block;width: 38px;height: 38px;border: 1px solid rgb(189,189,189);background-image: url(../img/pwd-icons-new.png);background-repeat: no-repeat;}/*设置用户名登录前的头像*/.account .account-name span{position: absolute;top: 43px;left: 20px;}/*设置密码框前的头像*/.account .account-password span{position: absolute;top: 108px;left: 20px;background-position: -48px 0;}/*设置输入框*/.account .account-name input,.account .account-password input{font-size: 14px;width: 268px;height: 38px;/*缩进，使输入时光标不至于紧贴边框*/text-indent: 10px;border: 1px solid rgb(189,189,189);}.account .account-name input{position: absolute;top: 43px;left: 58px;}.account .account-password input{position: absolute;top: 108px;left: 58px;}/*设置忘记密码*/.account .forget{width: 306px;position: absolute;bottom: 70px;}.account .forget a{float: right;font-size: 12px;font-weight: 100;font-family: Arial,Verdana,宋体;color: #666;border: none;}/*设置‘登陆页面，调查问卷’‘忘记密码’‘QQ’‘微信’‘立即注册’* 还有底部的导航条 * 鼠标移入时的效果*/.account .forget a:hover,.registered .qw .qq a:hover,.registered .qw .wechat a:hover,.registered .regist a:hover,.head .question a:hover,.footer ul li a:hover{color: #E4393C;text-decoration: underline;}/*设置登录按钮*/.account .button{width: 306px;background-color: #e85356;position: absolute;bottom: 40px;}.button a{display: block;line-height: 27px;border: 2px solid transparent;font-size: 20px;font-family: "微软雅黑";color: #FFFFFF;}.button a:active{border: 2px solid rgb(77,144,254);}/*设置qq，wechat、register*/.registered{width: 306px;position: absolute;bottom: 0px;line-height: 50px;padding: 0 20px;background-color: #fcfcfc;/*background-color: #fdf;*/}.registered ul,.registered ul li{float: left;}/*设置QQ*/.registered .qq a{display: block;width: 45px;text-align: right;color: #666666;/*background-color: #E85356;*/}.registered .qq a::before{display: block;content: "";width: 19px;height: 18px;position: absolute;top: 15px;margin-right: 5px;background-image: url(../img/QQ-weixin.png);background-repeat: no-repeat;}.qw .line{font-size: #ccc;padding: 0 10px;font-size: 12px;}/*设置‘微信’*/.registered .wechat a{display: block;width: 55px;text-align: right;color: #666666;}.registered .wechat a::before{display: block;content: "";width: 19px;height: 18px;position: absolute;left: 91px;top: 15px;background-image: url(../img/QQ-weixin.png);background-position: -19px 0;background-repeat: no-repeat;}/*设置‘立即注册’*/.registered .regist{float: right;}.regist a::before{display: block;content: "";width: 16px;height: 16px;background-image: url(../img/pwd-icons-new.png);background-position: -103px -75px;background-repeat: no-repeat;position: absolute;right: 80px;bottom: 17px;}.regist a{font-size: 14px;color: #b61d1d;}/*设置底部*/.footer{width: 990px;margin: 0 auto;position: relative;}.footer ul{position: absolute;top: 0;left: 64px;}.footer ul li{float: left;}.footer ul a{font-size: 12px;color: #666;margin: 0 10px;}.footer ul .line{margin: 0 2.5px;}.footer .copy{width: 990px;text-align: center;margin-top: 33px;margin-bottom: 30px;font-size: 12px;color: #666;}
其它CSS文件：
font awesome：fontawesome、reset.css
index.js：
function show_1(){var show1 = document.getElementById("qrcode");var show2= document.getElementById("account");var a1 = document.getElementById("a_qrcode");var a2 = document.getElementById("a_account");if(show1.style.display!='block'){show1.style.display = 'block';show2.style.display='none';a1.style.fontWeight='bold';a1.style.color='#e4393c';a2.style.fontWeight='normal';a2.style.color='#666';}}function show_2(){var show1 = document.getElementById("qrcode");var show2 = document.getElementById("account");var a1 = document.getElementById("a_qrcode");var a2 = document.getElementById("a_account");if(show2.style.display!='block'){show1.style.display = 'none';show2.style.display = 'block';a2.style.fontWeight='bold';a2.style.color='#e4393c';a1.style.fontWeight='normal';a1.style.color='#666';}}function move_1(){$("#text").focus(function(){$("#avatar").css("background-position","0 -48px");});$("#text").blur(function(){$("#avatar").css("background-position","0 0")});}function move_2(){$("#password").focus(function(){$("#lock").css("background-position","-48px -48px");});$("#password").blur(function(){$("#lock").css("background-position","-48px 0")});}
其它JavaScript文件：
jQuery：jquery
图片都是京东上的，可以在京东登录页面找到！
