目录
确定页面设计样式 创建js文件 jquery.min.js bootstrap.min.js 创建css文件 bootstrap.min.css materialdesignicons.min.css style.min.css 创建ftl文件 header.ftl footer.ftl login.ftl
可以自己用“画图”等软件进行设计，也可以打开常用软件模仿。 header.ftl
< link rel= "icon" href= "favicon.ico" type= "image/ico" >
< meta name= "keywords" content= "power-韩" >
< meta name= "description" content= "power-韩" >
< meta name= "author" content= "【韩】" >
< link href= "/admin/css/bootstrap.min.css" rel= "stylesheet" >
< link href= "/admin/css/materialdesignicons.min.css" rel= "stylesheet" >
< link href= "/admin/css/style.min.css" rel= "stylesheet" >
footer.ftl
< script type= "text/javascript" src= "/admin/js/jquery.min.js" > < / script>
< script type= "text/javascript" src= "/admin/js/bootstrap.min.js" > < / script>
.lyear-wrapper {
position : relative;
}
.lyear-login {
display : flex !important ;
min-height : 100vh;
align-items : center !important ;
justify-content : center !important ;
}
.login-center {
background : #fff;
min-width : 38.25rem;
padding : 2.14286em 3.57143em;
border-radius : 5px;
margin : 2.85714em 0;
}
.login-header {
margin-bottom : 1.5rem !important ;
}
.login-center .has-feedback.feedback-left .form-control {
padding-left : 38px;
padding-right : 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
left : 0;
right : auto;
width : 38px;
height : 38px;
line-height : 38px;
z-index : 4;
color : #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
left : 15px;
}
< ! DOCTYPE html>
< html lang= "zh" >
< head> < meta charset= "utf-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" / >
< title> - ${ siteName! "" } < / title>
< #include "../common/header.ftl" / >
< / head>
< body> < div class = "row lyear-wrapper" >
< div class = "lyear-login" >
< div class = "login-center" >
< div class = "login-header text-center" >
< a href= "index.html" >
< img alt= "light year admin" src= "/admin/images/logo-sidebar.png" >
< / a>
< / div>
< form action= "#!" method= "post" >
< div class = "form-group has-feedback feedback-left" >
< input type= "text" placeholder= "请输入您的用户名" class = "form-control" name= "username" id= "username" / >
< span class = "mdi mdi-account form-control-feedback" aria- hidden= "true" > < / span>
< / div>
< div class = "form-group has-feedback feedback-left" >
< input type= "password" placeholder= "请输入密码" class = "form-control" id= "password" name= "password" / >
< span class = "mdi mdi-lock form-control-feedback" aria- hidden= "true" > < / span>
< / div>
< div class = "form-group has-feedback feedback-left row" >
< div class = "col-xs-7" >
< input type= "text" name= "cpacha" id= "cpacha" maxlength= "4" class = "form-control" placeholder= "验证码" >
< span class = "mdi mdi-check-all form-control-feedback" aria- hidden= "true" > < / span>
< / div>
< div class = "col-xs-5" >
< img src= "/cpacha/generate_cpacha?vl=4&fs=21&w=126&h=40&method=admin_login" class = "pull-right" id= "captcha" style= "cursor: pointer;" onclick= "this.src=this.src+'&d='+Math.random();" title= "点击刷新" alt= "captcha" >
< / div>
< / div>
< div class = "form-group" >
< button class = "btn btn-block btn-primary" type= "button" id= "submit-btn" > 立即登录< / button>
< / div>
< / form>
< hr> < footer class = "col-sm-12 text-center" >
< p class = "m-b-0" > Copyright © 2023 < a href= "${siteUrl!" "} ">${siteName!" "} < / a> . All right reserved< / p>
< / footer>
< / div>
< / div>
< / div>
< #include "../common/footer.ftl" / >
< / body>
< / html>
![2023年中国艺术涂料市场发展历程及趋势分析：艺术涂料市场规模将进一步扩大[图]](https://img-blog.csdnimg.cn/img_convert/7b336bd97d29839cd03849013ad0f6b2.png)
