凡人修仙登录页面

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>fupin</title>
  6     <style>
  7         /*使用原子类*/
  8         .marginAuto{
  9             margin: auto;
 10         }
 11         .wr1{
 12             width: 1200px;
 13         }
 14     </style>
 15     <style>
 16         body{
 17             margin: 0;
 18         }
 19         .loginHeader{
 20             font-size: 40px;
 21             color: #1bae9b;
 22             padding: 30px 0px;
 23             font-family: 华文行楷;
 24         }
 25         /*.logo-img-wr{*/
 26             /* 1200px;*/
 27             /*margin: 30px auto 30px;*/
 28         /*}*/
 29         .main-content{
 30             background-color: #ccc;
 31             height: 600px;
 32         }
 33         .login-form-wr{
 34             box-sizing: border-box;
 35             border: 1px solid black;
 36             width: 300px;
 37             /*text-align: center;*/
 38             padding: 0px 30px 0px;
 39             float: right;
 40             margin-top: 100px;
 41             margin-right: 100px;
 42         }
 43         .login-form-wr h1{
 44             text-align: center;
 45             font-size: 20px;
 46         }
 47         .login-form-wr .form-row{
 48             width: 100%;
 49             height: 35px;
 50             margin-bottom: 10px;
 51             font-size: 16px;
 52         }
 53         .normal-input{
 54             box-sizing: border-box;
 55             width: 100%;
 56             height: 100%;
 57             padding: 5px;
 58         }
 59         .login-form-wr .form-row input{
 60             font-size: 14px;
 61         }
 62         .checkcode-input{
 63             box-sizing: border-box;
 64             width: 60%;
 65             /* auto;*/
 66             height: 100%;
 67             vertical-align: middle;
 68             margin-right: 5px;
 69             /*padding: 5px;*/
 70         }
 71         .checkcode{
 72             box-sizing: border-box;
 73             width: 35%;
 74             /* 80px;*/
 75             height: 100%;
 76             vertical-align: middle;
 77         }
 78         #remember-pwd{
 79             position: relative;
 80             top: -1px;
 81             border: 1px solid black;
 82             width: 20px;
 83             height: 20px;
 84             vertical-align: middle;
 85         }
 86         #submit-btn{
 87             width: 100%;
 88             height: 40px;
 89             margin-bottom: 30px;
 90         }
 91     </style>
 92 </head>
 93 <body>
 94     <!--logo-->
 95     <div class="wr1 marginAuto loginHeader">
 96         凡人修仙
 97     </div>
 98     <!--<div class="logo-img-wr">-->
 99         <!--<img src="img/logo_dang_login.png" alt="">-->
100     <!--</div>-->
101     <!--背景和登录框-->
102     <div class="main-content">
103         <div class="login-form-wr">
104             <h1>用户登录</h1>
105             <form action="#" method="post">
106                 <div class="form-row">
107                     <input class="normal-input"  type="text" name="username" placeholder="请输入您的用户名">
108                 </div>
109                 <div class="form-row">
110                     <input class="normal-input" type="password" name="password" placeholder="请输入您的密码">
111                 </div>
112                 <div class="form-row">
113                     <input class="checkcode-input" type="text" name="checkcode">
114                     <img class="checkcode" src="img/getReadomCode.jpg" alt="">
115                 </div>
116                 <div class="form-row">
117                     <input id="remember-pwd" type="checkbox" name="remember_pwd">
118                     <label for="remember-pwd">记住我，以后自动登录</label>
119                 </div>
120                 <div>
121                     <input id="submit-btn" type="button" value="登录">
122                 </div>
123             </form>
124         </div>
125     </div>
126 </body>
127 </html>
登录version1