自己做的一个登录页面,纯代码!

先上效果图吧. 本人菜鸟入门, 请勿喷.

首先样式:

  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 }

View Code

然后,页面代码

 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>

View Code

只是做个记录而已. 这个页面,断断续续的,大概做了1个小时这样吧.