在现代网页开发中,登录界面是用户与网站交互的第一步。下面是一个基本的HTML登录界面示例,它包含了用户名和密码输入框以及一个提交按钮。这个示例简单易懂,适合初学者学习。
```html
body {
font-family: Arial, sans-serif;
background-color: f4f4f9;
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.login-container {
background-color: fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-container h2 {
margin-bottom: 20px;
color: 333;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: 555;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: 28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: 218838;
}
用户登录
```
说明:
1. HTML结构:页面的基本结构包括`
`部分用于定义元信息和样式,``部分包含实际的内容。
2. CSS样式:通过内联`