用js写一个好看的美妆登录注册页面
时间: 2023-11-28 08:49:26 浏览: 41
好的,我可以给您提供一个简单的登录注册页面的示例代码,但是由于没有美妆相关素材,所以可能不太符合您的需求,请您见谅。
HTML 部分:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>美妆登录注册页面</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="form-wrapper">
<h2>欢迎来到美妆网站</h2>
<form>
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="form-group">
<button type="submit">登录</button>
<button type="button" class="register-btn">注册</button>
</div>
</form>
</div>
</div>
<div class="modal">
<div class="modal-content">
<h2>注册账号</h2>
<form>
<div class="form-group">
<label for="reg-username">用户名:</label>
<input type="text" id="reg-username" name="reg-username" required>
</div>
<div class="form-group">
<label for="reg-password">密码:</label>
<input type="password" id="reg-password" name="reg-password" required>
</div>
<div class="form-group">
<label for="reg-confirm-password">确认密码:</label>
<input type="password" id="reg-confirm-password" name="reg-confirm-password" required>
</div>
<div class="form-group">
<button type="submit">注册</button>
</div>
</form>
<button class="close-btn">×</button>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
```
CSS 部分:
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.form-wrapper {
width: 400px;
background-color: #fff;
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
outline: none;
}
button[type="submit"],
.register-btn {
background-color: #ff6666;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
.register-btn {
background-color: #eee;
color: #333;
margin-left: 10px;
}
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
}
.modal-content {
width: 400px;
background-color: #fff;
padding: 30px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
position: relative;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
border: none;
background-color: transparent;
font-size: 24px;
cursor: pointer;
}
```
JavaScript 部分:
```
const registerBtn = document.querySelector('.register-btn');
const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.close-btn');
registerBtn.addEventListener('click', () => {
modal.style.display = 'flex';
});
closeBtn.addEventListener('click', () => {
modal.style.display = 'none';
});
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
// TODO: 添加登录逻辑
});
document.querySelector('.modal form').addEventListener('submit', (e) => {
e.preventDefault();
const username = document.querySelector('#reg-username').value;
const password = document.querySelector('#reg-password').value;
const confirmPassword = document.querySelector('#reg-confirm-password').value;
// TODO: 添加注册逻辑
modal.style.display = 'none';
});
```
这是一个简单的登录注册页面,当用户点击登录按钮时,会触发表单的 submit 事件,您可以在 JavaScript 部分添加相应的登录逻辑;当用户点击注册按钮时,会弹出一个模态框,当用户填写完注册信息并点击注册按钮时,会触发模态框表单的 submit 事件,您可以在 JavaScript 部分添加相应的注册逻辑。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)