逆水行舟,不進則退
阿新 • • 發佈:2018-12-16
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>逆水行舟不進則退</title> <style> .pg-body{ width: 900px; height: 500px; border: solid blue; position: fixed; left: 17%; top: 12%; right: -250px; bottom: -250px; } .pg-left{ height: 500px; width: 500px; border-right: solid blue; float: left; } .pg-img{ width: 450px; height: 450px; padding-left: 25px; padding-top: 25px; } .pg-right{ width: 396px; height: 496px; float: left; } .pg-content{ height: 400px; width: 300px; margin-left: 47px; margin-top: 45px; } </style> </head> <body style="margin: 0"> <div class="pg-body"> <div class="pg-left"> <img src="8.jpg" class="pg-img"> </div> <div class="pg-right"> <div class="pg-content"> <div style="width: 155px;margin: 0 auto;font-size: larger;font-weight: bold;color: red;padding-top: 25px;padding-bottom: 25px"> 逆水行舟不進則退 </div> <div> <div style="padding-top: 25px;padding-bottom: 25px"> <label for="i1">使用者名稱:</label> <input id="i1" type="text"> </div> <div style="padding-top: 25px;padding-bottom: 25px;padding-left: 15px"> <label for="i2">密碼:</label> <input id="i2" type="text"> </div> <div style="padding-top: 50px;padding-left: 95px"> <a id="i3"> <input id="i5" type="submit" value="登入"> </a> <a id="i4" style="padding-left: 25px" href="https://blog.csdn.net/qq_41901915"> <input type="submit" value="註冊"> </a> </div> </div> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('#i5').click(function () { var name=$('#i1').val(); if(name.length>10){ alert('使用者名稱長度不能超過10'); } if(name.length<=0){ alert('使用者名稱內容不能為空'); } var number=$('#i2').val(); if(number.length>10){ alert('密碼長度不能超過10'); } if(number.length<=0){ alert('密碼不能為空'); } if(name==='123'&&number==='123'){ window.location.href='https://blog.csdn.net/qq_41901915'; }else { alert('使用者名稱或密碼錯誤'); } }); </script> </body> </html>