1、使用bootstrap实现

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><link rel="stylesheet" href="/bootstrap-3.3.7-dist/css/bootstrap.min.css"><link rel="stylesheet" href="/css/resgister.css">
</head>
<body>
<main class="main" role="main"><div class="container"><div class="row"><div class="col-md-4 col-md-offset-4"><form class="form-container" action="/loginCheck" method="post"><h2>用户登录</h2><div class="form-group"><label>账号</label><input type="text" class="form-control" name="username"  placeholder="请输入账号"></div><div class="form-group"><label>登录密码</label><input type="password" class="form-control" name="password"  placeholder="请输入密码"></div><button type="submit" class="btn btn-info btn-block" >登录</button></form></div></div></div>
</main><script src="/js/jquery-3.6.0.min.js"></script>
<script src="/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>
</html>

resgister.css为自定义文件

body{padding: 0%;background:url('../imags/timg.jpg') no-repeat;background-size: cover;
}
.form-container{padding: 10px 40px;margin:50px 0 0 0 ;border-radius: 5px;background: rgba(0,0,0,0.5);color: #ffffff;-webkit-box-shadow: 6px 7px 31px 0px rgba(0,0,0,0.75);-moz-box-shadow: 6px 7px 31px 0px rgba(0,0,0,0.75);box-shadow: 6px 7px 31px 0px rgba(0,0,0,0.75);
}
.form-container h2{text-align: center;
}

bootstrap-3.3.7-dist/css/bootstrap.min.css
jquery-3.6.0.min.js
bootstrap-3.3.7-dist/js/bootstrap.min.js
都可以通过相应官网下载
background:url(‘…/imags/timg.jpg’) no-repeat;中的time.jpg为登录背景图，可以自己替换

2、使用layui实现

代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>登录</title><link rel="stylesheet" href="/layui/css/layui.css"><link rel="stylesheet" href="/layui/css/admin.css"><link rel="stylesheet" href="/layui/css/log.css">
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;"><div class="layadmin-user-login-main"><div class="layadmin-user-login-box layadmin-user-login-header"><h2>Demo-Manage</h2><p>基于Layui的后台管理系统</p></div><div class="layadmin-user-login-box layadmin-user-login-body layui-form"><div class="layui-form-item"><label class="layadmin-user-login-icon layui-icon layui-icon-username"></label><input type="text" id="userCode"  lay-verify="required" placeholder="用户名" class="layui-input"></div><div class="layui-form-item"><label class="layadmin-user-login-icon layui-icon layui-icon-password"></label><input type="password" id="password" lay-verify="required" placeholder="密码" readonly onfocus="this.removeAttribute('readonly');" class="layui-input"></div><div class="layui-form-item" style="margin-bottom: 20px;"><input type="checkbox" name="remember" lay-skin="primary" title="记住密码" ><a href="#" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a></div><div class="layui-form-item"><button class="layui-btn layui-btn-fluid" lay-submit  id="userlogin">登 入</button></div><div class="layui-trans layui-form-item layadmin-user-login-other"><label>社交账号登入</label><a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a><a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a><a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a><a href="#" class="layadmin-user-jump-change layadmin-link">注册帐号</a></div></div></div>
</div><script src="/layui/layui.js" type="text/javascript"></script>
<script src="/js/jquery-3.6.0.min.js"></script>
<script>//JavaScript代码区域layui.use(['layer','element','form','jquery'], function(){let layer = layui.layer;let form = layui.form;let element = layui.element;let $ = layui.jquery;$("#userlogin").click(function(){let userCode = $("#userCode").val()let password = $("#password").val()$.ajax({url:"http://localhost:8080/login/login",data:{userCode:userCode,password:password},type:"post",success:function(result){console.log(result);if (result.type==='success'){layer.msg(result.tip,{time:2000},function () {location.href="http://localhost:8080/index.html"})}else if (result.type==='error'){layer.msg(result.tip,{time:2000})}else {layer.msg('未知异常，请联系管理员')}},})});});</script>
</body>
</html>

admin.css

