用htmlcssjavascript做一个注册登录页面
时间: 2023-12-22 08:05:14 浏览: 28
好的,下面是一个示例的注册登录页面:
HTML 代码:
```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="email" placeholder="邮箱">
<input type="password" placeholder="密码">
<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="app.js"></script>
</body>
</html>
```
CSS 代码:
```css
* {
box-sizing: border-box;
}
body {
background-color: #f6f5f7;
font-family: "Montserrat", sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
color: #333333;
display: grid;
grid-template-columns: repeat(2, 1fr);
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-up-container {
left: 0;
width: 50%;
z-index: 2;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 1;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
}
.form-container form {
background-color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
}
form input {
background-color: #eeeeee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
form button {
background-color: #4caf50;
border: none;
color: #ffffff;
cursor: pointer;
margin: 12px 0;
padding: 12px 0;
width: 100%;
}
form button:hover {
background-color: #3e8e41;
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: url('background.jpg') no-repeat center center/cover;
color: #ffffff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transition: left 0.6s ease-in-out;
}
.overlay-panel {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
width: 50%;
padding: 0 40px;
}
.overlay-left {
transform: translateX(-20%);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.overlay h1 {
font-weight: bold;
margin: 0;
}
.overlay p {
font-size: 1.1em;
margin-top: 0;
}
.overlay button {
background-color: #ffffff;
border: 1px solid #ffffff;
color: #333333;
cursor: pointer;
margin: 12px 0;
padding: 12px 0;
width: 80%;
}
.overlay button:hover {
background-color: rgba(255, 255, 255, 0.7);
}
```
JavaScript 代码:
```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');
});
```
该示例页面包含一个注册表单和一个登录表单,以及一个切换注册/登录的按钮。单击按钮,可以切换到另一个表单。在这个示例中,我们使用了一个类似于双面板设计的布局,其中一个面板用于注册,另一个面板用于登录。这使得用户可以在同一个页面上完成所有操作,而无需跳转到其他页面。
此外,我们还添加了一些动画效果,使得页面更加生动和有趣。例如,当切换到注册表单时,我们使用了一个滑动动画,将登录表单向右移动。同样地,当切换到登录表单时,我们将注册表单向右移动。
希望这个示例有帮助!