用div+css做一个用户登录界面,实现所有功能,美观
时间: 2024-09-09 16:01:49 浏览: 17
创建一个简单的用户登录界面通常需要HTML结构、CSS样式和基本交互,但在这里,我会给出一个基础示例,实际完整实现可能涉及到更复杂的表单验证和后端交互。以下是步骤:
**HTML (结构部分):**
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="login-container">
<h1>用户登录</h1>
<form id="login-form">
<input type="email" placeholder="邮箱" required id="email-input">
<input type="password" placeholder="密码" required id="password-input">
<button type="submit">登录</button>
<a href="#" class="forgot-password">忘记密码?</a>
</form>
</div>
<script src="scripts.js"></script>
</body>
</html>
```
**CSS (样式部分 - styles.css):**
```css
.login-container {
width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
background-color: #f8f9fa;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
form {
display: flex;
flex-direction: column;
}
input {
margin-bottom: 10px;
padding: 5px 10px;
border: none;
outline: none;
border-radius: 3px;
}
button {
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 3px;
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
.forgot-password {
text-decoration: underline;
}
```
**JavaScript (交互部分 - scripts.js):**
(这里可以添加一些简单的键盘事件防止提交按钮点击时意外触发默认动作等)
```javascript
document.getElementById('login-form').addEventListener('submit', function(e) {
e.preventDefault();
// 这里可以模拟异步请求,实际项目会发送到服务器处理
});
```