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>
