在网页开发中,登录界面是一个非常基础且重要的组件。下面是一个简单的HTML登录界面代码示例,它可以帮助你快速搭建一个基本的用户登录页面。
```html
body {
font-family: Arial, sans-serif;
background-color: f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background-color: fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
.login-container h2 {
text-align: center;
margin-bottom: 20px;
color: 333;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
color: 555;
}
.form-group input {
width: 100%;
padding: 8px;
border: 1px solid ccc;
border-radius: 4px;
box-sizing: border-box;
}
.btn-submit {
width: 100%;
padding: 10px;
background-color: 28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn-submit:hover {
background-color: 218838;
}
用户登录
```
说明
这个代码提供了一个简单的登录界面,包含用户名和密码输入框以及一个提交按钮。样式部分使用了内联CSS来确保页面看起来整洁美观。你可以根据需要进一步调整样式或添加功能,例如记住密码选项、忘记密码链接等。
此代码简洁明了,适合初学者学习和实践。同时,它也可以作为一个起点,帮助开发者快速构建更复杂的登录系统。


