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

2018-01-14 19:11:55来源:cnblogs.com作者:linxChou人点击

分享

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

首先样式:

  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.022             </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个小时这样吧. 

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台