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