首页html制作修改密码界面

html制作修改密码界面

时间: 2023-11-13 14:04:50 浏览: 129

<!DOCTYPE html> <html> <head> <title>修改密码</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; font-family: Arial, sans-serif; } body { background-color: #f1f1f1; } .container { background-color: #fff; border-radius: 5px; padding: 20px; margin: 50px auto; max-width: 500px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } h1 { text-align: center; margin-bottom: 30px; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; } input[type="password"] { width: 100%; padding: 10px; border: none; border-radius: 3px; background-color: #f1f1f1; } .btn { background-color: #4CAF50; color: #fff; padding: 10px; border: none; border-radius: 3px; cursor: pointer; width: 100%; font-size: 16px; } .btn:hover { background-color: #45a049; } </style> </head> <body> <div class="container"> <h1>修改密码</h1> <form> <div class="form-group"> <label for="current-password">当前密码</label> <input type="password" id="current-password" name="current-password" required> </div> <div class="form-group"> <label for="new-password">新密码</label> <input type="password" id="new-password" name="new-password" required> </div> <div class="form-group"> <label for="confirm-password">确认新密码</label> <input type="password" id="confirm-password" name="confirm-password" required> </div> <button type="submit" class="btn">确认修改</button> </form> </div> </body> </html>

阅读全文