Re:从零开始的西柚邮箱登录界面f
first：先来看看成品效果图～～～～
then, how to?
源码在此。。。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>西南石油大学电子邮件系统</title> 6 <link rel="stylesheet" href="./css/style.css"> 7 <script> 8 var checkForm = () => { 9 let acount = document.querySelector('#acount') 10 let password = document.querySelector('#password') 11 if ('' == acount.value) { 12 alert('请填写账号') 13 return 14 } 15 if ('' == password.value) { 16 alert('请填写密码') 17 return 18 } 19 if ('admin' != acount.value) { 20 window.alert('不存在此账号') 21 acount.value = '' 22 password.value = '' 23 acount.focus() 24 acount.select() 25 } else if ('admin' != password.value) { 26 window.alert('密码错误') 27 password.value = '' 28 password.focus() 29 } else if ('admin' == acount.value && 'admin' == password.value){ 30 window.alert('登陆成功') 31 window.location.href = 'main.htm' 32 } 33 } 34 </script> 35 </head> 36 <body> 37 <header class="head"> 38 <img src="./img/login_logo.png" class="logo"> 39 <span class="help">帮助</span> 40 </header> 41 <div class="content-wrapper"> 42 <div class="login-wrapper"> 43 <form action="#"> 44 <div class="form-head"> 45 <span class="form-title">账号登录</span> 46 <img src="./img/dragbar.png" class="dragbar"> 47 </div> 48 <div class="form-content"> 49 <span class="b-block-text">用户登录</span> 50 <input type="text" id="acount" class="info-item" placeholder="用户名" required> 51 <input type="password" id="password" class="info-item" placeholder="密码" required> 52 <div class="footer-info"> 53 <span class="warning-info">学生选择@stu.swpu.edu.cn</span> 54 <a href="#" class="forget-psd">忘记密码</a> 55 </div> 56 <input class="submit" type="submit" value="登录" onclick="checkForm();return false;"> 57 </div> 58 </form> 59 </div> 60 <div class="footer">西南石油大学</div> 61 </div> 62 </body> 63 </html>
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 .head { 6 width: 100%; 7 height: 76px; 8 background: #f5f5f5; 9 background-size: cover; 10 } 11 .logo { 12 position: absolute; 13 top: 15px; 14 left: 10px; 15 } 16 .help { 17 position: absolute; 18 top: 40px; 19 right: 35px; 20 font-weight: 700; 21 font-size: 15px; 22 color: #b3b3b3; 23 } 24 .content-wrapper { 25 position: absolute; 26 top: 92px; 27 left: 50%; 28 margin-left: -475px; 29 width: 950px; 30 height: 520px; 31 background: url(../img/login_bg_05.jpg) 32 } 33 .login-wrapper { 34 position: absolute; 35 top: 50%; 36 margin-top: -200px; 37 right: 35px; 38 width: 380px; 39 height: 360px; 40 background: #fff; 41 } 42 .login-wrapper > form { 43 width: 300px; 44 height: 340px; 45 top: 15px; 46 } 47 .form-head { 48 width: 360px; 49 height: 35px; 50 background: url(../img/c.png); 51 font-size: 15px; 52 color: #eee; 53 text-align: center; 54 line-height: 35px; 55 opacity: .8; 56 cursor: pointer; 57 } 58 .form-content { 59 margin: 10px 0 10px 0; 60 } 61 .dragbar { 62 position: absolute; 63 right: 0; 64 width: 20px; 65 height: 35px; 66 cursor: move; 67 } 68 .b-block-text { 69 display: block; 70 font-weight: 600; 71 height: 22px; 72 padding-top: 10px; 73 text-indent: 30px; 74 } 75 .info-item { 76 width: 300px; 77 height: 40px; 78 margin: 15px 0 12px 30px; 79 padding-left: 8px; 80 font-size: 18px; 81 background-color: #f5f5f5; 82 } 83 .footer-info { 84 margin-top: 20px; 85 } 86 .warning-info { 87 color: red; 88 margin-left: 30px; 89 } 90 .forget-psd { 91 position: absolute; 92 right: 30px; 93 color: #c5c5c5; 94 text-decoration: none; 95 } 96 .forget-psd:hover { 97 color: #a5a5a5; 98 text-decoration-line: underline; 99 text-decoration-color: #c5c5c5; 100 } 101 .submit { 102 position: absolute; 103 right: 35px; 104 bottom: 25px; 105 width: 140px; 106 height: 40px; 107 background: #76f; 108 font-size: 15px; 109 color: #fff; 110 letter-spacing: 10px; 111 text-align: center; 112 cursor: pointer; 113 } 114 .footer { 115 width: 100%; 116 height: 60px; 117 background: #f1f1f1; 118 color: #bbb; 119 font-size: 14px; 120 text-align: center; 121 line-height: 60px; 122 position: absolute; 123 bottom: 0; 124 }
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Welcome to SWPU</title> 7 </head> 8 9 <body> 10 <div class="welcome"> 11 Welcome to SWPU 12 </div> 13 <style> 14 @keyframes r { 15 0% { 16 transform: scale(0.8) translateX(-20); 17 font-size: 32px; 18 } 19 20 12% { 21 transform: scale(0.3) translateX(-150); 22 font-size: 15px; 23 } 24 25 24% { 26 transform: scale(-0.4) translateX(100); 27 font-size: 1px; 28 } 29 30 46% { 31 transform: scale(-1) translateX(150); 32 font-size: 16px; 33 } 34 35 68% { 36 transform: scale(-0.3) translateX(0); 37 font-size: 8px; 38 } 39 40 82% { 41 transform: scale(0.4) translateX(-150); 42 } 43 44 } 45 46 .welcome { 47 position: absolute; 48 left: 50%; 49 top: 50%; 50 margin-left: -250px; 51 margin-top: -30px; 52 width: 500px; 53 height: 60px; 54 font-size: 35px; 55 animation: r 3s infinite; 56 animation-delay: 1s; 57 font-size: 35px; 58 } 59 </style> 60 </body> 61 62 </html>
总得说几句话吧
总体来说，没什么难度，主要是有些bug始终没搞定：
- 由于需要在客户端进行登录验证，就需要设置onclick事件，检查，然后跳转。但是，由于没有设置表单的提交action，在这里进行本页面跳转是不成功的，至于为什么，这就是个问题了，戳这里看详情
- 第一个很好解决，但是问题来了，拦截了事件冒泡之后，form表单中表项默认的required就不会进行检查了。。。WTF？这么好的东西就没啦？于是又多了一串检查空表项的代码
