253 lines
5.2 KiB
HTML
253 lines
5.2 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: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> |