简单实用！登陆界面 Web 代码示例及三大改进建议

以下是一个简单的登录界面的 HTML 和 CSS 代码示例： ```html <!DOCTYPE html> <html> <head> <style> body { font-family: Arial, sans-serif; } form { width: 300px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; background-color: #f8f9fa; } label { display: block; margin-bottom: 10px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 20px; box-sizing: border-box; border: 1px solid #ccc; } input[type="submit"] { width: 100%; padding: 10px; background-color: #007bff; color: #fff; border: none; cursor: pointer; } </style> </head> <body> <form action=""> <label for="username">用户名：</label> <input type="text" id="username" name="username"> <label for="password">密码：</label> <input type="password" id="password" name="password"> <input type="submit" value="登录"> </form> </body> </html> ``` 以下是三个改进建议： 1. 为登录表单添加验证功能，例如检查用户名和密码是否为空。 2. 增加记住密码的选项，提高用户体验。 3. 美化登录按钮的鼠标悬停效果，增强交互性。 ######[AI写代码神器 | 416点数解答 | 2024-12-25 16:13:48]

服务商

更多选项

快捷项

自定义