用html写一个像微信一样的登录注册页面
时间: 2023-10-01 08:06:53 浏览: 42
以下是一个简单的像微信一样的登录注册页面的HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>微信登录注册页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: #f6f6f6;
font-family: Arial, sans-serif;
}
.container {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-size: 16px;
}
button {
background-color: #4caf50;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
.login-form {
display: none;
}
.active {
display: block;
}
.switch {
text-align: center;
margin-top: 20px;
}
.switch button {
background-color: transparent;
color: #4caf50;
border: none;
font-size: 16px;
cursor: pointer;
}
.switch button:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h2>微信登录注册页面</h2>
<form id="login-form" class="form-group active">
<label for="login-username">用户名</label>
<input type="text" id="login-username" name="login-username" required>
<label for="login-password">密码</label>
<input type="password" id="login-password" name="login-password" required>
<button type="submit">登录</button>
</form>
<form id="register-form" class="form-group">
<label for="register-username">用户名</label>
<input type="text" id="register-username" name="register-username" required>
<label for="register-password">密码</label>
<input type="password" id="register-password" name="register-password" required>
<label for="register-confirm-password">确认密码</label>
<input type="password" id="register-confirm-password" name="register-confirm-password" required>
<button type="submit">注册</button>
</form>
<div class="switch">
<button id="login-btn" class="active">登录</button>
<button id="register-btn">注册</button>
</div>
</div>
<script>
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');
const loginBtn = document.getElementById('login-btn');
const registerBtn = document.getElementById('register-btn');
loginBtn.addEventListener('click', () => {
loginForm.classList.add('active');
registerForm.classList.remove('active');
loginBtn.classList.add('active');
registerBtn.classList.remove('active');
});
registerBtn.addEventListener('click', () => {
registerForm.classList.add('active');
loginForm.classList.remove('active');
registerBtn.classList.add('active');
loginBtn.classList.remove('active');
});
</script>
</body>
</html>
```
解释一下代码:
1. 用`<meta>`标签设置页面的字符集和viewport。
2. 用`<style>`标签定义页面的样式。
3. 在`<body>`标签中创建一个名为`container`的`<div>`,用于包含登录和注册表单。
4. 在`<div>`中创建登录和注册表单,分别用`id`属性`login-form`和`register-form`进行标识,并设置默认显示登录表单。
5. 在表单中创建用户名和密码输入框,并设置`required`属性。
6. 在表单中创建登录和注册按钮,并设置`type`属性为`submit`。
7. 在`<div>`中创建一个名为`switch`的`<div>`,用于切换登录和注册表单。
8. 在`<div>`中创建登录和注册按钮,分别用`id`属性`login-btn`和`register-btn`进行标识,并设置默认激活登录按钮。
9. 在`<script>`标签中编写JavaScript代码,实现登录和注册表单的切换。
以上代码只是一个基本的示例,你可以根据自己的需求对页面进行更多的样式和功能的定制。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)