响应式的账号登录界面模板，内置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 ????????????width: 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 ????????????width: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 ????????????width: 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 ????????????width: 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 ????????????width: 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 ????????????width: 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 ????????????width: 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 ????????????width: 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 ????????????width: 15px;160 ????????????height: 15px;161 ????????????top: 50px;162 ????????????left: 30px;163 ????????}164 ????????#login_img .star span:nth-child(2){165 ????????????width: 10px;166 ????????????height: 10px;167 ????????????left: 360px;168 ????????????top: 80px;169 ????????}170 ????????#login_img .star span:nth-child(3){171 ????????????width: 5px;172 ????????????height: 5px;173 ????????????top: 400px;174 ????????????left: 80px;175 ????????}176 ????????#login_img .star span:nth-child(4){177 ????????????width: 8px;178 ????????????height: 8px;179 ????????????top: 240px;180 ????????????left: 60px;181 ????????}182 ????????#login_img .star span:nth-child(5){183 ????????????width: 4px;184 ????????????height: 4px;185 ????????????top: 20px;186 ????????????left: 200px;187 ????????}188 ????????#login_img .star span:nth-child(6){189 ????????????width: 4px;190 ????????????height: 4px;191 ????????????top: 460px;192 ????????????left: 410px;193 ????????}194 ????????#login_img .star span:nth-child(7){195 ????????????width: 6px;196 ????????????height: 6px;197 ????????????top: 250px;198 ????????????left: 350px;199 ????????}200 ????????#login_img .fly_star span{201 ????????????width: 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 ????????????width: 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-width:1000px ) {249 ????????????#login_img{250 ????????????????display: none;251 ????????????}252 ????????????#login_wrap{253 ????????????????width: 490px;254 ????????????????margin-right: -245px;255 ????????????}256 ????????????#login{257 ????????????????width: 100%;258 ????????????????259 ????????????}260 ????????}261 ????????@media screen and (max-width:560px ) {262 ????????????#login_wrap{263 ????????????????width: 330px;264 ????????????????margin-right: -165px;265 ????????????}266 ????????????#login span{267 ????????????????margin-left: -125px;268 ????????????}269 ????????????.form input{270 ????????????????width: 250px;271 ????????????}272 ????????????.btn{273 ????????????????width: 113px;274 ????????????}275 ????????}276 ????????@media screen and (max-width:345px ) {277 ????????????#login_wrap {278 ????????????????width: 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 ????//自动居中title346 ????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 = 0368 ????????????onoff = !onoff369 ????????} 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 ????????????????????else407 ????????????????????????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 = 0414 ????????????status[0].style.top = 0415 ????????????status[1].style.top = 35 + "px"416 ????????????onoff = !onoff417 ????????}418 ????}419 420 </script>421 422 423 </body></html>响应式的账号登录界面模板完整代码，内置form表单和js控件
原文地址：https://www.cnblogs.com/yanpingping/p/10492162.html