1.界面展示
图1 登录界面
图2 注册界面
2.界面实现
2.1登录界面
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录界面1</title>
<link rel="stylesheet" href="./login.css"></link>
</head>
<body>
<div class="login-box">
<form action="" id="form">
<h1>登录</h1>
<label>用户名：</label><br>
<input type="text" class="username"></input>
<br>
<label>密码：</label><br>
<input type="password" class="password"></input>
<br><br>
<button>登录</button>
<div class="reg">
<p>没有账号？去<b><a href="./registry.html">注册</a></b></p>
</div>
</form>
</div>
</body>
</html>login.css
*{
margin: 0;
padding: 0;
}
body{
width: 100vw;
height: 100vh;
position: relative;
background-image: url('./背景2.png');
background-repeat: no-repeat;
background-attachment: fixeed;
background-size: cover;
display: flex;
align-items: center;
/* text-align: center; */
justify-content: center;
}
.login-box{
background: inherit;
width: 500px;
height: 450px;
position: absolute;
overflow: hidden;
border-radius: 10px;
}
.login-box:before{
content:"";
background: inherit;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-shadow: inset 0 0 0 3000px rgba(229, 204, 204, 0.3);
filter: blur(10px);
}
#form{
color: black;
width: 300px;
margin: 40px auto;
position: relative;
}
h1{
margin-top: 70px;
margin-bottom: 30px;
color:rgb(211, 58, 58);
text-align: center;
}
label{
color: rgb(197, 30, 58);
font-weight: 550;
}
input{
width: 200px;
height: 25px;
border: none;
margin-top: 3px;
margin-left: 50px;
}
button{
width: 100px;
height: 25px;
margin-left: 100px;
border: none;
background-color: pink;
}
.reg{
margin-top: 111px;
margin-left: -30px;
color: rgb(197, 30, 58);
}
.reg a{
color: rgb(230, 59, 44);
text-decoration: none;
}2.2注册界面
registry.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
<link rel="stylesheet" href="./registry.css"></link>
</head>
<body>
<div class="reg-box">
<form action="" id="form">
<h1>注册</h1>
<label>用户名：</label><br>
<input type="text" class="username"></input>
<br>
<label>密码：</label><br>
<input type="password" class="password"></input>
<br>
<label>确认密码：</label><br>
<input type="password" class="repassword"></input>
<br>
<label>手机号</label><br>
<input type="text" class="phone"></input>
<br>
<br>
<button>注册</button>
<div class="reg">
<p>已有账号？去<b><a href="./login.html">登录</a></b></p>
</div>
</form>
</div>
</body>
</html>registry.css
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
position: relative;
background-image: url('./背景2.png');
background-repeat: no-repeat;
background-attachment: fixeed;
background-size: cover;
display: flex;
align-items: center;
/* text-align: center; */
justify-content: center;
}
.reg-box {
background: inherit;
width: 500px;
height: 450px;
position: absolute;
overflow: hidden;
border-radius: 10px;
}
.reg-box:before {
content: "";
background: inherit;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
box-shadow: inset 0 0 0 3000px rgba(229, 204, 204, 0.3);
filter: blur(10px);
}
#form {
color: black;
width: 300px;
margin: 40px auto;
position: relative;
}
h1 {
margin-top: 70px;
margin-bottom: 30px;
color: rgb(211, 58, 58);
text-align: center;
}
label {
color: rgb(197, 30, 58);
font-weight: 550;
}
input {
width: 200px;
height: 25px;
border: none;
margin-top: 3px;
margin-left: 50px;
}
button {
width: 100px;
height: 25px;
margin-left: 100px;
border: none;
background-color: pink;
}
.reg {
margin-top: 15px;
margin-left: -30px;
color: rgb(197, 30, 58);
}
.reg a {
color: rgb(230, 59, 44);
text-decoration: none;
}
