使用css美化界面
通过css可以美化界面。
界面样式及框架设定：
/*文件名：style.css*/
body
{
/*添加背景图片*/
background-image:url(../images/regbg.jpg);
background-attachment: fixed;
-moz-background-size:100% 100%;
background-size:100% 100%;
color:#5d5d5d;
display: flex;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
align-items: center;
justify-content: center;
}
* {
padding: 0;
margin: 0;
}
#myBox {
width: 500px;
height: 540px;
/*边框颜色*/
/*border: 1px solid #000000;*/
/*背景颜色*/
background: #eee;
color: #333;
}
#myBox {
width: 500px;
height: 540px;
/*边框颜色*/
/*border: 1px solid #000000;*/
/*背景颜色*/
background: #eee;
color: #333;
}
div {
height: 500px;
}
form{
width:400px;
height:480px;
margin:10px auto;
padding-top:10px;
}
span{
display: inline-block;
width: 400px;
text-align: center;
font-size: 40px;
}
/*
text-decoration 修饰文本
a:link 链接自未点击上去时候
a:visited 链接已经点击过的
a:hover鼠标放在链接上未点击
a:active 是介于hover visited 之间的一个状态，可以说是链接被按下时候的状态
*/
a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #0000CD;
cursor: pointer;
}
a:active {
text-decoration: none;
color: #0000CD;
}
.btn{
display: inline-block;
/*外边框*/
margin-top: 10px;
/*这个表格单元的上和下内边距是10px，左和右内边距是185px*/
padding: 10px 185px;
border-radius: 4px;
background-color: #63b7ff;
color: #fff;
cursor: pointer;
}
.btn:hover{
background-color: #99c6ff;
}
input[type="text"],[type="password"]{
background:#ffffff ;
-web-kit-appearance:none;
-moz-appearance:none;
font-size: 0.9em;
display: block;
outline: 0;
box-sizing: border-box;
color: #6a6f77;
border-radius:7px;
border:1px solid #c7cccf;
}登录页面效果图：
登录界面设计：
<!--文件名：login.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="myBox" >
<form id="loginFrom" method="post" action="./LoginInformation.jsp" style="width:400px; height:480px; margin:10px auto; padding-top:15px;" >
<table>
<tr>
<td><span>用户登录</span></td>
</tr><tr><td> </td></tr>
<tr>
<td>用户名</td>
</tr>
<tr>
<td><input type="text" id="id" name="cdp_id" placeholder="请输入用户名" style="width: 100%;height: 35px"></td>
</tr><tr><td> </td></tr>
<tr>
<td>密码</td>
</tr>
<tr>
<td><input type="password" id="pwd" name="cdp_pwd" placeholder="请输入密码" style="width: 100%;height: 35px"></td>
</tr><tr><td> </td></tr>
<tr>
<td><p align="left"><input type="checkbox">记住我</p>
<p align="right">
<a href="register.html">注册账号</a>　　
<a href="retrieve.html">忘记密码</a>
</p>
</td>
</tr><tr></tr>
<tr>
<td><input class="btn" type="button" value="登录" onclick="GetLogin()"></td>
</tr><tr><td> </td></tr><tr>
<tr>
<td align="center" valign="middle">第三方登录</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
function GetLogin() {
let id = document.getElementById('id');
let pwd = document.getElementById('pwd');
id=id.value;
pwd=pwd.value;
if(id == "" || pwd == ""){
alert("请输入登陆信息！");
return false;
}
document.getElementById("loginFrom").submit();
}
</script>
</body>
</html>注册界面和密码找回界面的背景图片与登录界面的一致，在这里只作表单展示。
注册页面设计：
<!--文件名：register.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="myBox">
<form id="registerFrom" action="./RegisterInformation.jsp" method="post">
<table>
<tr>
<td><span>用户注册</span></td>
</tr><tr style="height: 8px"><td></td></tr>
<tr>
<td>用户名</td>
</tr>
<tr>
<td>
<input type="text" id="userid" name="cdp_id" placeholder="请输入用户名" style="width: 100%;height: 35px">
</td>
</tr><tr style="height: 3px"><td></td></tr>
<tr>
<td>密码</td>
</tr>
<tr>
<td><input type="password" id="pwd1" name="pwd" placeholder="请输入密码" style="width: 100%;height: 35px"></td>
</tr><tr style="height: 3px"><td></td></tr>
<tr>
<td>确认密码</td>
</tr>
<tr>
<td><input type="password" id="pwd2" name="cdp_pwd" placeholder="请再次输入密码" style="width: 100%;height: 35px"></td>
</tr><tr style="height: 3px"><td></td></tr>
<tr>
<td>邮箱</td>
</tr>
<tr>
<td><input type="text" id="mail" name="cdp_mail" placeholder="请输入邮箱" style="width: 100%;height: 35px"></td>
</tr><tr style="height: 3px"><td></td></tr>
<tr>
<td>邀请码</td>
</tr>
<tr>
<td><input type="text" id="code" name="cdp_code" placeholder="请输入邀请码" style="width: 100%;height: 35px"></td>
</tr><tr style="height: 3px"><td></td></tr>
<tr>
<td>
<a onclick="Getcode()">点击获取邀请码</a>
　　　　　　　　　　
<a href="login.html">已有账号,去登陆</a>
</td>
</tr><tr style="height: 5px"><td></td></tr>
<tr>
<td>
<input class="btn" type="button" value="注册" onclick="GetRegister()">
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
function Getcode() {
let arr= ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9",
"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"];
let num="";
for(let i=0;i<31;i++){
num+=arr[parseInt(Math.random()*62)];
}
alert(num);
}
</script>
<script type="text/javascript">
function GetRegister() {
let id = document.getElementById('userid').value;
let pwd1 = document.getElementById('pwd1').value;
let pwd2 = document.getElementById('pwd2').value;
let email = document.getElementById('mail').value;
let code = document.getElementById('code').value;
if(id==""||pwd1 ==""||pwd2==""||email==""||code==""){
alert("请完善注册信息");
return false;
}
if(pwd1!=pwd2){
//定位到pwd2文本框
document.getElementById('pwd2').focus();
return false;
}
document.getElementById("registerFrom").submit();
}
</script>
</body>
</html>找回密码界面设计：
<!--文件名：retrieve.html--> <!--暂时没有添加功能--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>找回密码</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div style="background: #eee; color: #333; width: 500px; height: 280px;"> <form style="width:400px; height:480px; margin:10px auto; padding-top:20px;"> <table style="width:400px; height:200px; margin:10px auto; padding-top:5px;"> <tr> <td><span>找回密码</span></td> </tr> <tr> <td>邮箱</td> </tr> <tr> <td><input type="text" id="email" placeholder="请输入邮箱" style="width: 100%;height: 35px"></td> </tr> <tr> <td> <p align="right"><a href="login.html">回去登录</a></p> </td> </tr> <tr> <td><input class="btn" type="button" value="提交" onclick=""></td> </tr><tr><td> </td></tr><tr> </table> </form> </div> </body> </html>
关于登录验证操作，通过直接连接到SQL Server 2008R2数据库，通过SQL语句查询、插入用户信息。
用户登录的信息验证：
<%//由于编译器不存在JavaWeb编程语言，选择了Java语言 %>
<%//文件名：LoginInformation.jsp %>
<%@ page import="java.sql.*" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");//解决中文乱码问题
%>
<%!
ArrayList<String> cdp_data = new ArrayList<String>();
//保存数据库用户信息
public static final String DBDRIVER = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
// 驱动路径
public static final String URL = "jdbc:sqlserver:// /*IP地址*/:1433;DatabaseName=/*数据库名称*/&quo开始验证新用户注册：
#转载请注明出处！
快来制作你的简历吧 ，请猛戳这里→点击在线制作
宝塔服务器面板，一键全能部署及管理，送你3188元礼包。请猛戳这里→点我领取
