首页写一个前端输入密码页面

写一个前端输入密码页面

时间: 2023-06-24 13:08:25 浏览: 92

以下是一个简单的前端输入密码页面的示例： ```html <!DOCTYPE html> <html> <head> <title>输入密码页面</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; background-color: #f1f1f1; } .container { background-color: #fff; padding: 20px; max-width: 500px; margin: 50px auto; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.3); text-align: center; } h1 { margin-top: 0; } input[type="password"] { padding: 10px; font-size: 16px; border-radius: 5px; border: 1px solid #ccc; width: 100%; box-sizing: border-box; margin-bottom: 10px; } button { background-color: #4CAF50; color: #fff; padding: 10px; border-radius: 5px; border: none; cursor: pointer; font-size: 16px; transition: background-color 0.3s ease; } button:hover { background-color: #3e8e41; } </style> </head> <body> <div class="container"> <h1>请输入密码</h1> <form> <label for="password">密码：</label> <input type="password" id="password" name="password" required> <button type="submit">提交</button> </form> </div> </body> </html> ``` 这段代码创建了一个包含一个密码输入框和一个提交按钮的表单。密码输入框使用 `type="password"` 属性，以隐藏用户输入的密码。提交按钮使用 `type="submit"` 属性，以便在用户单击时提交表单。此外，还添加了一些简单的样式来美化页面。

阅读全文