写一个简单的html css js中文登录注册界面
时间: 2023-11-23 17:07:01 浏览: 30
好的,我可以为您提供一个简单的HTML、CSS和JS中文登录注册页面。
HTML代码如下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录或注册</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>欢迎来到我们的网站!</h1>
<div class="login-form">
<h2>登录</h2>
<form>
<input type="text" placeholder="用户名" required>
<br><br>
<input type="password" placeholder="密码" required>
<br><br>
<button type="submit">登录</button>
</form>
</div>
<div class="register-form">
<h2>注册</h2>
<form>
<input type="text" placeholder="用户名" required>
<br><br>
<input type="password" placeholder="密码" required>
<br><br>
<input type="password" placeholder="确认密码" required>
<br><br>
<button type="submit">注册</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码如下:
```
body {
background-color: #F5F5F5;
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
.login-form,
.register-form {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
display: inline-block;
margin-top: 50px;
padding: 20px;
}
form {
display: block;
margin: auto;
}
input {
border: 1px solid #CCCCCC;
border-radius: 3px;
padding: 5px;
width: 200px;
}
button {
background-color: #3366CC;
border: none;
border-radius: 3px;
color: #FFFFFF;
cursor: pointer;
padding: 10px;
width: 100px;
}
button:hover {
background-color: #4080FF;
}
```
JS代码如下:
```
// 选择登录或注册表单
var loginForm = document.querySelector('.login-form');
var registerForm = document.querySelector('.register-form');
// 隐藏注册表单
registerForm.style.display = 'none';
// 切换至登录表单
function showLoginForm() {
loginForm.style.display = 'block';
registerForm.style.display = 'none';
}
// 切换至注册表单
function showRegisterForm() {
loginForm.style.display = 'none';
registerForm.style.display = 'block';
}
// 监听登录和注册按钮的点击事件
document.querySelector('.login-btn').addEventListener('click', showLoginForm);
document.querySelector('.register-btn').addEventListener('click', showRegisterForm);
```
以上是简单的HTML、CSS和JS代码,可以实现中文登录注册页面的基本功能。当用户点击登录按钮时,会提交用户名和密码;当用户点击注册按钮时,会提交用户名和两次密码以进行验证。