日期：
来源：web前端开发收集编辑：杨小爱
写在前面
今天我们来写一个登录页面，这个在很多企业系统上都会用到，当然，一些网站上也用应用到，所以，它的应用场景还是很多的。
现在，我们一起来看一下它的最终效果：
<!DOCTYPE html><html><head><title>【每日一练】108—一个登录页面的实现</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8" /><link rel="stylesheet" href="css/style.css" type="text/css" media="all" /></head><body><section class="w3l-workinghny-form"><div class="workinghny-form-grid"><div class="wrapper"><div class="logo"><h1><a class="brand-logo" href="index.html">工 作 登 录</a></h1></div><div class="workinghny-block-grid"><div class="workinghny-left-img align-end"><img src="images/1.png" class="img-responsive" alt="img" /></div><div class="form-right-inf"><div class="login-form-content"><form action="https://www.webqdkf.com" class="signin-form" method="post"><div class="one-frm"><label>姓名</label><input type="text" name="Name" placeholder="" required=""></div><div class="one-frm"><label>密码</label><input type="password" name="Password" placeholder="" required=""></div><label class="check-remaind"><input type="checkbox"><span class="checkmark"></span><p class="remember">记住我</p></label><button class="btn btn-style mt-3">登录 </button><p class="already">如果你还没有账户 <a href="#">请注册</a></p></form></div></div></div></div></div><div class="copyright text-center"><div class="wrapper"><p class="copy-footer-29">© 2022 工作登录页面 <a href="https://www.webqdkf.com">web前端开发</a></p></div></div></section></body></html>
html {scroll-behavior: smooth;}body,html {margin: 0;padding: 0;font-family: 'Karla', sans-serif;}* {box-sizing: border-box;}.d-grid {display: grid;}.d-flex {display: flex;display: -webkit-flex;}.text-center {text-align: center;}.text-left {text-align: left;}.text-right {text-align: right;}button,input,select {-webkit-appearance: none;outline: none;font-family: 'Karla', sans-serif;}button,.btn,select {cursor: pointer;}a {text-decoration: none;}img {max-width: 100%;}ul {margin: 0;padding: 0}h1,h2,h3,h4,h5,h6,p {margin: 0;padding: 0}p {color: #666;font-size: 18px;line-height: 25px;}.p-relative {position: relative;}.p-absolute {position: absolute;}.p-fixed {position: fixed;}.p-sticky {position: sticky;}.btn,button,.actionbg,input {border-radius: 4px;-webkit-border-radius: 4px;-moz-border-radius: 4px;-o-border-radius: 4px;-ms-border-radius: 4px;}.btn:hover,button:hover {transition: 0.5s ease;-webkit-transition: 0.5s ease;-o-transition: 0.5s ease;-ms-transition: 0.5s ease;-moz-transition: 0.5s ease;}.wrapper {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}@media (min-width: 576px) {.wrapper {max-width: 540px;}}@media (min-width: 768px) {.wrapper {max-width: 720px;}}@media (min-width: 992px) {.wrapper {max-width: 960px;}}@media (min-width: 1200px) {.wrapper {max-width: 1140px;}}.wrapper-full {width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;}.w3l-workinghny-form .logo {text-align: center;}.w3l-workinghny-form .logo a.brand-logo {display: inline-block;text-align: center;font-size: 50px;line-height: 1.1em;font-weight: 700;color: #212529;margin-bottom: 30px;text-transform: capitalize;letter-spacing: -1px;}.w3l-workinghny-form .align-end {align-self: flex-end;padding: 2em;}.w3l-workinghny-form .logo a.brand-logo span {font-weight: 300;}.w3l-workinghny-form h1 {font-size: 50px;line-height: 1.1em;font-weight: 700;color: #3f3a64;}.w3l-workinghny-form {position: relative;z-index: 0;padding: 2em 0px;display: grid;align-items: center;height: 100vh;}.w3l-workinghny-form .pos-relative {position: relative;}.w3l-workinghny-form .copyright {margin-top: 20px;}.w3l-workinghny-form p.copy-footer-29 a {color: #495057;}.w3l-workinghny-form p.copy-footer-29 a:hover {color: #4361ee;}.w3l-workinghny-form h2 {font-size: 30px;color: #fff;margin-bottom: 15px;}.w3l-workinghny-form .workinghny-block-grid {display: grid;grid-template-columns: 1.2fr 1fr;grid-gap: 70px;width: 90%;margin: 0 auto;align-items: center;}.w3l-workinghny-form .login-form-content {padding: 2em 0em;}.w3l-workinghny-form .one-frm label {font-style: normal;font-size: 16px;color: #343a40;display: block;margin-bottom: 10px;font-weight: 400;}.w3l-workinghny-form input {background: transparent;border: none;border-bottom: 2px solid #212529;color: #777;background:transparent;font-size: 13px;line-height: 20px;padding: 12px 15px;width: 100%;margin-bottom: 30px;border-radius: 0;outline: none;}.w3l-workinghny-form input:focus {background: transparent;border-bottom: 2px solid #00a6bc;box-shadow: none;}.w3l-workinghny-form .btn-style {font-size: 18px;color: #fff;width: 100%;background: #00a6bc;border: none;height: 55px;font-weight: 700;border-radius: 6px;transition: .3s ease;-webkit-transition: .3s ease;-moz-transition: .3s ease;-ms-transition: .3s ease;-o-transition: .3s ease;box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);}.w3l-workinghny-form .btn-style:hover {background: #4311ee;transform: translateY(-3px);box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);}.w3l-workinghny-form p.already,.w3l-workinghny-form p.already a {font-size: 18px;line-height: 25px;color: #495057;margin: 25px 0 0;text-align: center;}.w3l-workinghny-form p.remember {color: #495057;line-height: 20px}.w3l-workinghny-form p.already a {color: #495057;font-weight: 700;}.w3l-workinghny-form p.already a:hover {color: #4361ee;}.w3l-workinghny-form .check-remaind input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}.w3l-workinghny-form .check-remaind {display: block;position: relative;padding-left: 35px;cursor: pointer;margin: 5px 0px 30px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.w3l-workinghny-form .check-remaind input {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}.w3l-workinghny-form .checkmark {position: absolute;top: 0px;left: 0;height: 21px;width: 21px;background-color: #F5F4F2;border-radius: 4px;}.w3l-workinghny-form .check-remaind:hover input~.checkmark {background-color: #4361ee;}.w3l-workinghny-form .check-remaind input:checked~.checkmark {background-color: #4361ee;}.w3l-workinghny-form .checkmark:after {content: "";position: absolute;display: none;}.w3l-workinghny-form .check-remaind input:checked~.checkmark:after {display: block;}.w3l-workinghny-form .check-remaind .checkmark:after {left: 7px;top: 3px;width: 5px;height: 10px;border: solid #fff;border-width: 0 2px 2px 0;transform: rotate(45deg);}::-webkit-input-placeholder {color: #777;}::-moz-placeholder {color: #777;}:-ms-input-placeholder {color: #777;}:-moz-placeholder {color: #777;}@media (max-width: 992px) {.w3l-workinghny-form .workinghny-block-grid {grid-template-columns: 1fr;grid-gap: 10px;width: 100%;}.w3l-workinghny-form .login-form-content {padding: 0em 0em 2em 0;}.workinghny-left-img {order: 2;}.w3l-workinghny-form .logo a.brand-logo {font-size: 40px;margin-bottom: 10px;}.w3l-workinghny-form {height: auto;}}@media (max-width: 667px) {.w3l-workinghny-form .align-end {padding: 0em;}}@media (max-width: 480px) {.w3l-workinghny-form .logo a.brand-logo {font-size: 35px;}.w3l-workinghny-form h2 {font-size: 22px;}}@media (max-width: 415px) {.w3l-workinghny-form .copyright {margin-top: 30px;}}
写在最后
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
推荐阅读
学习更多技能
请点击下方公众号