欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 09:14:24
先上效果图吧. 本人菜鸟入门, 请勿喷. 首先样式: 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 ......

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

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

首先样式:

自己做的一个登录页面,纯代码!
  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个小时这样吧.