/** layuiAdmin.std-v1.2.1 LPPL License By http://www.layui.com/admin/ */
html #layuicss-layuiAdmin{display:none;position:absolute;width:1989px}::-webkit-input-placeholder{color:#ccc}html{background-color:#f2f2f2;color:#666}.layadmin-tabsbody-item,[template]{display:none}[lay-href],[lay-tips],[layadmin-event]{cursor:pointer}.layui-layout-admin .layui-header{position:fixed;top:0;left:0;width:100%;height:50px}.layui-layout-admin .layui-header .layui-nav .layui-nav-child a{color:#333}.layui-layout-admin .layui-side{width:220px;top:0;z-index:1001}.layui-layout-admin .layui-header .layui-nav .layui-nav-item,.layui-layout-admin .layui-logo{height:50px;line-height:50px}.layui-layout-admin .layui-logo{position:fixed;left:0;top:0;z-index:1002;width:220px;height:49px;padding:0 15px;box-sizing:border-box;overflow:hidden;font-weight:300;background-repeat:no-repeat;background-position:center center}.layadmin-pagetabs,.layui-layout-admin .layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-layout-left{left:220px}.layadmin-pagetabs{position:fixed;top:50px;right:0;z-index:999}.layadmin-pagetabs .layui-breadcrumb{padding:0 15px}.layui-layout-admin .layui-body{position:fixed;top:90px;bottom:0}.layui-layout-admin .layui-body .layadmin-tabsbody-item{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden}.layui-layout-admin .layui-header .layui-nav-img{width:26px;height:26px}.layui-layout-admin .layui-header .layui-nav-child{top:55px}.layui-layout-admin .layui-header .layui-layout-right .layui-nav-child{left:auto;right:0}.layui-layout-admin .layui-header .layui-nav .layui-nav-child dd.layui-this,.layui-layout-admin .layui-header .layui-nav .layui-nav-child dd.layui-this a{background:0 0}.layadmin-pagetabs,.layui-layout-admin .layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-header .layui-layout-right,.layui-layout-admin .layui-header .layui-nav .layui-nav-item,.layui-layout-admin .layui-layout-left,.layui-layout-admin .layui-logo,.layui-layout-admin .layui-side{transition:all .3s;-webkit-transition:all .3s}.layui-icon-login-qq{color:#3492ED}.layui-icon-login-wechat{color:#4DAF29}.layui-icon-login-weibo{color:#CF1900}.layui-form[wid100] .layui-form-label{width:100px}.layui-form[wid100] .layui-input-block{margin-left:130px}@media screen and (max-width:450px){.layui-form[wid100] .layui-form-item .layui-input-inline{margin-left:132px}.layui-form[wid100] .layui-form-item .layui-input-inline+.layui-form-mid{margin-left:130px}}.layui-form-item .layui-input-company{width:auto;padding-right:10px;line-height:38px}.layui-bg-white{background-color:#fff}.layadmin-loading{position:absolute;left:50%;top:50%;margin:-16px -15px;font-size:30px;color:#c2c2c2}.layadmin-fixed{position:fixed;left:0;top:0;z-index:999}.layadmin-link{color:#029789!important}.layadmin-link:hover{opacity:.8}.layui-layer-admin .layui-layer-title{height:50px;line-height:50px;border:0;background-color:#20222A;color:#fff}.layui-layer-admin i[close]{position:absolute;padding:5px;right:10px;top:12px;color:#fff;cursor:pointer}.layui-layer-admin .layui-layer-content{padding:20px;line-height:22px}.layui-layer-admin .layui-layer-content cite{font-style:normal;color:#FF5722}.layui-layer-adminRight{top:50px!important;bottom:0;box-shadow:1px 1px 10px rgba(0,0,0,.1);border-radius:0;overflow:auto}.layadmin-note .layui-layer-content{padding:0}.layadmin-note textarea{display:block;width:300px;height:132px;min-width:300px;min-height:132px;line-height:20px;padding:10px 20px;border:none;box-sizing:border-box;color:#666;word-wrap:break-word}.layui-layout-admin .layui-layout-left{padding:0 10px}.layui-layout-admin .layui-layout-left .layui-nav-item{margin:0 20px}.layui-layout-admin .layui-input-search{display:inline-block;vertical-align:middle;height:32px;border:none;cursor:text}.layui-layout-admin .layui-layout-left a,.layui-layout-admin .layui-layout-right{padding:0}.layui-header .layui-nav-item .layui-icon{position:relative;top:1px;font-size:16px}.layui-header .layui-layout-right .layui-badge-dot{margin-left:11px}.layui-header .layui-nav .layui-this:after,.layui-layout-admin .layui-header .layui-nav-bar{top:0!important;bottom:auto;height:3px;background-color:#fff;background-color:rgba(255,255,255,.3)}.layadmin-body-shade{position:fixed;display:none;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,.3);z-index:1000}.layui-side-menu .layui-side-scroll{width:240px}.layui-side-menu .layui-nav{width:220px;margin-top:50px;background:0 0}.layui-side-menu .layui-nav .layui-nav-item a{height:40px;line-height:40px;padding-left:45px;padding-right:30px}.layui-side-menu .layui-nav .layui-nav-item>a{padding-top:8px;padding-bottom:8px}.layui-side-menu .layui-nav .layui-nav-item a:hover{background:0 0}.layui-side-menu .layui-nav .layui-nav-itemed>.layui-nav-child{padding:5px 0}.layui-side-menu .layui-nav .layui-nav-item .layui-icon{position:absolute;top:50%;left:20px;margin-top:-19px}.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child{background:0 0!important}.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child a{padding-left:60px}.layui-side-menu .layui-nav .layui-nav-more{right:15px}@media screen and (max-width:992px){.layui-layout-admin .layui-side{transform:translate3d(-220px,0,0);-webkit-transform:translate3d(-220px,0,0);width:220px}.layadmin-pagetabs,.layui-layout-admin .layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-layout-left{left:0}}.layadmin-side-shrink .layui-layout-admin .layui-logo{width:60px;background-image:url(res/logo.png)}.layadmin-side-shrink .layui-layout-admin .layui-logo span{display:none}.layadmin-side-shrink .layui-side{left:0;width:60px}.layadmin-side-shrink .layadmin-pagetabs,.layadmin-side-shrink .layui-layout-admin .layui-body,.layadmin-side-shrink .layui-layout-admin .layui-footer,.layadmin-side-shrink .layui-layout-admin .layui-layout-left{left:60px}.layadmin-side-shrink .layui-side-menu .layui-nav{position:static;width:60px}.layadmin-side-shrink .layui-side-menu .layui-nav-item{position:static}.layadmin-side-shrink .layui-side-menu .layui-nav-item>a{padding-right:0}.layadmin-side-shrink .layui-side-menu .layui-nav-item cite,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>a .layui-nav-more{display:none;padding:8px 0;width:200px}.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-itemed>a{background:rgba(0,0,0,.3)}.layadmin-side-spread-sm .layadmin-pagetabs,.layadmin-side-spread-sm .layui-layout-admin .layui-body,.layadmin-side-spread-sm .layui-layout-admin .layui-footer,.layadmin-side-spread-sm .layui-layout-admin .layui-layout-left{left:0;transform:translate3d(220px,0,0);-webkit-transform:translate3d(220px,0,0)}.layadmin-side-spread-sm .layui-layout-admin .layui-layout-right{transform:translate3d(220px,0,0);-webkit-transform:translate3d(220px,0,0)}.layadmin-side-spread-sm .layui-side{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}.layadmin-side-spread-sm .layadmin-body-shade{display:block}.layadmin-pagetabs .layui-tab-title li:first-child .layui-tab-close,.layadmin-tabs-select.layui-nav .layui-nav-bar,.layadmin-tabs-select.layui-nav .layui-nav-more{display:none}.layadmin-pagetabs{height:40px;line-height:40px;padding:0 80px 0 40px;background-color:#fff;box-sizing:border-box;box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.layadmin-pagetabs .layadmin-tabs-control{position:absolute;top:0;width:40px;height:100%;text-align:center;cursor:pointer;transition:all .3s;-webkit-transition:all .3s;box-sizing:border-box;border-left:1px solid #f6f6f6}.layadmin-pagetabs .layadmin-tabs-control:hover{background-color:#f6f6f6}.layadmin-pagetabs .layui-icon-prev{left:0;border-left:none;border-right:1px solid #f6f6f6}.layadmin-pagetabs .layui-icon-next{right:40px}.layadmin-pagetabs .layui-icon-down{right:0}.layadmin-tabs-select.layui-nav{position:absolute;left:0;top:0;width:100%;height:100%;padding:0;background:0 0}.layadmin-tabs-select.layui-nav .layui-nav-item{line-height:40px}.layadmin-tabs-select.layui-nav .layui-nav-item>a{height:40px}.layadmin-tabs-select.layui-nav .layui-nav-item a{color:#666}.layadmin-tabs-select.layui-nav .layui-nav-child{top:40px;left:auto;right:0}.layadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this,.layadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this a{background-color:#f2f2f2!important;color:#333}.layadmin-pagetabs .layui-tab{margin:0;overflow:hidden}.layadmin-pagetabs .layui-tab-title{height:40px;border:none}.layadmin-pagetabs .layui-tab-title li{min-width:0;line-height:40px;max-width:160px;text-overflow:ellipsis;padding-right:40px;overflow:hidden;border-right:1px solid #f6f6f6;vertical-align:top}.layadmin-pagetabs .layui-tab-title li:first-child{padding-right:15px}.layadmin-pagetabs .layui-tab-title li .layui-tab-close{position:absolute;right:8px;top:50%;margin:-7px 0 0;width:16px;height:16px;line-height:16px;border-radius:50%;font-size:12px}.layadmin-pagetabs .layui-tab-title li:after{content:'';position:absolute;top:0;left:0;width:0;height:2px;border-radius:0;background-color:#292B34;transition:all .3s;-webkit-transition:all .3s}.layadmin-pagetabs .layui-tab-title li:hover:after{width:100%}.layadmin-pagetabs .layui-tab-title li.layui-this,.layadmin-pagetabs .layui-tab-title li:hover{background-color:#f6f6f6}.layadmin-pagetabs .layui-tab-title li.layui-this:after{width:100%;border:none;height:2px;background-color:#292B34}.layadmin-tabspage-none .layui-layout-admin .layui-header{border-bottom:none;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.layadmin-tabspage-none .layui-layout-admin .layui-body{top:50px}.layadmin-tabspage-none .layadmin-header{display:block}.layadmin-tabspage-none .layadmin-header .layui-breadcrumb{border-top:1px solid #f6f6f6}.layui-layout-admin .layui-header{border-bottom:1px solid #f6f6f6;box-sizing:border-box;background-color:#fff}.layui-layout-admin .layui-header a,.layui-layout-admin .layui-header a cite{color:#333}.layui-layout-admin .layui-header a:hover{color:#000}.layui-layout-admin .layui-header .layui-nav .layui-nav-more{border-top-color:#666}.layui-layout-admin .layui-header .layui-nav .layui-nav-mored{border-color:transparent transparent #666}.layui-layout-admin .layui-header .layui-nav .layui-this:after,.layui-layout-admin .layui-header .layui-nav-bar{height:2px;background-color:#20222A}.layui-layout-admin .layui-logo{background-color:#20222A;box-shadow:0 1px 2px 0 rgba(0,0,0,.15)}.layui-layout-admin .layui-logo,.layui-layout-admin .layui-logo a{color:#fff;color:rgba(255,255,255,.8)}.layui-side-menu{box-shadow:1px 0 2px 0 rgba(0,0,0,.05)}.layui-layout-admin .layui-footer{padding:10px 0;text-align:center;box-shadow:0 -1px 2px 0 rgba(0,0,0,.05)}.layadmin-setTheme-side,.layui-side-menu{background-color:#20222A;color:#fff}.layadmin-setTheme-header,.layui-layout-admin .layui-footer{background-color:#fff}.layui-tab-admin .layui-tab-title{background-color:#393D49;color:#fff}.layui-fluid{padding:15px}.layadmin-header{display:none;height:50px;line-height:50px;margin-bottom:0;border-radius:0}.layadmin-header .layui-breadcrumb{padding:0 15px}.layui-card-header{position:relative}.layui-card-header .layui-icon{line-height:initial;position:absolute;right:15px;top:50%;margin-top:-7px}.layadmin-iframe{position:absolute;width:100%;height:100%;left:0;top:0;right:0;bottom:0}.layadmin-carousel{height:185px!important;background-color:#fff}.layadmin-carousel .layui-carousel-ind li{background-color:#e2e2e2}.layadmin-carousel .layui-carousel-ind li:hover{background-color:#c2c2c2}.layadmin-carousel .layui-carousel-ind li.layui-this{background-color:#999}.layadmin-carousel .layui-carousel,.layadmin-carousel>[carousel-item]>*{background-color:#fff}.layadmin-carousel .layui-col-space10{margin:0}.layadmin-carousel .layui-carousel-ind{position:absolute;top:-41px;text-align:right}.layadmin-carousel .layui-carousel-ind ul{background:0 0}.layui-card .layui-tab-brief .layui-tab-title{height:42px;border-bottom-color:#f6f6f6}.layui-card .layui-tab-brief .layui-tab-title li{margin:0 15px;padding:0;line-height:42px}.layui-card .layui-tab-brief .layui-tab-title li.layui-this{color:#333}.layui-card .layui-tab-brief .layui-tab-title .layui-this:after{height:43px}.layui-card .layui-tab-brief .layui-tab-content{padding:15px}.layui-card .layui-table-view{margin:0}.layadmin-shortcut li{text-align:center}.layadmin-shortcut li .layui-icon{display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s}.layadmin-shortcut li cite{position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px}.layadmin-shortcut li:hover .layui-icon{background-color:#f2f2f2}.layadmin-backlog .layadmin-backlog-body{display:block;padding:10px 15px;background-color:#f8f8f8;color:#999;border-radius:2px;transition:all .3s;-webkit-transition:all .3s}.layadmin-backlog-body h3{padding-bottom:10px;font-size:12px}.layadmin-backlog-body p cite{font-style:normal;font-size:30px;font-weight:300;color:#009688}.layadmin-backlog-body:hover{background-color:#f2f2f2;color:#888}.layadmin-dataview{height:332px!important}.layadmin-dataview>[carousel-item]:before{display:none}.layadmin-dataview>[carousel-item]>div{height:332px}.layadmin-takerates{padding-top:5px}.layadmin-takerates .layui-progress{margin:50px 0 60px}.layadmin-takerates .layui-progress:last-child{margin-bottom:10px}.layadmin-takerates .layui-progress h3{position:absolute;right:0;top:-35px;color:#999;font-size:14px}.layadmin-takerates .layui-progress-bar{text-align:left}.layadmin-takerates .layui-progress-text{top:-35px;line-height:26px;font-size:26px}.layadmin-news{height:60px!important;padding:5px 0}.layadmin-news a{display:block;line-height:60px;text-align:center}.layadmin-news .layui-carousel-ind{height:45px}.layadmin-list li{margin-bottom:6px;padding-bottom:6px;border-bottom-color:#f6f6f6;list-style-position:inside;list-style-type:disc;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layadmin-list li a{color:#666}.layadmin-list li a:hover{color:#009688}.layadmin-list li:last-child{border:none;padding:0;margin:0}.layadmin-text p{margin-bottom:10px;text-indent:2em}.layadmin-text p:last-child{margin:0}.layadmin-font-em{font-size:13px;color:#758697}.layui-card-header .layui-a-tips{position:absolute;right:15px;color:#01AAED}.layuiadmin-card-text{background-color:#f8f8f8;color:#777;padding:24px}.layuiadmin-card-text .layui-text-top{padding-bottom:10px}.layuiadmin-card-text .layui-text-top i{margin-right:10px;font-size:24px;color:#009688}.layuiadmin-card-text .layui-text-top a{line-height:24px;font-size:16px;vertical-align:top}.layuiadmin-card-text .layui-text-center{height:44px;line-height:22px;margin-bottom:10px;overflow:hidden}.layuiadmin-card-text .layui-text-bottom{position:relative}.layuiadmin-card-text .layui-text-bottom a{color:#777;font-size:12px;text-overflow:ellipsis;word-break:break-all}.layuiadmin-card-text .layui-text-bottom span{color:#CCC;font-size:12px;position:absolute;right:0}.layuiadmin-badge,.layuiadmin-btn-group,.layuiadmin-span-color{position:absolute;right:15px}.layuiadmin-card-link a:hover,.layuiadmin-card-team li a:hover,.layuiadmin-card-text a:hover{color:#01AAED;transition:all .3s}.layuiadmin-card-status{padding:0 10px 10px}.layuiadmin-card-status dd{padding:15px 0;border-bottom:1px solid #EEE;display:-webkit-flex;display:flex}.layuiadmin-card-status dd:last-child{border:none}.layuiadmin-card-status dd div.layui-status-img,.layuiadmin-card-team .layui-team-img{width:32px;height:32px;border-radius:50%;background-color:#009688;margin-right:15px}.layuiadmin-card-status dd div.layui-status-img a{width:100%;height:100%;display:inline-block;text-align:center;line-height:32px}.layuiadmin-card-status dd div.layui-status-img img,.layuiadmin-card-team .layui-team-img img{width:50%;height:50%}.layuiadmin-card-status dd div a{color:#01AAED}.layuiadmin-card-status dd div span{color:#BBB}.layuiadmin-card-link{padding-left:10px;font-size:0}.layuiadmin-card-link a{display:inline-block;width:25%;color:#666;font-size:14px;margin-bottom:12px}.layuiadmin-card-link button{vertical-align:top}.layuiadmin-card-link button:hover{color:#009688}.layuiadmin-card-team li{padding:10px 0 10px 10px}.layuiadmin-card-team .layui-team-img{display:inline-block;margin-right:8px;width:24px;height:24px;text-align:center;line-height:24px}.layuiadmin-card-team span{color:#777}.layuiadmin-badge{top:50%;margin-top:-9px;color:#01AAED}.layuiadmin-card-list{padding:15px}.layuiadmin-card-list p.layuiadmin-big-font{font-size:36px;color:#666;line-height:36px;padding:5px 0 10px;overflow:hidden;text-overflow:ellipsis;word-break:break-all;white-space:nowrap}.layuiadmin-card-list p.layuiadmin-normal-font{padding-bottom:10px;font-size:20px;color:#666;line-height:24px}.layuiadmin-span-color{font-size:14px}.layuiadmin-span-color i{padding-left:5px}.layuiadmin-card-status li{position:relative;padding:10px 0;border-bottom:1px solid #EEE}.layuiadmin-card-status li h3{padding-bottom:5px;font-weight:700}.layuiadmin-card-status li p{padding-bottom:10px}.layuiadmin-card-status li>span{color:#999}.layuiadmin-home2-usernote .layuiadmin-reply{display:none;position:absolute;right:0;bottom:12px}.layuiadmin-home2-usernote li:hover .layuiadmin-reply{display:block}.layuiadmin-page-table td span{color:#2F4056}.layuiadmin-page-table td span.first{color:#FF5722}.layuiadmin-page-table td span.second{color:#FFB800}.layuiadmin-page-table td span.third{color:#5FB878}.layuiAdmin-msg-detail h1{font-size:16px}.layuiAdmin-msg-detail .layui-card-header{height:auto;line-height:30px;padding:15px}.layuiAdmin-msg-detail .layui-card-header span{padding:0 5px;color:#999}.layuiAdmin-msg-detail .layui-card-header span:first-child{padding-left:0}.layuiAdmin-msg-detail .layui-card-body{padding:15px}.layuiadmin-content-bread{padding-bottom:20px}.layuiadmin-order-progress{position:relative;top:12px}.layui-card-header.layuiadmin-card-header-auto{padding-top:15px;padding-bottom:15px;height:auto}.layuiadmin-card-header-auto i.layuiadmin-button-btn{position:relative;right:0;top:0;vertical-align:middle}.layuiadmin-card-header-auto .layui-form-item:last-child{margin-bottom:0}.layadmin-setTheme{padding:15px;overflow-x:hidden}.layadmin-setTheme>h5{padding:20px 0 10px;color:#000}.layadmin-setTheme>h5:first-child{padding-top:0}.layadmin-setTheme-color{width:330px;font-size:0}.layadmin-setTheme-color li{position:relative;display:inline-block;vertical-align:top;width:80px;height:50px;margin:0 15px 15px 0;background-color:#f2f2f2;cursor:pointer;font-size:12px;color:#666}.layadmin-setTheme-color li:after{content:'';position:absolute;z-index:20;top:50%;left:50%;width:1px;height:0;border:1px solid #f2f2f2;transition:all .3s;-webkit-transition:all .3s;opacity:0}.layadmin-setTheme-color li.layui-this:after,.layadmin-setTheme-color li:hover:after{width:100%;height:100%;padding:4px;top:-5px;left:-5px;border-color:#5FB878;opacity:1}.layadmin-setTheme-header{position:relative;z-index:10;height:10px;border-top:1px solid #f2f2f2;border-right:1px solid #f2f2f2}.layadmin-setTheme-side{position:absolute;left:0;top:0;width:20px;height:100%;z-index:11;box-shadow:1px 0 2px 0 rgba(0,0,0,.05)}.layadmin-setTheme-logo{position:absolute;left:0;top:0;width:100%;height:10px;box-shadow:0 1px 2px 0 rgba(0,0,0,.15)}.layadmin-form-right{text-align:right}.layadmin-about p{margin-bottom:10px}.layadmin-menu-list .layui-card-header{height:50px;line-height:50px;font-size:16px}.layadmin-menu-list .layui-card-header:active{background-color:#f2f2f2}.layadmin-menu-list .layui-card-header .layui-icon{position:relative;top:1px;left:0;display:inline-block;margin:0 10px;font-size:18px}@-webkit-keyframes layui-rl{from{-webkit-transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes layui-rl{from{transform:translate3d(100%,0,0)}to{transform:translate3d(0,0,0)}}.layui-anim-rl{-webkit-animation-name:layui-rl;animation-name:layui-rl}@-webkit-keyframes layui-lr{from{-webkit-transform:translate3d(0 0,0);opacity:1}to{-webkit-transform:translate3d(100%,0,0);opacity:1}}@keyframes layui-lr{from{transform:translate3d(0,0,0)}to{transform:translate3d(100%,0,0)}}.layui-anim-lr,.layui-anim-rl.layer-anim-close{-webkit-animation-name:layui-lr;animation-name:layui-lr}.layadmin-tips{margin-top:30px;text-align:center}.layadmin-tips .layui-icon[face]{display:inline-block;font-size:300px;color:#393D49}.layadmin-tips .layui-text{width:500px;margin:30px auto;padding-top:20px;border-top:5px solid #009688;font-size:16px}.layadmin-tips h1{font-size:100px;line-height:100px;color:#009688}.layadmin-tips .layui-text .layui-anim{display:inline-block}@media screen and (max-width:768px){.layadmin-panel-selection{margin:0;width:auto}.layui-body .layui-nav .layui-nav-item{display:block}.layui-layout-admin .layui-body .layadmin-tabsbody-item{-webkit-overflow-scrolling:touch;overflow:auto}}

