响应式的账号登录界面模板，内置form表单和js控件
1 <!DOCTYPE html> 2 <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 3 4 <link type="text/css" rel="styleSheet" href="css/main.css"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>账号登录</title> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 13 html, 14 body { 15 height: 100%; 16 } 17 18 @font-face { 19 font-family: 'neo'; 20 src: url("font/NEOTERICc.ttf"); 21 } 22 input:focus{ 23 outline: none; 24 } 25 .form input{ 26 300px; 27 height: 30px; 28 font-size: 18px; 29 background: none; 30 border: none; 31 border-bottom: 1px solid #fff; 32 color: #fff; 33 margin-bottom: 20px; 34 } 35 .form input::placeholder{ 36 color: rgba(255,255,255,0.8); 37 font-size: 18px; 38 font-family: "neo"; 39 } 40 .confirm{ 41 height: 0; 42 overflow: hidden; 43 transition: .25s; 44 } 45 .btn{ 46 140px; 47 height: 40px; 48 border: 1px solid #fff; 49 background: none; 50 font-size:20px; 51 color: #fff; 52 cursor: pointer; 53 margin-top: 25px; 54 font-family: "neo"; 55 transition: .25s; 56 } 57 .btn:hover{ 58 background: rgba(255,255,255,.25); 59 } 60 #login_wrap{ 61 980px; 62 min-height: 500px; 63 border-radius: 10px; 64 font-family: "neo"; 65 overflow: hidden; 66 box-shadow: 0px 0px 120px rgba(0, 0, 0, 0.25); 67 position: fixed; 68 top: 50%; 69 right: 50%; 70 margin-top: -250px; 71 margin-right: -490px; 72 } 73 #login{ 74 50%; 75 height: 100%; 76 min-height: 500px; 77 background: linear-gradient(45deg, #9a444e, #e06267); 78 position: relative; 79 float: right; 80 } 81 #login #status{ 82 90px; 83 height: 35px; 84 margin: 40px auto; 85 color: #fff; 86 font-size: 30px; 87 font-weight: 600; 88 position: relative; 89 overflow: hidden; 90 } 91 #login #status i{ 92 font-style: normal; 93 position: absolute; 94 transition: .5s 95 } 96 #login span{ 97 text-align: center; 98 position: absolute; 99 left: 50%; 100 margin-left: -150px; 101 top: 52%; 102 margin-top: -140px; 103 } 104 #login span a{ 105 text-decoration: none; 106 color: #fff; 107 display: block; 108 margin-top: 80px; 109 font-size: 18px; 110 } 111 #bg{ 112 background: linear-gradient(45deg, #211136, #bf5853); 113 height: 100%; 114 } 115 /*绘图*/ 116 #login_img{ 117 50%; 118 min-height: 500px; 119 background: linear-gradient(45deg, #221334, #6c3049); 120 float: left; 121 position: relative; 122 } 123 #login_img span{ 124 position: absolute; 125 display: block; 126 } 127 #login_img .circle{ 128 200px; 129 height: 200px; 130 border-radius: 50%; 131 background: linear-gradient(45deg, #df5555, #ef907a); 132 top: 70px; 133 left: 50%; 134 margin-left: -100px; 135 overflow: hidden; 136 } 137 #login_img .circle span{ 138 150px; 139 height: 40px; 140 border-radius: 50px; 141 position: absolute; 142 } 143 #login_img .circle span:nth-child(1){ 144 top: 30px; 145 left: -38px; 146 background: #c55c59; 147 } 148 #login_img .circle span:nth-child(2){ 149 bottom: 20px; 150 right: -35px; 151 background: #934555; 152 } 153 #login_img .star span{ 154 background: radial-gradient(#fff 10%,#fff 20%,rgba(72, 34, 64, 0)); 155 border-radius: 50%; 156 box-shadow: 0 0 7px #fff; 157 } 158 #login_img .star span:nth-child(1){ 159 15px; 160 height: 15px; 161 top: 50px; 162 left: 30px; 163 } 164 #login_img .star span:nth-child(2){ 165 10px; 166 height: 10px; 167 left: 360px; 168 top: 80px; 169 } 170 #login_img .star span:nth-child(3){ 171 5px; 172 height: 5px; 173 top: 400px; 174 left: 80px; 175 } 176 #login_img .star span:nth-child(4){ 177 8px; 178 height: 8px; 179 top: 240px; 180 left: 60px; 181 } 182 #login_img .star span:nth-child(5){ 183 4px; 184 height: 4px; 185 top: 20px; 186 left: 200px; 187 } 188 #login_img .star span:nth-child(6){ 189 4px; 190 height: 4px; 191 top: 460px; 192 left: 410px; 193 } 194 #login_img .star span:nth-child(7){ 195 6px; 196 height: 6px; 197 top: 250px; 198 left: 350px; 199 } 200 #login_img .fly_star span{ 201 90px; 202 height: 3px; 203 background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0)); 204 background: -o-linear-gradient(left, rgba(255, 255, 255, 0.67), rgba(255,255,255,0)); 205 background: linear-gradient(to right, rgba(255, 255, 255, 0.67), rgba(255,255,255,0)); 206 transform: rotate(-45deg); 207 } 208 #login_img .fly_star span:nth-child(1){ 209 top:60px; 210 left: 80px; 211 } 212 #login_img .fly_star span:nth-child(2){ 213 top: 210px; 214 left: 332px; 215 opacity: 0.6; 216 } 217 #login_img p{ 218 text-align: center; 219 color: #af4b55; 220 font-weight: 600; 221 margin-top: 365px; 222 font-size: 25px; 223 } 224 #login_img p i{ 225 font-style: normal; 226 margin-right: 45px; 227 } 228 #login_img p i:nth-last-child(1){ 229 margin-right: 0; 230 } 231 /*提示*/ 232 #hint{ 233 100%; 234 line-height: 70px; 235 background: linear-gradient(-90deg, #9b494d, #bf5853); 236 text-align: center; 237 font-size: 25px; 238 color: #fff; 239 box-shadow: 0 0 20px #733544; 240 display: none; 241 opacity: 0; 242 transition: .5s; 243 position: absolute; 244 top: 0; 245 z-index: 999; 246 } 247 /* 响应式 */ 248 @media screen and (max-1000px ) { 249 #login_img{ 250 display: none; 251 } 252 #login_wrap{ 253 490px; 254 margin-right: -245px; 255 } 256 #login{ 257 100%; 258 259 } 260 } 261 @media screen and (max-560px ) { 262 #login_wrap{ 263 330px; 264 margin-right: -165px; 265 } 266 #login span{ 267 margin-left: -125px; 268 } 269 .form input{ 270 250px; 271 } 272 .btn{ 273 113px; 274 } 275 } 276 @media screen and (max-345px ) { 277 #login_wrap { 278 290px; 279 margin-right: -145px; 280 } 281 } 282 label.error{ 283 color: red; 284 } 285 </style> 286 <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> 287 <script src="js/jquery.validate.min.js" type="text/javascript" charset="utf-8"></script> 288 <script src="js/messages_zh.js" type="text/javascript" charset="utf-8"></script> 289 </head> 290 291 292 <body> 293 <div id="bg"> 294 <div id="hint"><!-- 提示框 --> 295 <p>登录失败</p> 296 </div> 297 <div id="login_wrap"> 298 <div id="login"><!-- 登录注册切换动画 --> 299 <div id="status"> 300 <i style="top: 0">Log</i> 301 <i style="top: 35px">Sign</i> 302 <i style="right: 5px">in</i> 303 </div> 304 <span> 305 <form action="#" id="formChick"> 306 <p class="form"><label for="txt_cname"> 307 <input type="text" name="user" id="user" paceholder="username"></label></p> 308 <p class="form"><input type="password" name="passwd" id="passwd" placeholder="password"></p> 309 <p class="form confirm"><input type="password" id="confirm-passwd" placeholder="confirm password"></p> 310 <input type="button" value="Log in" class="btn" onclick="login()" style="margin-right: 20px;"> 311 <input type="button" value="Sign in" class="btn" onclick="signin()" id="btn"> 312 </form> 313 <a href="#">Forget your password?</a> 314 </span> 315 </div> 316 317 <div id="login_img"><!-- 图片绘制框 --> 318 <span class="circle"> 319 <span></span> 320 <span></span> 321 </span> 322 <span class="star"> 323 <span></span> 324 <span></span> 325 <span></span> 326 <span></span> 327 <span></span> 328 <span></span> 329 <span></span> 330 <span></span> 331 </span> 332 <span class="fly_star"> 333 <span></span> 334 <span></span> 335 </span> 336 <p id="title"><i>C</i><i>L</i><i>O</i><i>U</i><i>D</i></p> 337 </div> 338 </div> 339 </div> 340 341 <script> 342 var onoff = true//根据此布尔值判断当前为注册状态还是登录状态 343 var confirm = document.getElementsByClassName("confirm")[0] 344 345 //自动居中title 346 var name_c = document.getElementById("title") 347 name = name_c.innerHTML.split("") 348 name_c.innerHTML = "" 349 for (i = 0; i < name.length; i++) 350 if (name[i] != ",") 351 name_c.innerHTML += "<i>" + name[i] + "</i>" 352 //引用hint()在最上方弹出提示 353 function hint() { 354 let hit = document.getElementById("hint") 355 hit.style.display = "block" 356 setTimeout("hit.style.opacity = 1", 0) 357 setTimeout("hit.style.opacity = 0", 2000) 358 setTimeout('hit.style.display = "none"', 3000) 359 } 360 //注册按钮 361 function signin() { 362 let status = document.getElementById("status").getElementsByTagName("i") 363 let hit = document.getElementById("hint").getElementsByTagName("p")[0] 364 if (onoff) { 365 confirm.style.height = 51 + "px" 366 status[0].style.top = 35 + "px" 367 status[1].style.top = 0 368 onoff = !onoff 369 } else { 370 if (!/^[A-Za-z0-9]+$/.test(user.value)) 371 hit.innerHTML = "账号只能为英文和数字" 372 else if (user.value.length < 6) 373 hit.innerHTML = "账号长度必须大于6位" 374 else if (passwd.value.length < 6) 375 hit.innerHTML = "密码长度必须大于6位" 376 else if (passwd.value != con_pass.value) 377 hit.innerHTML = "两次密码不相等" 378 else if (passwd.value = con_pass.value) { 379 submit(function(res) { 380 if (res == "exist") 381 hit.innerHTML = "该账号已存在" 382 else if (res == true) { 383 hit.innerHTML = "账号注册成功，两秒后自动刷新页面" 384 setTimeout("window.location.reload()", 2000) 385 } else if (res == false) 386 hit.innerHTML = "账号注册失败" 387 }) 388 } 389 hint() 390 } 391 } 392 393 //登录按钮 394 function login() { 395 if (onoff) { 396 let request = new XMLHttpRequest() 397 let url = "" 398 request.open("post", url, true) 399 let data = new FormData() 400 data.append("user", user.value) 401 data.append("passwd", passwd.value) 402 request.onreadystatechange = function() { 403 if (this.readyState == 4) { 404 if (this.responseText == false) 405 hint() 406 else 407 window.location.href = this.responseText; 408 } 409 } 410 request.send(data) 411 } else { 412 let status = document.getElementById("status").getElementsByTagName("i") 413 confirm.style.height = 0 414 status[0].style.top = 0 415 status[1].style.top = 35 + "px" 416 onoff = !onoff 417 } 418 } 419 420 </script> 421 422 423 </body></html>