Loading... ## 效果图: ![](https://www.bdmcom.cn/usr/uploads/2022/06/262391810.png) ## html ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> <div class="box"> <h2>Login</h2> <div class="input-box"> <label for="account">账号: </label> <input type="text" name="account" id="account"> </div> <div class="input-box"> <label for="password">密码: </label> <input type="password" name="password" id="password"> </div> <div class="btn-box"> <a href="https://www.bdmcom.cn">忘记密码?</a> <div> <button>登录</button> <button>注册</button> </div> </div> </div> <body> </body> </html> ``` ## css ``` @charset "utf-8"; *{ margin: 0; padding: 0; } body { display: flex; flex-direction:column; justify-content: center; align-items: center; height: 100vh; background: url("background.jpg") no-repeat; background-size:cover; } .box{ border-radius: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; width:350px; height: 380px; border-top: 1px solid rgba(255, 255, 255, 0.5); border-left: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(255, 255, 255, 0.2); border-right: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); background: rgba(50, 50, 50, 0.2); } .box > h2 { color: rgba(255, 255, 255, 0.9); margin-bottom: 20px; } .box .input-box { display: flex; flex-direction: column; justify-content: center; align-items: start; } .box .input-box > label { margin-bottom : 5px; color: rgba(255, 255, 255, 0.9); font-size: 13px; } .box .input-box > input { box-sizing: border-box; margin-bottom: 5px; color: rgba(255, 255, 255, 0.9); font-size: 14px; height: 35px; width: 250px; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 5px; transition: 0.2s; outline: none; padding: 0 10px; } .box .input-box > input:focus { border: 1px solid rgba(255, 255, 255, 0.8); } .box .btn-box { width: 250px; display: flex; flex-direction: column; justify-content: center; align-items: start; } .box .btn-box > a { font-size: 14px; text-decoration: none; color: rgba(255, 255, 255, 0.9); transition: 0.2s; width:250px; text-align: end; } .box .btn-box > a:hover { color: rgba(255, 255, 255, 1); } .box .btn-box > div { display: flex; flex-direction: row; justify-content: center; align-items: start; margin-top: 20px; } .box .btn-box > div > button { width: 120px; height: 35px; border: 1px solid rgba(197, 81, 58, 0.8); background: rgba(197, 81, 58, 0.8); color: rgba(255, 255, 255, 0.9); border-radius: 5px; transition: 0.2s; } .box .btn-box > div > button:nth-of-type(2) { margin-left: 10px; } .box .btn-box > div > button:hover{ border: 1px solid rgba(248, 108, 76, 0.8); background: rgba(248, 108, 76, 0.5); } ``` ## 推荐 推荐一个可以在线运行html、css、js的平台 [在线运行html、css、js](https://codepen.io/pen/) 最后修改:2022 年 06 月 12 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 4 如果文章有用,请随意打赏。
1 条评论
不错