JS实现居中漂亮的登录页面
效果图：
HTML代码如下：
1 <div id="container"> 2 <div class="login"> 3 <div class="logo">LOGO</div> 4 <form action="" method="post" > 5 <div class="public-input"> 6 <input class="username has-border" name="username" type="text" placeholder="请输入用户名"> 7 </div> 8 <div class="public-input "> 9 <input class="password has-border" name="password" type="password" placeholder="请输入密码"> 10 </div> 11 <div class="btnLogin public-input">登录</div> 12 <div class="register"> 13 <input type="checkbox" checked> 14 <label for="remember-me">记住密码</label> 15 </div> 16 </form> 17 </div> 18 </div>
CSS代码如下：
1 html,body,div,form,input,span,a{ 2 padding: 0; 3 margin: 0; 4 } 5 body{ 6 background: url('../images/bg.png'); 7 font-size: 0.75em; 8 background-color: #3bc0c3; 9 } 10 #container{ 11 /*width: 440px;*/ 12 width: 33%; 13 height: 310px; 14 border: 5px solid #32a3a6; 15 position: absolute; 16 } 17 #container .logo{ 18 width: 100%; 19 height: 55px; 20 background: #f8fbfb; 21 text-align: center; 22 line-height: 55px; 23 font-size: 18px; 24 font-weight: bold; 25 color: #484848; 26 border-bottom: 1px solid #eff4f4; 27 } 28 #container form{ 29 width: 81.818181812%; 30 margin: 20px auto; 31 color: #e2e2e2; 32 } 33 #container .public-input{ 34 width: 100%; 35 height: 40px; 36 border: 1px solid #e2e2e2; 37 margin-bottom: 20px; 38 overflow: hidden; 39 } 40 #container form input[type="text"], 41 #container form input[type="password"]{ 42 width: 90%; 43 height: 100%; 44 border: none; 45 } 46 #container .username{ 47 background: url("../images/userpw-icon.png") no-repeat center left; 48 background-position: 3px 8px; 49 background-color: #fff; 50 } 51 #container form input[name="username"]{ 52 padding-left: 38px; 53 } 54 #container .password{ 55 background: url("../images/userpw-icon.png") no-repeat center left; 56 background-position: 3px -54px; 57 background-color: #fff; 58 } 59 #container form input[name="password"]{ 60 padding-left: 38px; 61 } 62 #container .public-input input.has-border:focus{ 63 border-color: #484848; 64 box-shadow: 0 0 10px #484848; 65 -webkit-box-shadow: 0 0 10px #484848; 66 -moz-box-shadow: 0 0 10px #484848; 67 } 68 #container .btnLogin{ 69 border: none; 70 background: #3bc0c3; 71 text-align: center; 72 line-height: 40px; 73 font-size: 18px; 74 font-weight: bold; 75 color: #fff; 76 cursor: pointer; 77 border-radius: 5px; 78 -webkit-border-radius: 5px; 79 -moz-border-radius: 5px; 80 } 81 #container .register input{ 82 vertical-align:middle; 83 margin-bottom: 6px; 84 }
JS：
1 window.onload=function(){ 2 var box_hight; 3 var box_width; 4 var con=document.getElementById("container"); 5 6 //位置赋值 7 con.style.left="50%"; 8 con.style.top="50%"; 9 box_width=con.offsetWidth; //获取盒子宽度 10 box_hight=con.offsetHeight; //获取盒子高度 11 con.style.marginTop=-box_hight/2+"px"; 12 con.style.marginLeft=-box_width/2+"px"; 13 }
