编一个登陆页面，要求有：用户名，密码，兴趣选择，且使页面内容居中有一个灰色的矩形背景

以下是一个简单的登陆页面示例，使用 HTML 和 CSS 实现： ```html <!DOCTYPE html> <html> <head> <title>Login Page</title> <style> body { background-color: #f2f2f2; } .container { margin: auto; width: 50%; padding: 20px; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; } input[type=text], input[type=password], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } button { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h2>Login</h2> <form action="/login" method="post"> <label for="username">Username</label> <input type="text" id="username" name="username" placeholder="Enter your username"> <label for="password">Password</label> <input type="password" id="password" name="password" placeholder="Enter your password"> <label for="interests">Interests</label> <select id="interests" name="interests"> <option value="coding">Coding</option> <option value="music">Music</option> <option value="sports">Sports</option> <option value="reading">Reading</option> </select> <button type="submit">Login</button> </form> </div> </body> </html> ``` 在上面的示例中，我们使用 CSS 中的布局属性将 `div.container` 居中，并设置了一个灰色的背景。此外，我们使用 HTML 表单元素创建了输入框、下拉框和登录按钮。在实际应用中，你需要将这个页面与后端代码结合起来，以实现真正的用户认证功能。

编一个登陆页面，要求有：用户名，密码，兴趣选择，且使页面内容居中有一个灰色的矩形背景

最新推荐

DIV+CSS垂直居中一个浮动元素

HTML+CSS实现动态背景登录页面

css中使input输入框与img(图片)在同一行居中对齐

电力电子系统建模与控制入门

管理建模和仿真的文件

图像写入的陷阱：imwrite函数的潜在风险和规避策略，规避图像写入风险，保障数据安全

protobuf-5.27.2 交叉编译

SQL数据库基础入门：发展历程与关键概念

"互动学习：行动中的多样性与论文攻读经历"

图像写入的最佳实践：imwrite函数与其他图像写入工具的比较，打造高效图像写入流程