模块化设计一个登录界面
时间: 2023-06-13 18:03:15 浏览: 139
好的,一个登录界面一般包括以下模块:
1. 用户名输入框
2. 密码输入框
3. 登录按钮
4. 注册按钮(可选)
下面是一个简单的HTML和CSS实现示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录界面</title>
<style>
body {
margin: 0;
padding: 0;
background: #f2f2f2;
font-family: sans-serif;
}
.container {
width: 400px;
margin: 100px auto;
background: #fff;
padding: 40px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
h2 {
margin: 0 0 20px;
text-align: center;
}
form {
display: flex;
flex-direction: column;
}
input[type="text"], input[type="password"] {
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
font-size: 16px;
}
input[type="submit"] {
background: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background: #3e8e41;
}
.register-link {
text-align: center;
margin-top: 20px;
}
.register-link a {
color: #4CAF50;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<h2>登录</h2>
<form>
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="submit" value="登录">
</form>
<div class="register-link">
<a href="#">没有账号?现在注册</a>
</div>
</div>
</body>
</html>
```
这是一个简单的登录界面,包括一个用户名输入框、一个密码输入框、一个登录按钮和一个注册链接。你可以根据需求,自行添加或删除相应的模块。