先上效果图吧. 本人菜鸟入门, 请勿喷.
首先样式:
1 1 body{ 2 2 margin: 0; 3 3 padding: 0; 4 4 width: 100%; 5 5 height: 100%; 6 6 } 7 7 8 8 .headers{ 9 9 width: 100%; 10 10 height: 100px; 11 11 } 12 12 .siv-ng{ 13 13 width: 100%; 14 14 height: 30px; 15 15 border: 1px solid #ccc; 16 16 background: #ccc; 17 17 } 18 18 19 19 .contents{ 20 20 width: 100%; 21 21 height: 400px; 22 22 position: relative; 23 23 } 24 24 .login{ 25 25 width: 400px; 26 26 height: 400px; 27 27 background: #A9B0A4; 28 28 margin: 0 auto; 29 29 border-radius: 5px; 30 30 opacity: 0.8; 31 31 } 32 32 33 33 .login-img-top{ 34 34 height: 40px; 35 35 } 36 36 .login h1{ 37 37 text-align: center; 38 38 } 39 39 .form-text{ 40 40 width: 350px; 41 41 height: 45px; 42 42 border: 1px solid #ccc; 43 43 background: white; 44 44 margin: 0 auto; 45 45 border-radius: 5px; 46 46 margin-top: 20px; 47 47 position: relative; 48 48 } 49 49 50 50 .login-img{ 51 51 width: 50px; 52 52 height: 45px; 53 53 float: left; 54 54 margin-left: 8px; 55 55 } 56 56 57 57 .input-in{ 58 58 width: 290px; 59 59 height: 45px; 60 60 line-height: 45px; 61 61 float: left; 62 62 border: 0px; 63 63 letter-spacing: 1px; 64 64 font-size: 18px; 65 65 color:gray; 66 66 } 67 67 68 68 .bt-login-div{ 69 69 width: 100%; 70 70 height: 50px; 71 71 margin-top: 20px; 72 72 } 73 73 74 74 75 75 .submit{ 76 76 width: 100px; 77 77 height: 40px; 78 78 margin: 0 auto; 79 79 text-align: center; 80 80 line-height: 40px; 81 81 border: 1px solid #ccc; 82 82 border-radius: 5px; 83 83 background: #0099FF; 84 84 color: white; 85 85 } 86 86 87 87 .submit:hover{ 88 88 border: 1px solid #77DDC9; 89 89 background: #0099FF; 90 90 opacity: 0.9; 91 91 cursor: hand; 92 92 } 93 93 94 94 95 95 .fogot{ 96 96 width: 100px; 97 97 height: 40px; 98 98 margin: 0 auto; 99 99 text-align: center; 100 100 } 101 101 .fogot a{ 102 102 color: white; 103 103 text-decoration-style: none; 104 104 text-decoration: #ccc; 105 105 }
然后,页面代码
1 <html> 2 <meta charset="utf-8" /> 3 <title>登陆</title> 4 5 <head> 6 <link href="css/login.css" rel="stylesheet" type="text/css" /> 7 </head> 8 9 <body> 10 <div class="headers"> 11 <div class="siv-ng"> 12 13 </div> 14 </div> 15 <div class="contents"> 16 <div class="login"> 17 <div class="login-img-top"> 18 19 </div> 20 <h1> 21 XXXX后台管理系统V1.0 22 </h1> 23 <div> 24 <form method="post"> 25 <div class="form-text"> 26 <div class="login-img"> 27 <img src="images/user-icon.png" width="40" height="40" style="margin-top:2px;"> 28 </div> 29 <input class="input-in" value="" type="text" class="username"> 30 </div> 31 <div class="form-text"> 32 <div class="login-img"> 33 <img src="images/lock-icon.png" width="40" height="40" style="margin-top:2px;"> 34 </div> 35 <input class="input-in" value="" type="password" class="password"> 36 </div> 37 <div class="bt-login-div"> 38 <div class="submit"> 39 <span>登陆</span> 40 </div> 41 </div> 42 <div class="bt-login-div"> 43 <div class="fogot"> 44 <span><a href="#">忘记密码?</a></span> 45 </div> 46 </div> 47 </form> 48 </div> 49 </div> 50 </div> 51 <div class="footer"> 52 53 </div> 54 </body> 55 56 </html>
只是做个记录而已. 这个页面,断断续续的,大概做了1个小时这样吧.