好看的登录页 电脑版发表于:2021/7/13 22:04 ![](https://img.tnblog.net/arcimg/hb/d536bc6670ee48768657d4a993fd0e59.png) >Html: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Login</title> <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="container"> <div class="login-form"> <div class="logo"></div> <h4>Login With</h4> <div class="social-login"> <span class="fab fa-facebook-f"></span> <span class="fab fa-microsoft"></span> <span class="fab fa-github"></span> </div> <div class="fields"> <div class="username"> <input type="text" placeholder="Username"> </div> <div class="password"> <input type="password" placeholder="password" /> </div> </div> <button class="login-btn">Login</button> <div class="link"> <a href="#">Forgot password?</a> or <a href="#">sign up</a> </div> </div> </div> </body> </html> ``` >style.css ```css * { margin: 0; padding: 0; box-sizing: border-box; } .container{ width: 100vw; height: 100vh; padding: 60px 0px; display: flex; justify-content: center; align-items: center; color: #555555; background: #ecf0f3; } .login-form { width: 450px; height: 700px; padding: 50px 35px 35px 35px; border-radius: 40px; box-shadow: 13px 13px 20px #cbced1, -13px -13px 20px #ffffff; } .logo { background-image: url('https://cdn.pixabay.com/photo/2016/03/26/13/09/cup-of-coffee-1280537_960_720.jpg'); background-position: center left; background-size: cover; width: 100px; height: 100px; border-radius: 50%; margin: 0px auto; box-shadow: 0px 0px 2px #5f5f5f, 0px 0px 0px 5px #ecf0f3, 8px 8px 15px #a7aaaf, -8px -8px 15px #ffffff ; } h4 { text-align: center; margin: 30px auto; color: #a7aaaf; } .social-login { display: flex; justify-content: space-around; width: 60%; align-items: center; margin: 0px auto; } .social-login span { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; box-shadow: 13px 13px 20px #CBCED1, -13px -13px 20px #fff; border-radius: 50%; cursor: pointer; } .social-login span:hover{ font-size: 50px; } .fields { width: 100%; padding: 50px 5px 5px 5px; } .fields input { border: none; outline: none; background: none; font-size: 16px; color: #555; padding: 20px 10px; } .username , .password { padding: 0px 30px; margin-bottom: 30px; border-radius: 30px; box-shadow: inset 8px 8px 8px #CBCED1,inset -8px -8px 8px #fff; } .login-btn { outline: none; border: none; background: #31a783; font-size: 24px; font-weight: 700; color: whitesmoke; width: 100%; height: 60px; border-radius: 30px; margin-bottom: 30px; cursor: pointer; } .login-btn:hover { background: rgba(29, 189, 149, 0.8); } .link { text-align: center; } .link a { text-decoration: none; color: #a7aaaf; } ```