TIME
HTML代码（login.html）。
<!DOCTYPE html>
<html>
<head>
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>用户登录</h2>
<form id="loginForm">
<input type="text" id="username" placeholder="用户名" required>
<input type="password" id="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</div>
<script src="login.js"></script>
</body>
</html>CSS代码（styles.css）：
.login-container {
width: 300px;
padding: 16px;
background-color: #f1f1f1;
margin: 0 auto;
margin-top: 100px;
border-radius: 4px;
}
h2 {
text-align: center;
}JavaScript代码（login.js）：
document.getElementById(’loginForm’).addEventListener(’submit’, function(event) {
event.preventDefault(); // 阻止表单默认提交行为
var username = document.getElementById(’username’).value;
var password = document.getElementById(’password’).value;
// 在此处添加登录逻辑，例如向后端发送登录请求等，这里仅作为示例，没有实际功能。
});上述代码仅实现了前端页面的基本功能，你需要添加后端处理和数据库存储功能来完善整个系统，还需要添加适当的验证和安全性措施来保护用户数据，在实际开发中，请务必参考最佳实践和安全指南来确保系统的安全性。