html+css+js生成登录注册页面
时间: 2023-12-25 12:52:21 浏览: 21
你可以使用HTML编写页面结构,使用CSS进行样式美化,使用JavaScript实现交互功能。以下是一个简单的登录注册页面示例代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Login/Register</title>
<meta charset="utf-8">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
form {
background-color: #fff;
width: 300px;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px #ccc;
margin: 0 auto;
}
h1 {
text-align: center;
color: #444;
}
input {
margin-bottom: 10px;
width: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid #ccc;
font-family: Arial, sans-serif;
font-size: 16px;
}
button {
display: block;
margin: 0 auto;
padding: 10px 20px;
background-color: #0086b3;
color: #fff;
border: none;
border-radius: 3px;
font-size: 16px;
cursor: pointer;
}
#register {
display: none;
}
#register-link {
text-align: center;
margin-top: 10px;
font-size: 14px;
}
#register-link a {
color: #0086b3;
text-decoration: none;
}
</style>
</head>
<body>
<form id="login">
<h1>Login</h1>
<input type="text" name="username" placeholder="Username" required>
<input type="password" name="password" placeholder="Password" required>
<button type="submit">Login</button>
<div id="register-link">Not registered yet? <a href="#" onclick="showRegister()">Register here</a></div>
</form>
<form id="register">
<h1>Register</h1>
<input type="text" name="username" placeholder="Username" required>
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<input type="password" name="password-confirm" placeholder="Confirm password" required>
<button type="submit">Register</button>
<div id="register-link">Already registered? <a href="#" onclick="showLogin()">Login here</a></div>
</form>
<script>
function showRegister() {
document.getElementById("login").style.display = "none";
document.getElementById("register").style.display = "block";
}
function showLogin() {
document.getElementById("register").style.display = "none";
document.getElementById("login").style.display = "block";
}
</script>
</body>
</html>
```
你可以将以上代码保存为HTML文件,使用浏览器打开即可看到登录注册页面。