Html:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录界面</title> <link href="../css/20240401.css" rel="stylesheet"></head><body> <div>Css:@import url(https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap);*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Pooppins', sans-serif;}body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: url(../html/image/20240401/login_bg.jpg); background-size: cover;}.container{ width: 420px; border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); color: #1d6272; border-radius: 10px; padding: 30px 40px; backdrop-filter: blur(18px);}.container h1{ font-size: 36px; text-align: center;}.container .input-box { position: relative; width: 100%; height: 50px; margin: 30px 0px;}.input-box input{ width: 100%; height: 100%; background: transparent; border: none; outline: none; border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 5px; font-size: 16px; color: #fff; padding: 20px 45px 20px 20px;}.input-box input::placeholder{ color: #fff;}.container .remember-forgot{ display: flex; justify-content: space-between; font-size: 14.5px; margin: -15px 0px 15px;}.remember-forgot label input{ color: #1d6272; margin-right: 3px;}.remember-forgot a { color: #1d6272; text-decoration: none;}.remember-forgot a:hover{ text-decoration: underline;}.container .btn{ width: 100%; height: 45px; background: #1d6272; border: none; outline: none; border-radius: 5px; box-decoration-break: 0px 0px 10px rgba(0, 0, 0, 0.1); cursor: pointer; font-size: 16px; font-weight: 400; color: #fff;}.container .register-link{ font-size: 14.5px; text-align: center; margin: 20px 0px 20px;}.register-link p a { color: #1d6272; text-decoration: none;}.register-link p a:hover{ text-decoration: underline;}效果：
