CSS+H5的登入介面
阿新 • • 發佈：2018-12-23
<!DOCTYPE HTML> <html> <head> <title>後臺管理系統</title> <meta charset="utf-8"> <style> .main_bar{ width:auto; height:350px; background-color:#6495ED; margin-top:10%; margin-left:0%; padding:0px; } .login_form{ width:40%; height:100%; background-color:#112435; margin:0 auto; } #form_weight{ width:auto; height:auto; background-color:#d0d0d0; margin:0 auto; } .title{ width:100%; height:20%; color:#fff; text-align:center;/*使用text-align代替align*/ font-size:20pt; font-family:"宋體"; } .txt{ display:block;/*設定為獨佔一行*/ width:60%; margin:0 auto; height:35%; font-size:15pt; border-radius:10px; border:0px; padding-left:8px; } #icode{ width:30%; height:35%; font-size:15pt; border-radius:10px; border:0px; margin-left:75px; padding-left:8px; } #code{ color:#fff; background-color:#000; font-size:20pt; margin-left:auto; padding:5px 30px 5px 30px; cursor:pointer; } .btn{ width:70%; margin-left:15%; height:40px; border:0px; font-size:15pt; font-family:"微軟雅黑"; background-color:#FC5628; color:#fff; border-radius:20px; } #forget{ width:70%; text-align:right;margin:0 auto;/*這兩者必須一起使用*/ padding:5px; } #forget a{ color:#000000; text-decoration:none; } #forget a:hover{ color:#ff0000; text-decoration:none; } #copyright{ width:100%; padding-top:20px; text-align:center; color:#707070 } </style> <script type="text/javascript"> var code; //document.getElementById("code") = changeImg; function changeImg(){ var arr = new Array( '1','2','3','4','5','6','7','8','9','0', 'a','b','c','d','e','f','g','h','i','j', 'k','l','m','n','o','p','q','r','s','t', 'u','v','w','x','y','z', 'A','B','C','D','E','F','G','H','I','J', 'K','L','M','N','O','P','Q','R','S','T', 'U','V','W','X','Y','Z' ); code=''; //隨機獲得四個字元作為驗證碼 for(var i = 0;i < 4;++ i){ var random = parseInt(Math.random()*arr.length); code += arr[random]; } document.getElementById('code').innerHTML = code; } function check(){ var input = document.getElementById('icode').value; if(input.toLowerCase() == code.toLowerCase()){ return true; }else alert('驗證碼輸入不正確'); return false; } </script> </head> <body onload="changeImg()"> <div class="main_bar"> <div class="login_form" > <div class="title"> 系統登入 </div> <form onsubmit="return check()" action="main.html" id="form1"> <div id="form_weight" > <br/> <input type="text" placeholder="請輸入賬號" value="使用者名稱" id="box_name" onfocus="this.value=''" onblur="if(this.value=='')this.value='使用者名稱'" class="txt"/> <br/> <input type="password" placeholder="請輸入密碼" id="box_password" class="txt" value="password" onfocus="this.value=''"/> <br/> <input type="text" id="icode" placeholder="請輸入正確的驗證碼" value="驗證碼" onfocus="this.value=''" onblur="if(this.value=='')this.value='驗證碼'"/> <span id="code" title="看不清，換一張" onclick="changeImg()"></span> <div id="forget"> <a href="#">忘記密碼?</a> </div> <input type="submit" value="登入" class="btn" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'"/> <div id="copyright"> Power By Dqd ©CopyRight 2016 </div> </div> </form> </div> </div> </body> </html>