实现一个简单的登录注册页面
时间: 2023-05-16 17:04:35 浏览: 114
好的,这是一个常见的编程问题。您可以使用 HTML、CSS 和 JavaScript 来实现一个简单的登录注册页面。以下是一个示例代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>登录注册页面</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>创建账户</h1>
<input type="text" placeholder="用户名">
<input type="email" placeholder="邮箱">
<input type="password" placeholder="密码">
<button>注册</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>登录</h1>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<a href="#">忘记密码?</a>
<button>登录</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>欢迎回来!</h1>
<p>请登录您的账户以继续使用我们的服务。</p>
<button class="ghost" id="signIn">登录</button>
</div>
<div class="overlay-panel overlay-right">
<h1>创建账户</h1>
<p>请填写您的个人信息以创建账户。</p>
<button class="ghost" id="signUp">注册</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```
* {
box-sizing: border-box;
}
body {
background-color: #f6f5f7;
font-family: 'Open Sans', sans-serif;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.overlay {
background: #ff416c;
background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);
background: linear-gradient(to right, #ff4b2b, #ff416c);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #fff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-panel {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
height: 100%;
width: 50%;
text-align: center;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
form {
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 50px;
height: 100%;
text-align: center;
}
h1 {
font-weight: bold;
margin-top: 0;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
button {
border-radius: 20px;
border: none;
background-color: #ff416c;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 12px 0;
margin: 16px 0;
width: 100%;
cursor: pointer;
}
button:hover {
background-color: #ff4b2b;
}
.ghost {
background-color: transparent;
border-color: #fff;
color: #fff;
}
a {
color: #fff;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
.overlay-right button:hover {
background-color: #fff;
color: #ff416c;
}
.overlay-left button:hover {
background-color: #fff;
color: #ff416c;
}
@media screen and (max-width: 960px) {
.container {
min-height: 830px;
height: auto;
}
.overlay {
width: 100%;
left: 0;
}
.form-container {
width: 100%;
height: 100%;
}
.sign-up-container {
left: 100%;
opacity: 1;
}
.sign-in-container {
left: 0;
}
.overlay-container {
width: 100%;
left: 0;
transform: translateX(0);
}
.overlay-left {
transform: translateX(0);
}
.overlay-right {
transform: translateX(20%);
}
}
```
JavaScript 代码:
```
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
```
这个页面包括一个登录表单和一个注册表单,以及一个切换登录和注册表单的功能。您可以根据需要进行修改和扩展。