Web开发-登录页面设计流程

╰+攻爆jí腚メ 2024-02-27 07:08 105阅读 0赞

#### 目录 ####

*  确定页面设计样式
 *  创建js文件
 *   *  jquery.min.js
     *  bootstrap.min.js
 *  创建css文件
 *   *  bootstrap.min.css
     *  materialdesignicons.min.css
     *  style.min.css
 *  创建ftl文件
 *   *  header.ftl
     *  footer.ftl
     *  login.ftl
     *   *  css部分
         *  html部分

## 确定页面设计样式 ##

*  可以自己用“画图”等软件进行设计，也可以打开常用软件模仿。  
    ![在这里插入图片描述][528eaf3303d947408e3b0d6f15a61a10.png_pic_center]

## 创建js文件 ##

### jquery.min.js ###

### bootstrap.min.js ###

## 创建css文件 ##

### bootstrap.min.css ###

### materialdesignicons.min.css ###

### style.min.css ###

## 创建ftl文件 ##

### header.ftl ###

### footer.ftl ###

### login.ftl ###

#### css部分 ####

.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;
    }

#### html部分 ####

<!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>

[528eaf3303d947408e3b0d6f15a61a10.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/27/19d1458d2eaa4f76810b80d75e778f4f.png