代码:
<!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>Document</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } .box{ width: 630px; height: 536px; /* background-color: pink; */ margin-left: 100px; margin-top: 100px; overflow: hidden; } .logo { width: 49px; height: 49px; margin: 100px auto 0; background: #ff5b00 url(./images/mi-logo.png) ; } .box h2{ width: 180px; font-size: 24px; font-weight: 400; text-align: center; margin: 44px auto 40px; } .login input{ display: block; width: 360px; height: 50px; font-size: 12px; color: #a08a75; padding-left: 15px; margin: 0 auto; } .login input:nth-child(2){ margin-top: 20px; margin-bottom: 20px; } .login input:last-child{ padding-left: 0; color: #fff; background-color: #ff5b00; border: 0; } </style> </head> <body> <div class="box"> <div class="logo"></div> <h2>小米账号登录</h2> <div class="login"> <input type="text" placeholder="邮箱/手机号码/小米ID"> <input type="password" placeholder="密码"> <input type="submit" value="登录"> </div> </div> </body> </html>
效果图:
CSS3-综合案例-小米登录页
最新推荐文章于 2024-05-08 20:27:05 发布