log.css

/** layuiAdmin.std-v1.2.1 LPPL License By http://www.layui.com/admin/ */
#LAY_app,body,html{height:100%}.layui-layout-body{overflow:auto}#LAY-user-login,.layadmin-user-display-show{display:block!important}.layadmin-user-login{position:relative;left:0;top:0;padding:110px 0;min-height:100%;box-sizing:border-box}.layadmin-user-login-main{width:375px;margin:0 auto;box-sizing:border-box}.layadmin-user-login-box{padding:20px}.layadmin-user-login-header{text-align:center}.layadmin-user-login-header h2{margin-bottom:10px;font-weight:300;font-size:30px;color:#000}.layadmin-user-login-header p{font-weight:300;color:#999}.layadmin-user-login-body .layui-form-item{position:relative}.layadmin-user-login-icon{position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2}.layadmin-user-login-body .layui-form-item .layui-input{padding-left:38px}.layadmin-user-login-codeimg{max-height:38px;width:100%;cursor:pointer;box-sizing:border-box}.layadmin-user-login-other{position:relative;font-size:0;line-height:38px;padding-top:20px}.layadmin-user-login-other>*{display:inline-block;vertical-align:middle;margin-right:10px;font-size:14px}.layadmin-user-login-other .layui-icon{position:relative;top:2px;font-size:26px}.layadmin-user-login-other a:hover{opacity:.8}.layadmin-user-jump-change{float:right}.layadmin-user-login-footer{position:absolute;left:0;bottom:0;width:100%;line-height:30px;padding:20px;text-align:center;box-sizing:border-box;color:rgba(0,0,0,.5)}.layadmin-user-login-footer span{padding:0 5px}.layadmin-user-login-footer a{padding:0 5px;color:rgba(0,0,0,.5)}.layadmin-user-login-footer a:hover{color:rgba(0,0,0,1)}.layadmin-user-login-main[bgimg]{background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,.05)}.ladmin-user-login-theme{position:fixed;bottom:0;left:0;width:100%;text-align:center}.ladmin-user-login-theme ul{display:inline-block;padding:5px;background-color:#fff}.ladmin-user-login-theme ul li{display:inline-block;vertical-align:top;width:64px;height:43px;cursor:pointer;transition:all .3s;-webkit-transition:all .3s;background-color:#f2f2f2}.ladmin-user-login-theme ul li:hover{opacity:.9}@media screen and (max-width:768px){.layadmin-user-login{padding-top:60px}.layadmin-user-login-main{width:300px}.layadmin-user-login-box{padding:10px}}

