帮我用html和css以及javascript代码写一个系统的登录界面,分为管理员登录和用户登录,要有注册功能,然后css采用内联样式。
时间: 2024-05-03 18:20:45 浏览: 22
好的,以下是一个简单的例子,仅供参考:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>登录界面</title>
<style>
/* 管理员登录表单样式 */
#admin-login-form {
display: none; /* 默认不显示 */
}
/* 用户登录表单样式 */
#user-login-form {
display: block; /* 默认显示 */
}
</style>
<script type="text/javascript">
function toggleForm(type) {
if (type == 'admin') {
document.getElementById('admin-login-form').style.display = 'block';
document.getElementById('user-login-form').style.display = 'none';
} else if (type == 'user') {
document.getElementById('admin-login-form').style.display = 'none';
document.getElementById('user-login-form').style.display = 'block';
}
}
</script>
</head>
<body>
<h1>登录界面</h1>
<!-- 管理员登录表单 -->
<form id="admin-login-form">
<h2>管理员登录</h2>
<label>用户名:</label>
<input type="text" name="username">
<br>
<label>密码:</label>
<input type="password" name="password">
<br>
<button type="submit">登录</button>
</form>
<!-- 用户登录表单 -->
<form id="user-login-form">
<h2>用户登录</h2>
<label>用户名:</label>
<input type="text" name="username">
<br>
<label>密码:</label>
<input type="password" name="password">
<br>
<button type="submit">登录</button>
</form>
<a href="#" onclick="toggleForm('user')">用户登录</a> |
<a href="#" onclick="toggleForm('admin')">管理员登录</a>
<!-- 注册功能链接 -->
<p><a href="#">没有账号?点击注册</a></p>
</body>
</html>
```
该示例采用了JavaScript的方式来切换管理员登录和用户登录的表单,具体实现过程在代码中有注释。另外,注册功能的链接可以自行添加。