index.jsp
<%–
Created by IntelliJ IDEA.
User: L
Date: 2021/1/8
Time: 19:02
To change this template use File | Settings | File Templates.
–%>
<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
<link rel="stylesheet" type="text/css" href="login.css">
<script>
</script>
欢迎使用
<input type="text" id="a" required="required" placeholder="用户名" name="username">
<button class="but" type="submit">登录</button>
<button class="exit" type="reset" >取消</button>
css样式 login.css
jsp {
width: 100%;
height: 100%;
overflow: hidden;
font-style: normal;
}
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
margin: 0;
background-color: #92b1ad;
}
#login {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
#login h1 {
color: #fff;
text-shadow: 0 0 10px;
letter-spacing: 1px;
text-align: center;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
input {
width: 278px;
height: 25px;
margin-bottom: 10px;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px;
border-top: 1px solid #312E3D;
border-left: 1px solid #312E3D;
border-right: 1px solid #312E3D;
border-bottom: 1px solid #56536A;
border-radius: 4px;
background-color: #2D2D3F;
}
.but {
width: 280px;
min-height: 20px;
display: block;
background-color: #4a77d4;
border: 1px solid #3762bc;
color: #fff;
padding: 9px 14px;
font-size: 15px;
line-height: normal;
border-radius: 10px;
margin: 0;
margin-bottom: 20px;
}
.exit{
width: 280px;
min-height: 20px;
display: block;
background-color: #4a77d4;
border: 1px solid #3762bc;
color: #fff;
padding: 9px 14px;
font-size: 15px;
line-height: normal;
border-radius: 10px;
margin: 0;
}
.register {
width: 280px;
min-height: 20px;
display: block;
background-color: #4a77d4;
border: 1px solid #3762bc;
color: #fff;
padding: 9px 14px;
font-size: 15px;
line-height: normal;
border-radius: 10px;
margin-top: 20px;
}
css样式 style.css
*{
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
}
html,body{
height: 100%;
}
body{
display: grid;
place-items: center;
background: #dde1e7;
}
.calculator{
width: 350px;
background: #dde1e7;
padding: 40px 30px;
border-radius: 10px;
box-shadow: -3px -3px 7px #ffffff,
2px 2px 5px rgba(94,104,121,0.288);
}
form .result{
height: 60px;
width: 100%;
background: #ffffff;
border-radius: 10px;
text-align: right;
box-shadow: inset -3px -3px 7px #ffffff73,
inset 2px 2px 5px rgba(94,104,121,0.288);
}
.result input{
width: 100%;
height: 30px;
background: none;
border: none;
outline: none;
font-size: 30px;
padding: 0 20px;
text-align: right;
font-weight: 500;
color: #595959;
pointer-events: none; //不允许用户输入
font-family: ‘Poppins’,sans-serif;
}
form .buttons{
text-align: center;
padding: 40px 0 0 0;
cursor: pointer;
}
#bu0{
width: 124px;
}
.buttons input[type=“button”]{
height: 56px;
width: 56px;
font-size: 23px;
margin: 4px;
border: none;
outline: none;
background: #dde1e7;
border-radius: 5px;
color: #595959;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(94,104,121,0.288);
}
main.jsp
<%–
Created by IntelliJ IDEA.
User: L
Date: 2021/1/8
Time: 20:18
To change this template use File | Settings | File Templates.
–%>
<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>
src部分
()
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet(urlPatterns = “/login”)
public class loginservlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username;
String password;
username = req.getParameter(“username”);
password = req.getParameter(“password”);
String[] name = {“admin”};
String[] pwd = {“123456”};
for (int i = 0; i < name.length; i++) {
if (username.equals(name[i]) && password.equals(pwd[i]))
req.getRequestDispatcher(“main.jsp”).forward(req, resp);
}
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req,resp);
}
}