这是一个简单的登录界面的HTML代码示例。请注意,这只是一个基本的界面,没有包含任何后端逻辑或前端验证。实际的登录系统会更复杂,需要包括这些功能来保证安全性。
```html
body {
font-family: Arial, sans-serif;
}
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.container input {
width: 100%;
padding: 15px;
margin-bottom: 10px;
border-radius: 5px;
}
.container button {
width: 100%;
padding: 15px;
background-color: #4CAF50; /* Green */
border: none; /* Remove borders */
color: white; /* White text */
cursor: pointer; /* Add cursor on hover */
border-radius: 5px; /* Rounded corners */
}
.container button:hover {
background-color: #45a049; /* Green hover */
}
登录
```
这是一个非常基础的登录界面,你可以根据需要对其进行修改和扩展。例如,你可以添加更多的输入字段(如电子邮件或验证码),或者添加前端验证(例如检查用户名和密码是否为空)。在实际的生产环境中,你应该始终使用HTTPS来保护表单提交,以防止敏感信息被拦截。你也应该使用后端验证来确保用户输入的安全性。