<div> <code id="CodeText" class="code_input" ><!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body, h1, h2, h3, ul, li, form, p, img { border: 0 none; margin: 0; padding: 0; } body { margin: 0px; padding: 0px; font-size: 12px; font-family: verdana; padding-top: 50px; } img { border: none; margin: 0px; padding: 0px; } a { text-decoration: none; color: #848585; } a:hover { color: #000; } select, input, button, button img, label { vertical-align: middle; } /*-----------------头-------------------*/ .header { 800px; height: 64px; border: none; margin-left: auto; margin-right: auto; position: relative; } .headLogo { top: 17px; left: 0px; position: absolute; } .headerIntro { position: absolute; top: 17px; left: 144px; background-image: url(http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_bg_v5.png); 144px; height: 28px; display: block; background-position: 0px -64px; } .headerNav { position: absolute; top: 21px; right: 0px; text-align: right; } .headerNav a { margin-left: 13px; } /*-------------------内容-------------------*/ .content { 100%; height: 440px; background-image: url(http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_border_bg.jpg); background-repeat: repeat-x; } .content_main { 900px; position: relative; margin-left: auto; margin-right: auto; height: 440px; background-image: url(http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_body_bg.jpg); } .login { 338px; height: 388px; background-color: #FFFFFF; float: right; border: solid 1px #b7c2c9; margin-top: 24px; position: relative; margin-right: 90px; } .loginTap { 338px; height: 49px; background-image: url(http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_bg_v5.png); } .loginForm { margin-top: 20px; } .inputLine { border-color: #BAC5D4 #D5DBE2 #D5DBE2 #BAC5D4; border-style: solid; border- 1px; clear: both; height: 33px; line-height: 33px; margin-left: 42px; margin-top: 0; position: relative; 253px; cursor: text; } .inputLine_hover { border-color: #a6b4c9; border-bottom-color: #bac5d4; border-right-color: #bac5d4; } .inputLine_fouce { border-color: #60a4e8; border-bottom-color: #84b4fc; border-right-color: #84b4fc; } .inputLine_fouce .loginInput_placeholder { color: #b4c0d2; } .loginInput { background-color: #EEF3F8; border: medium none; color: #333; font-family: verdana; font-size: 16px; font-weight: 700; height: 20px; left: 0; line-height: 17px; padding: 7px 8px 6px; top: 0; 237px; position: absolute; } .loginInput_placeholder { background: none repeat scroll 0 0 transparent; color: #92a4bf; font-size: 14px; left: 0; position: absolute; text-indent: 10px; top: 0; } /*自动登录*/ .auto_login_div { color: #555555; height: 14px; line-height: 14px; margin-left: 42px; margin-top: 19px; position: relative; 255px; z-index: 1; } .auto_cheack { height: 14px; } .auto_cheack_input { height: 13px; margin: 0; overflow: hidden; padding: 0; 13px; } .auto_cheack_label { font-family: simsun; cursor: pointer; } .auto_cheack_tip { background-color: #FFFCD1; border: 1px solid #F1D47C; color: #DE6907; display: none; height: 36px; left: 0; line-height: 18px; padding: 5px; text-align: left; top: 16px; 180px; z-index: 9; } /*登录*/ .login_div { border: medium none; height: 35px; margin-top: 19px; 255px; clear: both; line-height: 33px; margin-left: 42px; position: relative; } .btn_login { background-image: url("http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_bg_v5.png"); border: 0 none; cursor: pointer; display: inline-block; float: right; font-size: 14px; font-weight: 700; height: 35px; line-height: 35px; outline: 0 none; padding: 0; text-align: center; vertical-align: baseline; background-position: 0 -208px; color: #FFFFFF; 102px; } .btn_login_hover { background-position: 0 -256px; } .btn_login_active { background-position: 0 -304px; } /*-------------------底部-------------------*/ .footer { 100%; height: 65px; border-top: 1px solid #FFFFFF; margin: 0 auto; } .footer_inner { background: none repeat scroll 0 0 #F7F7F7; color: #848585; height: 63px; margin: 0 auto; overflow: visible; position: relative; 900px; } .footer_logo { left: 35px; top: 11px; position: absolute; 122px; } .right_div { left: 157px; top: 25px; position: absolute; 636px; text-align: center; } .copyright { } .kexing { position: absolute; right: 50px; top: 24px; 57px; } </style> <script src="http://files.cnblogs.com/cainiaoguoshi/jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript"> //方法集合 var PrivateMethod = { //初始化样式 InitCss: function () { //用户名------------------ $("#useName").blur(function () { $("#useNameLine").removeClass("inputLine_fouce"); }); $("#useName").focusin(function () { $("#useNameLine").addClass("inputLine_fouce"); }); $("#useNameLine").mouseover(function () { $("#useNameLine").addClass("inputLine_hover"); }); $("#useNameLine").mouseout(function () { $("#useNameLine").removeClass("inputLine_hover"); }); $("#useName").keyup(function () { var useNameV = $("#useName").val(); if (useNameV !== "") { //$("#userNameHolder").css("visibility", "hidden"); $("#userNameHolder").hide(0); } else { //$("#userNameHolder").css("visibility", "show"); $("#userNameHolder").show(0); } }); //密码-------------------- $("#passWord").blur(function () { $("#passWordLine").removeClass("inputLine_fouce"); }); $("#passWord").focusin(function () { $("#passWordLine").addClass("inputLine_fouce"); }); $("#passWordLine").mouseover(function () { $("#passWordLine").addClass("inputLine_hover"); }); $("#passWordLine").mouseout(function () { $("#passWordLine").removeClass("inputLine_hover"); }); $("#passWord").keyup(function () { var useNameV = $("#passWord").val(); if (useNameV !== "") { $("#pwdHolder").hide(0); } else { $("#pwdHolder").show(0); } }); //提醒自动登录 $("#autoLoginLabel").mousemove(function () { $("#autoTip").show(); }); $("#autoLoginLabel").mouseout(function () { $("#autoTip").hide(); }); //登录 $("#loginBtn").mousemove(function () { $("#loginBtn").addClass("btn_login_hover"); }); $("#loginBtn").mouseout(function () { $("#loginBtn").removeClass("btn_login_hover"); }); $("#loginBtn").mousedown(function () { $("#loginBtn").addClass("btn_login_active"); }); $("#loginBtn").mouseup(function () { $("#loginBtn").removeClass("btn_login_active"); }); }, //设置padding SetPadding: function () { var winHeight = $(window).height(); if (winHeight > 570) { var difHeight = winHeight - 570; var topHeight = difHeight / 2; $("body").css("paddingTop", topHeight + "px"); } } }; $(function () { PrivateMethod.InitCss(); PrivateMethod.SetPadding(); $(window).resize(function () { PrivateMethod.SetPadding(); }); }); </script> <div class="header"> <h1 class="headLogo"> <a href="http://www.baidu.com/" target="_blank"> <img alt="163" src="http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_163logo.gif" /></a> </h1> <a class="headerIntro"></a> <div class="headerNav"> <a href="#">邮箱</a> <a href="#">帮助</a> </div> </div> <div class="content"> <div class="content_main"> <div class="login" id="loginBlock"> <div class="loginTap"> </div> <div class="loginForm"> <form action="Index.cshtml"> <div class="inputLine" id="useNameLine"> <input type="text" name="useName" id="useName" class="loginInput" /> <label id="userNameHolder" class="loginInput_placeholder" for="useName"> 用户名</label> </div> <div class="inputLine" id="passWordLine" style="margin-top: 10px;"> <input type="password" name="passWord" id="passWord" class="loginInput" /> <label id="pwdHolder" class="loginInput_placeholder" for="passWord"> 密码</label> </div> <div id="autoLogin" class="auto_login_div"> <div class="auto_cheack"> <input title="自动登录" class="auto_cheack_input" type="checkbox" id="autoLoginCheack" /> <label id="autoLoginLabel" class="auto_cheack_label" for="autoLoginCheack"> 自动登录 </label> <div class="auto_cheack_tip" id="autoTip"> 为了您的信息安全，请不要在网吧或公用电脑上使用此功能！ </div> </div> </div> <div class="login_div"> <input type="button" class="btn_login" id="loginBtn" value="登 录" /> </div> </form> </div> </div> </div> </div> <div class="footer"> <div class="footer_inner" id="footerInner"> <a class="footer_logo" href="#" target="_blank"> <img src="http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_163logo_bottom.gif" alt="浙江XX软件" /> </a><a id="kexing" class="kexing" href="#" target="_blank"> <img src="http://images.cnblogs.com/cnblogs_com/cainiaoguoshi/495916/o_knet.png" alt="可信网站，身份验证" /> </a> <div class="right_div"> <span class="copyright">浙江XXXX有限公司版权所有 © 1997-2013</span> </div> </div> </div> </body> </html> </code> </div>