写一个简单的html css 登录注册界面
时间: 2024-05-05 15:18:53 浏览: 8
好的,我可以帮您写一个简单的登录注册界面。以下是样例代码:
```
<!doctype html>
<html>
<head>
<title>Login/Register</title>
<style>
/* Style for the login form */
#login-form {
margin: auto;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
width: 300px;
}
#login-form input[type="text"],
#login-form input[type="password"] {
margin-bottom: 10px;
width: 100%;
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: none;
}
#login-form input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Style for the register form */
#register-form {
margin: auto;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
width: 300px;
display: none;
}
#register-form input[type="text"],
#register-form input[type="password"] {
margin-bottom: 10px;
width: 100%;
padding: 5px;
font-size: 16px;
border-radius: 5px;
border: none;
}
#register-form input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
/* Style for the login/register toggle links */
#toggle-link {
font-size: 16px;
}
#toggle-link:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="login-form-container">
<form id="login-form">
<label for="login-username">Username:</label><br>
<input type="text" id="login-username" name="login-username"><br>
<label for="login-password">Password:</label><br>
<input type="password" id="login-password" name="login-password"><br>
<input type="submit" value="Login">
</form>
<form id="register-form">
<label for="register-username">Username:</label><br>
<input type="text" id="register-username" name="register-username"><br>
<label for="register-password">Password:</label><br>
<input type="password" id="register-password" name="register-password"><br>
<input type="submit" value="Register">
</form>
<p>Don't have an account? <a href="#" id="toggle-link">Register here</a>.</p>
</div>
<script>
// Toggle login/register forms when toggle link is clicked
document.getElementById("toggle-link").addEventListener("click", function(event) {
event.preventDefault();
document.getElementById("login-form").style.display = "none";
document.getElementById("register-form").style.display = "block";
});
</script>
</body>
</html>
```
这段代码会生成一个登录/注册页面,包含一个登录表单和一个注册表单。当用户点击“注册”链接时,页面会自动切换到注册表单。您可以按需修改表单布局和样式。