layui.css
layui.js
jquery-3.6.0.min.js
通过相关官网下载

3、使用vue实现

<template><div id="logintwo"><div class="avue-home" v-if="loading" style="z-index: 99;"><div class="avue-home__main"><img class="avue-home__loading" src="../assets/loading-spin.svg" alt="loading"><div class="avue-home__title">努力加载中...</div></div></div><div style="display: flex;width: 100%;height: 100%;overflow: hidden;">
<!--      <div class="name">全球豪车信息共享系统</div>--><div class="login-modal"><div class="title">登录</div><el-form class="login-form":rules="loginRules"ref="loginForm":model="loginForm"label-width="0"><el-form-item prop="username"><el-inputplaceholder="请输入用户名"prefix-icon="el-icon-user"v-model="loginForm.username"></el-input></el-form-item><el-form-item prop="password"><el-input:type="passwordType"placeholder="请输入密码"prefix-icon="el-icon-lock"v-model="loginForm.password"></el-input></el-form-item><el-form-item><el-row :span="24"><el-col :span="12"><el-checkbox v-model="loginForm.rememberPwd">记住密码</el-checkbox></el-col><el-col :span="12"><el-popoverplacement="top-start"title=""width="200"trigger="hover"content="忘记密码请联系系统管理员"><span style="color: #1890ff;float: right;" slot="reference">忘记密码</span></el-popover></el-col></el-row></el-form-item><el-form-item><el-button type="primary"style="width: 100%;"@click.native.prevent="handleLogin"class="login-submit">登录</el-button></el-form-item></el-form></div></div></div>
</template><script>
export default {name: "logintwo",data() {return {loading: true,passwordType: "password",loginForm: {//用户名username: "",//密码password: "",rememberPwd: false,},loginRules: {username: [{required: true, message: "请输入用户名", trigger: "blur"}],password: [{required: true, message: "请输入密码", trigger: "blur"},{min: 1, message: "密码长度最少为6位", trigger: "blur"}]},}},mounted() {let that = this;setTimeout(function(){that.loading = false;},500);},methods: {showPassword() {this.passwordType === ""? (this.passwordType = "password"): (this.passwordType = "");},handleLogin() {this.$refs.loginForm.validate(valid => {if (valid) {const loading = this.$loading({lock: true,text: '登录中,请稍后。。。',spinner: "el-icon-loading"});//loading.close();}});},}
}
</script><style scoped>
#logintwo{width: 100%;height: 100%;background-size: 100% 100%;background-image: url("../assets/0004.jpeg");background-repeat: no-repeat;background-position: center center;overflow: auto;position: fixed;line-height: 100%;
}
.logo{width: auto;height: 60px;display: flex;overflow: hidden;background-color: #1fb494;
}
.logo img{width: 32px;height: 32px;margin: 14px 10px 0 15px;
}
.logo .title{font-size: 16px;text-overflow: ellipsis;color: white;line-height: 61px;
}
.top-box{height: 60px;display: flex;background-color: #1fb494;
}
.top-box-i{width: 32px;height: 32px;font-size: 24px;margin: 16px 10px 0 15px;color: #FFFFFF;
}.avue-home {/*background-color: #303133;*/background-color: rgba(39, 51, 59, 1.0);height: 100%;display: flex;flex-direction: column;
}.avue-home__main {user-select: none;width: 100%;flex-grow: 1;display: flex;justify-content: center;align-items: center;flex-direction: column;
}.avue-home__footer {width: 100%;flex-grow: 0;text-align: center;padding: 1em 0;
}.avue-home__footer>a {font-size: 12px;color: #ABABAB;text-decoration: none;
}.avue-home__loading {height: 32px;width: 32px;margin-bottom: 20px;
}.avue-home__title {color: #FFF;font-size: 14px;margin-bottom: 10px;
}.avue-home__sub-title {color: #ABABAB;font-size: 12px;
}::-webkit-scrollbar{width: 7px;height: 7px;display: none;background-color: transparent;
}
::-webkit-scrollbar-thumb {border-radius: 5px;background-color: rgba(39, 51, 59, 1.0);}
::-webkit-scrollbar-track-piece {background-color: transparent;
}
a{color: #FFFFFF;text-decoration: none;
}
/*body{*/
/*  background-size: 100% 100%;*/
/*  background-image: linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("../assets/0003.jpeg");*/
/*  background-repeat: no-repeat;*/
/*}*/
.name{line-height: 50px;font-size: 30px;font-weight: 700;color: #FFFFFF;margin-left: 10px;
}
.login-modal{position: relative;width: 420px;height: 450px;margin: 0 auto;top: 50%;margin-top: -225px;background-color: #FFFFFF;border-radius: 5px;
}
.title{height: 100px;line-height: 100px;font-weight: 650;text-align: center;font-size: 28px;
}
.login-form{margin: 20px 40px;
}
</style>

loading-spin.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve"><path opacity="0.2" fill="#FF6700" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path><path fill="#FF6700" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform></path>
</svg>

待续

拿来即用的前端登录页面（简洁清爽版）相关推荐

SpringBoot+Vue+Mybatis-plus 博客（一）：完成博客后台前端登录页面、后端登录接口
SpringBoot+Vue+Mybatis-plus 博客:个人博客介绍及效果展示 SpringBoot+Vue+Mybatis-plus 博客(一):完成博客后台前端登录页面.后端登录接口 Spr ...
复杂的前端登录页面代码
好的.前端登录页面的代码可能会很复杂,这取决于实现的细节和功能. 基本的前端登录页面可能会包含以下内容: HTML 用于结构化内容,例如表单.输入框和按钮 CSS 用于控制外观和布局 JavaScri ...
使用JS的promise实现前端登录页面和后端的交互
使用JS的promise实现前端登录页面和后端的交互个人认为JS的promise的作用和ajax差不多,形式上也是相似,接下来一起来看看 1.布局一个简单的前端登录页面,不要求细致,能看就问题不大. ...
好看的前端登录页面（HTML+CSS）
效果图代码 HTML <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
【HTML5】登录页面制作简易版
刚开始学习Java.文件的命名,讲道理应该以英文为主,但是英语又不好,所以只好用拼音,最痛苦的应该算是那些英语又不好,又想秀一下的程序员,一半英语一半拼音,如mainFangFa~~~你说看了糟心不糟 ...
html前端登录验证码,前端登录页面开发_js生成验证码并验证
/p> 前端集成开发工具: margin: 0; padding: 0; } a { text-decoration: none; } .main_bar { width: 100%; heig ...
前端登录页面（背景换肤 + 密码错误提示 + 密码隐藏切换）
效果展示: 背景切换: 密码提示:(要求密码位数为6-16之间,可自行改变) 代码部分: <!DOCTYPE html> <html lang="en"> ...
【vue前端】Echarts 3D地球照片显示白球该如何处理+ 地球模型+ 简单前端登录页面 +数字时钟组件
使用Echarts 3D地球显示如下的白球该如何处理? 解决方法: 错误写法: baseTexture: '@/assets/echarts/earth.jpg', 将图片地址引入部分改成requir ...
【一、bootstrap框架前端注册登录页面】
一.使用bootstrap框架写一个简易的前端登录页面. 先上截图下面开始记录本人使用bootstrap框架写这个登录页面的过程 1.bootstrap需要的配置文件 <!-- 新 Boots ...

拿来即用的前端登录页面（简洁清爽版）

1、使用bootstrap实现

2、使用layui实现

3、使用vue实现

拿来即用的前端登录页面（简洁清爽版）相关推荐

最新文章

热门文章