效果图:
需要建立以下五个文件:
在webcontent文件夹下面建立css文件,login.jsp与loginjudge.jsp,registcheck.jsp直接放到webcontent文件夹下面,normalize.min.css与login.css放到css文件里面
数据库我建立的是Td_Snacks,连接数据库账号和密码是root,111,不同的请自己修改代码
建立数据库Td_Snacks
表:user
SET FOREIGN_KEY_CHECKS=0; -- ---------------------------- -- Table structure for users -- ---------------------------- DROP TABLE IF EXISTS `users`; CREATE TABLE `users` ( `userid` varchar(20) NOT NULL, `username` varchar(8) DEFAULT NULL, `userpwd` varchar(20) DEFAULT NULL, `useremail` varchar(50) DEFAULT NULL, `useraddress` char(100) CHARACTER SET utf8 DEFAULT NULL, `u_profile` varchar(10000) DEFAULT NULL, PRIMARY KEY (`userid`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
1.login.jsp
登录/注册 function check(form){ if(form.user.value == ''){ alert("账号为空!"); return false; } if(form.password.value == ''){ alert("密码为空!"); return false; } return true; } function check1(form){ if(form.user1.value == ''){ alert("用户名为空!"); return false; } if(form.password1.value == ''){ alert("密码为空!"); return false; } if(form.email1.value == ''){ alert("邮箱为空!"); return false; } if(form.password11.value == ''){ alert("重复密码为空!"); return false; } if(form.password1.value !=form.password11.value){ alert("两次密码输入不一致!"); return false; } return true; }x忘记密码
输入邮箱找回密码
欢迎回来
请先登录
用户注册
注册后享受更多服务
2.loginjudge.jsp
登录 alert('账号或密码错误!');"); out.println("window.location.href='javascript:history.back(-1)'"); } } %>
3.registcheck.jsp
注册判断 alert('该邮箱已被注册,点击返回!');window.location='login.jsp'"); } if(result==0) { String sql1="insert into users(userid,userpwd,username,useremail,u_profile) values('"+id+"','"+pwd+"','"+name+"','"+email+"','img/touxiang.jpg')"; stmt.execute(sql1); //执行sql1语句,插入到users表 System.out.println(pwd); System.out.println(name); System.out.println(email); %> alert('注册成功,您的账号为:'++'!');window.top.location='login.jsp?newid='++''window.open("login.jsp")
4.login.css
* { outline-width: 0; font-family: "Nunito" !important; } input{outline:medium;} input:-internal-autofill-selected { background-color: rgba(119,119,119,0.01) !important; background-image: none !important; box-shadow: inset 0 0 0 1000px rgba(119,119,119,0.01) !important; } input:-webkit-autofill { box-shadow: 0 0 0px 1000px rgba(119,119,119,0.01) inset !important; transition: background-color 50000s ease-in-out 0s; } input:-webkit-autofill:focus { box-shadow: 0 0 0px 1000px rgba(119,119,119,0.01) inset !important; } body { height: 100vh; width: 100vw; background:rgb(255, 128, 128); background: -webkit-linear-gradient(top left, rgb(255, 255, 255) 0%,rgb(255, 128, 128) 100%);/*渐变设置*/ background: linear-gradient(to bottom right, rgb(255, 255, 255) 0%, rgb(255, 128, 128) 100%); display: flex; justify-content: center; align-items: center; } #formContainer { z-index: 2; display: flex; transition: 0.2s ease; height: 342.5px; transition-delay: 0.3s; } #formContainer.toggle { height: 480px; transition-delay: 0s; } .return00 { z-index: 5; color:#ababab; font-size: 40px; margin:-10px 0px 0px 467px; position: absolute; cursor: pointer; } .return00:hover { color: #8b8378; } .formLeft { background: rgb(255, 249, 249); border-radius: 5px 0 0 5px; padding: 0 35px; box-sizing: border-box; display: flex; align-items: center; } .formLeft img { display: block; width: 72px; border-radius: 50%; box-shadow: 0 5px 5px rgb(255, 128, 128); } .formRight { position: relative; overflow: hidden; border-radius: 0 5px 5px 0; display: flex; flex-direction: column; justify-content: center; } .formRight:before { content: ""; position: absolute; top: -10px; left: -10px; width: calc(100% + 20px); height: calc(100% + 20px); background: url("../images/bg.jpg") center/cover fixed; box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.2); filter: blur(5px); } .formRight form { position: relative; width: 350px; padding: 25px; box-sizing: border-box; white-space: nowrap; overflow: hidden; } .formRight form header { color: #fff; text-align: center; margin-bottom: 15px; } .formRight form header h1 { margin: 0; font-weight: 400; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .formRight form header p { margin: 5px 0 0; opacity: 0.5; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .formRight form section label { display: block; margin-bottom: 15px; position: relative; } .formRight form section label p { color: #fff; margin: 0 0 10px 0; font-weight: 600; font-size: 12px; opacity: 0.5; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .formRight form section label input { width: 100%; display: block; border: none; background: transparent; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 0 0 10px; box-sizing: border-box; font-weight: 600; } .formRight form section label input:focus~.border { transform: scale(1, 1); } .formRight form section label input:not(:-moz-placeholder-shown)~.border { transform: scale(1, 1); } .formRight form section label input:not(:-ms-input-placeholder)~.border { transform: scale(1, 1); } .formRight form section label input:not(:placeholder-shown)~.border { transform: scale(1, 1); } .formRight form section label .border { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; transform: scale(0, 1); transition: 0.2s ease; } .formRight form section label:last-child { margin-bottom: 0; } .formRight form section button { background: rgb(255, 202, 202); border: none; width: 100%; padding: 10px 0; font-weight: 600; color: #fff; cursor: pointer; } .formRight form section button:hover { background: rgb(255, 147, 147); } .formRight form footer { margin-top: 15px; display: flex; } .formRight form footer button { background: transparent; padding: 0; border: none; color: #fff; cursor: pointer; font-size: 12px; font-weight: bold; flex: 1; opacity: 0.5; } .formRight form footer button:hover { opacity: 1; } .formRight form.otherForm { top: 0; left: 0; position: absolute; background: rgb(255, 249, 249); height: 100%; z-index: 1; display: flex; flex-direction: column; justify-content: center; width: 0; padding: 25px 0; transition: 0.2s ease; transition-delay: 0.2s; border-left: 1px solid rgba(0, 0, 0, 0.1); } .formRight form.otherForm header { color: #000; opacity: 0; transition: 0.2s ease; transition-delay: 0s; } .formRight form.otherForm p { color: #000; } .formRight form.otherForm section { opacity: 0; transition: 0.2s ease; transition-delay: 0s; } .formRight form.otherForm footer { border-top-color: rgba(0, 0, 0, 0.1); opacity: 0; } .formRight form.otherForm footer button { color: #000; } .formRight form.otherForm input { border-color: rgba(0, 0, 0, 0.1); color: #000; } .formRight form.otherForm .border { background: #000; } .formRight form.otherForm.toggle { width: 100%; padding: 25px; transition-delay: 0s; } .formRight form.otherForm.toggle header, .formRight form.otherForm.toggle section, .formRight form.otherForm.toggle footer { opacity: 1; transition-delay: 0.3s; } .bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .bg-bubbles li { position: absolute; list-style: none; display: block; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.15); bottom: 0px; -webkit-animation: square 25s infinite; animation: square 25s infinite; -webkit-transition-timing-function: linear; transition-timing-function: linear; } .bg-bubbles li:nth-child(1) { left: 10%; } .bg-bubbles li:nth-child(2) { left: 20%; width: 80px; height: 80px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 17s; animation-duration: 17s; } .bg-bubbles li:nth-child(3) { left: 25%; -webkit-animation-delay: 4s; animation-delay: 4s; } .bg-bubbles li:nth-child(4) { left: 40%; width: 60px; height: 60px; -webkit-animation-duration: 22s; animation-duration: 22s; background-color: rgba(255, 255, 255, 0.25); } .bg-bubbles li:nth-child(5) { left: 70%; } .bg-bubbles li:nth-child(6) { left: 80%; width: 120px; height: 120px; -webkit-animation-delay: 3s; animation-delay: 3s; background-color: rgba(255, 255, 255, 0.2); } .bg-bubbles li:nth-child(7) { left: 32%; width: 80px; height: 80px; -webkit-animation-delay: 7s; animation-delay: 7s; } .bg-bubbles li:nth-child(8) { left: 55%; width: 20px; height: 20px; -webkit-animation-delay: 15s; animation-delay: 15s; -webkit-animation-duration: 40s; animation-duration: 40s; } .bg-bubbles li:nth-child(9) { left: 25%; width: 10px; height: 10px; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-animation-duration: 40s; animation-duration: 40s; background-color: rgba(255, 255, 255, 0.3); } .bg-bubbles li:nth-child(10) { left: 90%; width: 80px; height: 80px; -webkit-animation-delay: 11s; animation-delay: 11s; } @-webkit-keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-700px) rotate(600deg); transform: translateY(-700px) rotate(600deg); } } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-700px) rotate(600deg); transform: translateY(-700px) rotate(600deg); } }
5.normalize.min.css
button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */
总结
到此这篇关于利用jsp+mysql实现好看的登录与注册页面的文章就介绍到这了,更多相关jsp+mysql登录与注册页面内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部!