Changes
This commit is contained in:
commit
47e24378b2
196
图书管理系统.html
Normal file
196
图书管理系统.html
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
<script src="jquery.js"></script>
|
||||||
|
<style>
|
||||||
|
.page{
|
||||||
|
width:100% ;
|
||||||
|
height:740px ;
|
||||||
|
background-image: url('./图片/1.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
padding-top: 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginBox{
|
||||||
|
width:450px;
|
||||||
|
height:350px;
|
||||||
|
background-color:white;
|
||||||
|
margin-left:60%;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upperBox {
|
||||||
|
width:420px;
|
||||||
|
height:300px;
|
||||||
|
background-color:white;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box1{
|
||||||
|
width:420px;
|
||||||
|
height:80px;
|
||||||
|
background-color:white;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box1Inner{
|
||||||
|
width:120px;
|
||||||
|
height:50px;
|
||||||
|
background-color:white;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 17px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2{
|
||||||
|
width:420px;
|
||||||
|
height:120px;
|
||||||
|
background-color:white;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2Email{
|
||||||
|
width:420px;
|
||||||
|
height:40px;
|
||||||
|
background-color:#e4e4e4;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2Password{
|
||||||
|
width:420px;
|
||||||
|
height:40px;
|
||||||
|
background-color:white;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box3{
|
||||||
|
width:420px;
|
||||||
|
height:40px;
|
||||||
|
background-color:cornflowerblue;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downBox{
|
||||||
|
width:450px;
|
||||||
|
height:40px;
|
||||||
|
background-color:white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downBoxInner{
|
||||||
|
width:420px;
|
||||||
|
height:25px;
|
||||||
|
background-color:white;
|
||||||
|
border:9px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email{
|
||||||
|
width:420px;
|
||||||
|
height:25px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #e4e4e4;
|
||||||
|
border-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password{
|
||||||
|
width:420px;
|
||||||
|
height:35px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #e4e4e4;
|
||||||
|
border-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Login{
|
||||||
|
width:420px;
|
||||||
|
height:40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color:royalblue;
|
||||||
|
border-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
font-size: 20px;
|
||||||
|
color:white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register{
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
border-color:transparent;
|
||||||
|
background-color:white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forget{
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
border-color:transparent;
|
||||||
|
background-color:white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="loginBox">
|
||||||
|
<div class="upperBox">
|
||||||
|
<div class="upperInnerBox">
|
||||||
|
<div class="box1">
|
||||||
|
<div class="box1Inner"><h3>图书管理系统</h3></div>
|
||||||
|
</div>
|
||||||
|
<div class="box2">
|
||||||
|
<div class="box2Email">
|
||||||
|
<input class="email" placeholder=" 邮箱">
|
||||||
|
</div>
|
||||||
|
<div class="box2Password">
|
||||||
|
<input class="password" placeholder=" 密码">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box3"><button class="Login">登录</button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="downBox">
|
||||||
|
<div class="downBoxInner"><button class="register">注册</button>||<button class="forget">忘记密码?</button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.querySelector(".register").addEventListener("click",function (){
|
||||||
|
window.location.href="图书管理系统注册页面.html"
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
253
图书管理系统注册页面.html
Normal file
253
图书管理系统注册页面.html
Normal file
@ -0,0 +1,253 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
<script src="jquery.js"></script>
|
||||||
|
<style>
|
||||||
|
.page{
|
||||||
|
width:100% ;
|
||||||
|
height:740px ;
|
||||||
|
background-image: url('./图片/1.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
padding-top: 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loginBox{
|
||||||
|
width:450px;
|
||||||
|
height:450px;
|
||||||
|
background-color:white;
|
||||||
|
margin-left:60%;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.upperBox {
|
||||||
|
width:420px;
|
||||||
|
height:400px;
|
||||||
|
background-color:white;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box1{
|
||||||
|
width:420px;
|
||||||
|
height:60px;
|
||||||
|
background-color:white;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box1Inner{
|
||||||
|
width:120px;
|
||||||
|
height:40px;
|
||||||
|
background-color:white;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 17px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2{
|
||||||
|
width:420px;
|
||||||
|
height:240px;
|
||||||
|
background-color:white;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2Email{
|
||||||
|
width:420px;
|
||||||
|
height:40px;
|
||||||
|
background-color:#e4e4e4;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2Password1{
|
||||||
|
width:420px;
|
||||||
|
height:40px;
|
||||||
|
background-color:white;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2Password2{
|
||||||
|
width:420px;
|
||||||
|
height:40px;
|
||||||
|
background-color:white;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2Code{
|
||||||
|
width:420px;
|
||||||
|
height:40px;
|
||||||
|
background-color:white;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2CodeNumber{
|
||||||
|
width:295px;
|
||||||
|
height:40px;
|
||||||
|
background-color:#e4e4e4;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box2CodeSend{
|
||||||
|
width:110px;
|
||||||
|
height:40px;
|
||||||
|
background-color:royalblue;
|
||||||
|
border-radius: 5px;
|
||||||
|
margin-top: 25px;
|
||||||
|
margin-left: 15px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box3{
|
||||||
|
width:420px;
|
||||||
|
height:40px;
|
||||||
|
background-color:cornflowerblue;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downBox{
|
||||||
|
width:450px;
|
||||||
|
height:40px;
|
||||||
|
background-color:white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.downBoxInner{
|
||||||
|
width:420px;
|
||||||
|
height:25px;
|
||||||
|
background-color:white;
|
||||||
|
border:9px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
button{
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.email{
|
||||||
|
width:420px;
|
||||||
|
height:25px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #e4e4e4;
|
||||||
|
border-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.password{
|
||||||
|
width:420px;
|
||||||
|
height:35px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: #e4e4e4;
|
||||||
|
border-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Login{
|
||||||
|
width:420px;
|
||||||
|
height:40px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color:royalblue;
|
||||||
|
border-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
font-size: 20px;
|
||||||
|
color:white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register1{
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
border-color:transparent;
|
||||||
|
background-color:white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register2{
|
||||||
|
outline: none;
|
||||||
|
resize: none;
|
||||||
|
border-color:transparent;
|
||||||
|
background-color:royalblue;
|
||||||
|
cursor: pointer;
|
||||||
|
color:white;
|
||||||
|
font-size: 17px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="page">
|
||||||
|
<div class="loginBox">
|
||||||
|
<div class="upperBox">
|
||||||
|
<div class="upperInnerBox">
|
||||||
|
<div class="box1">
|
||||||
|
<div class="box1Inner"><h3>注册账户</h3></div>
|
||||||
|
</div>
|
||||||
|
<div class="box2">
|
||||||
|
<div class="box2Email">
|
||||||
|
<input class="email" placeholder=" 邮箱">
|
||||||
|
</div>
|
||||||
|
<div class="box2Code">
|
||||||
|
<div class="box2CodeNumber">
|
||||||
|
<input class="password" placeholder="验证码">
|
||||||
|
</div>
|
||||||
|
<div class="box2CodeSend"><button class="register2">验证码</button></div>
|
||||||
|
</div>
|
||||||
|
<div class="box2Password1">
|
||||||
|
<input class="password" placeholder=" 密码">
|
||||||
|
</div>
|
||||||
|
<div class="box2Password2">
|
||||||
|
<input class="password" placeholder=" 确认密码">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="box3"><button class="Login">注册账户</button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="downBox">
|
||||||
|
<div class="downBoxInner"><button class="register1">返回登入</button></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
document.querySelector(".register1").addEventListener("click",function (){
|
||||||
|
window.location.href="图书管理系统.html"
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user