196 lines
4.8 KiB
HTML
196 lines
4.8 KiB
HTML
<!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> |