时间：2023-07-26 15:42:01 | 来源：网站运营
时间：2023-07-26 15:42:01 来源：网站运营
制作简单得现代风格登陆Login页面表单：此登陆页面由纯html & CSS制作，不含有JavaScript代码
在线咨询
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CodingHero Login Form</title> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="center"> <h1>Login</h1> <form action="#" method="post"> <div class="txt_field"> <input type="text" required /> <span></span> <label>Username</label> </div> <div class="txt_field"> <input type="password" required /> <span></span> <label>Password</label> </div> <div class="pass">Forgot Password?</div> <input type="submit" value="Login" /> <div class="signup_link">Not a member? <a href="#">Sign up</a></div> </form> </div> </body></html>4. css代码/* color #2980b9 #8e44ad */@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700;900&display=swap");body { margin: 0; padding: 0; font-family: "Noto Sans SC", sans-serif; background: linear-gradient(120deg, #2980b9, #8e44ad); height: 100vh; overflow: hidden;}.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; background: white; border-radius: 10px;}.center h1 { text-align: center; padding: 0 0 20px 0; border-bottom: 1px solid silver;}.center form { padding: 0 40px; box-sizing: border-box;}form .txt_field { position: relative; border-bottom: 2px solid #adadad; margin: 30px 0;}.txt_field input { width: 100%; padding: 0 5px; height: 40px; font-size: 16px; border: none; background: none; outline: none;}.txt_field label { position: absolute; top: 50%; left: 5px; color: #adadad; transform: translateY(-50%); font-size: 16px; pointer-events: none; transition: 0.5s;}.txt_field span::before { content: ""; position: absolute; top: 40px; left: 0; width: 0%; height: 2px; background: #2691d9; transition: 0.5s;}.txt_field input:focus ~ label,.txt_field input:valid ~ label { top: -5px; color: #2691d9;}.txt_field input:focus ~ span,.txt_field input:valid ~ span { width: 100%;}.pass { margin: -5px 0 20px 5px; color: #a6a6a6; cursor: pointer;}.pass:hover { text-decoration: underline;}input[type="submit"] { width: 100%; height: 50px; border: 1px solid; background: #2691d9; border-radius: 25px; font-size: 18px; color: #e9f4fb; font-weight: 700; cursor: pointer; outline: none;}input[type="submit"]:hover { border-color: #2691d9; transition: 0.5s;}.signup_link { margin: 30px 0; text-align: center; font-size: 16px; color: #666666;}6. 总结重点内容关键词：登陆,风格,简单,现代
