最近简单学完了HTML和CSS，想自己做个简单的登录网页试试，大佬勿喷哈哈。
页面效果 实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> <link rel="stylesheet" href="css/style.css"> <script src="https://kit.fontawesome.com/4a4ce6258d.js" crossorigin="anonymous"></script> </head> <body> <div id="bigBox"> <h1>LOGIN</h1> <div class="inputBox"> <div class="inputText"> <i class="fas fa-user"></i> <input type="text" placeholder="username"> </div> <div class="inputText"> <i class="fas fa-lock"></i> <input type="password" placeholder="password"> </div> <input type="button" value="LOGIN" class="inputButton"> </div> </div> </body> </html> body{ margin: 0px; padding: 0px; background-image: url("../images/star.jpg"); background-repeat: no-repeat; } #bigBox{ margin: 0 auto; margin-top: 200px; padding: 20px 50px; width: 400px; height: 300px; border-radius: 10px; background-color: rgba(52, 52, 59, 0.64); text-align: center; } #bigBox h1{ color: rgba(95, 108, 159, 0.84); } #bigBox .inputBox{ margin-top: 40px; } #bigBox .inputBox .inputText{ margin-top: 20px; } #bigBox .inputBox .inputText input{ border: 0px; padding: 10px 10px; border-bottom: 1px solid white; background-color: rgba(52, 52, 59, 0.64); color: white; } #bigBox .inputBox .inputButton{ width: 150px; height: 25px; margin-top: 30px; border-radius: 20px; font-size: 15px; background-color: #00DBDE; background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); } .fas{ color: white; margin-right: 10px; }
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |