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 /*width: 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 /*width: 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 /*width: 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>
