一个系统登录界面的设计（含相关代码）

大家好，欢迎来到IT知识分享网。

为了忘却的纪念，于是乎就把登录界面设计和实现的过程记录下来。

1.修改档案管理登录界面的起因

档案管理系统界面上线之前，觉得这样太简单，有点难为情，人家用户信任我们，我们弄给这样没有技术含量的登录界面，也太对不起人了，于是，搜搜一些大型网站的登录界面，后来看到12306网站的登录界面，眼睛一亮：就是它了。

2.登录界面的设计草图

根据上面的浏览和研究，决定弄一个类似的登录界面，垂直方向分三栏，具体是：logo区域，登录区域和版权信息，中间的登录区域分左边和右边，左边显示系统介绍和帮助信息，右边为用户登录的界面。画个草图或用Axure把设计的想法表达出来，图显示如下。

3.登录界面的实现

根据设计的草图，开始登录界面的实现。

本次档案管理系统采用了Bootstrap进行前端设计，登录界面也不例外。

3.1 登录页面整体实现

新建一个jsp页面文件，命名为：login.jsp，引入jquery‐2.1.1.min.js和bootstrap‐3.3.7，其中bootstrap包含css和js文件，分别是：bootstrap.min.js和bootstrap.min.css，另外引入字体文件：font‐awesome.min.css，整个页面的文件如下：

程序清单3.1 login.jsp

<%@ page language="java" contentType="text/html; charset=UTF‐8" pageEncoding="UTF‐8"%>
<%@ include file="/include/global.jsp"%>

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf‐8">
 <meta http‐equiv="X‐UA‐Compatible" content="IE=edge,chrome=1">
 <meta name="keywords" content="荆楚理工学院,荆楚理工,荆楚,综合档案管理系统">
 <meta name="description" content="荆楚理工学院综合档案管理系统V1.0">
 <meta name="viewport" content="width=device‐width, initial‐scale=1">

 <title>荆楚理工学院综合档案管理系统V1.0</title>

 <link rel="stylesheet" href="${staticPath }/static/bootstrap‐3.3.7/css/bootstrap.min.css" />
 <link rel="stylesheet" href="${staticPath }/static/css/font‐awesome.min.css">
 </head>

<body>
 <!‐‐ 头部 ‐‐>
 <nav class="navbar" role="navigation">
 <div class="container">

		<div>
logo区域

		</div>
</div>
</nav>
<!‐‐ 登录区域 ‐‐>
<div class="content" id="content">
 <div class="container">
 <div class="row">登录区域
 </div>
</div>
</div>
<!‐‐ 版权信息 ‐‐>
<div class="footer">
 <div class="container">
 <div class="row">
 版权信息
</div>
</div>
</div>
<!‐‐ Javascript:js文件的引入 ‐‐>
<script type="text/javascript" src="${staticPath }/static/js/jquery‐2.1.1.min.js"></script>
<script type="text/javascript" src="${staticPath }/static/bootstrap‐3.3.7/js/bootstrap.min.js"></script>
 
 </body>
</html>

代码说明：

1.整个布局采用了Bootstrap中的导航栏nav和div+css布局。

2.第21~27行采用导航栏布局，导航栏nav是使用Bootstrap进行网站设计一个很有用的功能，可用于页面导航、站点logo信息和定义导航样式，比如：可以是按钮、超链接和菜单等形式的导航，是Bootstrap中一个基础的响应式组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。第21行创建导航栏nav，向 <nav> 标签添加 class .navbar，添加role=”navigation”，有助于增加可访问性。

3.div+css布局是html5最核心的布局形式，登录页面程序清单3.1 login.jsp，采用了Bootstrap提供的默认的css,主要有：navbar、content、footer、container、row。

4.css.navbar代码：

.navbar {   position: relative;   min‐height: 50px;   margin‐bottom: 20px;   border: 1px solid transparent; } @media (min‐width: 768px) {   .navbar {     border‐radius: 4px;   } }

5.布局容器container和row

container和row的css样式如下：

.container {
  padding‐right: 15px;
  padding‐left: 15px;
  margin‐right: auto;
  margin‐left: auto;
}
@media (min‐width: 768px) {
  .container {
    width: 750px;
  }
}
</body>
</html>
49
50
@media (min‐width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min‐width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container‐fluid {
  padding‐right: 15px;
  padding‐left: 15px;
  margin‐right: auto;
  margin‐left: auto;
}
.row {
  margin‐right: ‐15px;
  margin‐left: ‐15px;
}

Bootstrap 需要为页面内容和栅格系统提供了.container 容器。有两种样式：.container 和.containerfluid，由于 padding 等属性的原因，这两种容器样式类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。.containerfluid 类用于 100% 宽度，占据全部视口（viewport）的容器。行（row）必须包含在 .container （固定宽度）或 .containerfluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

第22、31和39行采用.container 布局。

上面图是运行后的界面，很显然还是个雏形，也许连雏形都算不上。

3.2 创建**css文件：style.css和*login.css***

在static的css文件夹中创建一个login文件夹，在该文件夹中创建两个css文件，分别为：style.css。

程序清单3.2 style.css

* {
    margin: 0;
    padding: 0
}
html, body {
    height: 100%; /* 作为div的父元素 */
    /* background: #1faad6; */
}
body {
    font‐family: 'Roboto', sans‐serif;
    font‐size: 16px;
    font‐weight: 300;
    color: #888;
    line‐height: 30px;
    /* text‐align: center; */
}
.container {
    /* 只有同时为html和body设置height: 100%时，这里才生效， 并且随浏览器窗口变化始终保持和浏览器视窗等高 */
    height: 100%;
    position: relative;
}

在程序清单3.1中引入style.css，具体语句如下：

程序清单3.3 login.jsp

<%@ page language="java" contentType="text/html; charset=UTF‐8" pageEncoding="UTF‐8"%>
<%@ include file="/include/global.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf‐8">
<meta http‐equiv="X‐UA‐Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="荆楚理工学院,荆楚理工,荆楚,综合档案管理系统">
<meta name="description" content="荆楚理工学院综合档案管理系统V1.0">
<meta name="viewport" content="width=device‐width, initial‐scale=1">
<title>荆楚理工学院综合档案管理系统V1.0</title>
<link rel="stylesheet" href="${staticPath }/static/bootstrap‐3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="${staticPath }/static/css/font‐awesome.min.css">
<!‐‐ 引入登录界面的css ‐‐>
<link rel="stylesheet" href="${staticPath }/static/css/login/style.css">
</head>
<body>
    <!‐‐ 头部 ‐‐>
    <nav class="navbar" role="navigation">
        <div class="container">
            <div>
                logo区域
            </div>
        </div>
    </nav> 
    <!‐‐ 登录区域 ‐‐>
    <div class="container">
        <div class="row">登录区域
        </div>
    </div>     
    <!‐‐ 版权信息 ‐‐>
    <div class="footer">
        <div class="container">
            <div class="row">
                版权信息
            </div>
        </div>
    </div>
    <!‐‐ Javascript:js文件的引入 ‐‐>
    <script type="text/javascript"  src="${staticPath }/static/js/jquery‐2.1.1.min.js"></script>
    <script type="text/javascript"  src="${staticPath }/static/bootstrap‐3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

运行界面如下：

3.3 logo区域的设计

logo区域采用了Bootstrap中的导航navbar组件（设置nav元素为导航条组件）

程序清单3.4 style.css

* {
    margin: 0;
    padding: 0
}
html, body {
    height: 100%; /* 作为div的父元素 */
    /* background: #1faad6; */
}
body {
    font‐family: 'Roboto', sans‐serif;
    font‐size: 16px;
    font‐weight: 300;
    color: #888;
    line‐height: 30px;
    /* text‐align: center; */
}
.container {
    /* 只有同时为html和body设置height: 100%时，这里才生效， 并且随浏览器窗口变化始终保持和浏览器视窗等高 */
    height: 100%;
    position: relative;
}
/* start：logo区域的css */
.navbar {
    padding‐top: 20px;
    background: #fff;
    background: rgba(51, 51, 51, 0.3);
    border: 0;
    ‐o‐transition: all .3s;
    ‐moz‐transition: all .3s;
    ‐webkit‐transition: all .3s;
    ‐ms‐transition: all .3s;
    transition: all .3s;
}
.navbar.navbar‐no‐bg {
    background: #fff;
}
.navbar‐brand {
    width: 250px;
    height: 60px;
    background: url(../../images/login/logo.png) left center no‐repeat;
    text‐indent: ‐99999px;
}
.header‐welcome {
    float: left;
    height: 50px;
    line‐height: 50px;
    padding‐left: 5px;
    font‐size: 20px;
}
/* end:logo区域结束 */

在login.jsp页面对logo头部修改如下：

程序清单3.5 login.jsp

<!‐‐ logo头部 ‐‐>     <nav class="navbar navbar‐no‐bg" role="navigation">         <div class="container">             <div class="navbar‐header">                 <a class="navbar‐brand" href="#">综合档案管理系统V1.0</a>                 <div class="header‐welcome">综合档案管理系统V1.0</div>             </div>         </div>     </nav>

运行：

3.4 登录区域的设计与实现

3.4.1 登录区域总体布局

登录区域根据设计图，分左右两栏：左边是系统简介、系统帮助等信息，用户在不登录系统的情况下就可以对系统进行了解，另外，也可以查询一些公共服务的档案信息；右边是用户登录界面。两栏布局采用了Bootstrap的栅格系统，左边8列，右边4列。由于垂直三栏都包含容器container，为了保持其css的一致性，在登录区域这个container容器的外面又增加一个div,用于管理整个登录区域下面的标签，就相当于加了一个相框，里面放不同的照片，都在这个相框之中。该div命名为：login‐content，具体是：<div class=“login‐content” id=“login‐content”>，程序清单3.6 login.jsp是登录区域的总体布局代码。

程序清单3.6 login.jsp登录区域总体布局代码。

<!‐‐ 登录区域 ‐‐>     <div class="login‐content" id="login‐content">         <div class="container">             <div class="row">                 <div class="col‐sm‐8 text">综合档案管理系统V1.0</div>                 <div class="col‐sm‐4">登录界面</div>             </div>         </div>     </div>

程序清单3.7 style.css中login‐content等的css。

/* 登录区主体页面css */ .login‐content {     padding: 150px 0 180px 0;     background: #19b9e7 } /* 登录区左边css */ .login‐content .text {     padding‐top: 120px;     color: #fff; }

程序清单3.7中，第4行设置整个登录区域的页面背景颜色，后面会讲到用图片来充填。

运行界面图如下：

这个界面比之前要好点，有了颜色，慢慢来，一步一步来。

3.4.2 登录区域左边

左边用了一个h1标签定义标题，还放了两个div标签，一个div放置了p标签，用于显示系统的简要说明，另一个div放置了按钮，用于导航。具体布局如程序清单3.8，显示了登录区域左边的布局。

程序清单3.8 login.jsp 登录区域左边布局。

<!‐‐ 登录区域 ‐‐>     <div class="login‐content" id="login‐content">         <div class="container">             <div class="row">                 <div class="col‐sm‐8 text">                     <!‐‐ 登录区域左边布局 ‐‐>                     <h1>                         <strong>荆楚理工学院</strong> 综合档案管理系统V1.0                     </h1>                     <div class="description">                         <p>综合档案管理信息系统依据《档案著录规则》、《文书档案案卷格式》和《归档文件整理规则》等档案法律法规 进行设计，                             采用开源框架SSM和响应式组件Bootstrap进行开发，                             实现了对档案进行收集、整理、移交、归档、统计和利用等全过程信息化管理。</p>                     </div>                     <div class="top‐big‐link">                         <a class="btn btn‐link" href="#">系统简介</a>                         <a class="btn btn‐link" href="#">档案法规</a>                         <a class="btn btn‐link" href="#">档案查询</a>                         <a class="btn btn‐link" href="#">系统帮助</a>                         <a class="btn btn‐link" href="#">关于我们</a>                     </div>                              </div>                 <div class="col‐sm‐4">登录界面</div>             </div>         </div>     </div>

程序清单3.8中所涉及的css，在 style.css中进行了定义，如程序清单3.9 。

程序清单3.9 style.css中登录左边区域的css。

/* 登录区左边css */ .login‐content .text {     padding‐top: 120px;     color: #fff; } .login‐content .text h1 {     color: #fff; } .login‐content .description {     margin: 20px 0 10px 0; } .login‐content .description p {     line‐height: 2em;  /* 行间距（应该是2倍行间距的意思） */     text‐indent: 2em; /* 首行缩进2个字 */     opacity: 0.8; } .login‐content .description a {     color: #fff; } .login‐content .description a:hover, .login‐content .description a:focus     {     border‐bottom: 1px dotted #fff; } .login‐content .top‐big‐link {     margin‐top: 35px; } .login‐content .btn‐link {     display: inline‐block;     height: 50px;     margin: 0 5px;     padding: 15px 20px 0 20px;     font‐size: 16px;     font‐weight: 300;     line‐height: 16px;     color: #fff;     ‐moz‐border‐radius: 4px;     ‐webkit‐border‐radius: 4px;     border‐radius: 4px; } .login‐content .btn‐link:hover, .btn‐link:focus, .login‐content .btn‐link:active,     .btn‐link:active:focus {     outline: 0;     opacity: 0.6;     background: rgba(0, 0, 0, 0.3);     color: #fff; }

运行：

左边弄的差不多了，再弄右边吧。

3.4.3 登录区域右边

右边是用户真正登录的地方，这个布局放了两个div，第一个div显示“用户登录”的提示；第二个div放置了表单form标签，form标签放了字体文件的css三个输入框，一个登录按钮，三个输入框分别为：输入用户名的输入框，输入密码的输入框，输入验证码的输入框，显示验证码的标签，具体布局如程序清单3.10。

程序清单3.10 login.jsp右边的布局。

<div class="col‐sm‐4">                         <div class="form‐top">                             <div class="form‐top‐center">                                 <h3>用户登录</h3>                             </div>                         </div>                         <div class="form‐bottom">                             <form method="post" id="loginform" class="registration‐form">                                 <input type="hidden" name="${_csrf.parameterName}"                                     value="${_csrf.token}" />                                 <div class="form‐group">                                     <i class="icon‐user icon_font"></i><input type="text"                                         class="login_input" id="username" name="username"                                         placeholder="请输入用户名..." required="required" autocomplete="off" />                                 </div>                                 <div class="form‐group">                                     <i class="icon‐lock icon_font"></i> <input type="password"                                         class="login_input" name="password" id="password"                                         placeholder="请输入密码..." required="required" autocomplete="on" />                                 </div>                                 <div class="form‐group">                                     <i class="icon‐key icon_font"></i> <input class="login_input c"                                         type="text" name="captcha" required="required"                                         placeholder="请输入验证码" /> <img id="captcha" alt="验证码"                                        src="${path }/captcha.jpg" data‐src="${path }/captcha.jpg?t="                                         style="vertical‐align:middle;border‐ radius:4px;width:94.5px;height:35px;cursor:pointer;">                                 </div>                                 <div class="form‐group">                                     <!‐‐ <button style="submit" class="login_btn" id="login">登 录</button> ‐‐>                                     <input type="button" class="login_btn" id="login" value="登  录">                                 </div>                             </form>                         </div>                     </div>

程序清单3.10中所涉及的css，在 style.css中进行了定义，如程序清单3.11 。

程序清单3.11 style.css中登录右边区域的css。

/* 右边登录界面css */ .form‐top {     overflow: hidden;     padding: 0 25px 15px 25px;     background: #fff;     ‐moz‐border‐radius: 4px 4px 0 0;     ‐webkit‐border‐radius: 4px 4px 0 0;     border‐radius: 4px 4px 0 0;     text‐align: left; } .form‐top‐left {     float: left;     width: 75%;     padding‐top: 25px; } .form‐top‐center {     /* float: right; */     text‐align: center;     width: 100%;     padding‐top: 25px; } .form‐top‐left h3 {     margin‐top: 0; } .form‐top‐center h3 {     margin‐top: 0; } .form‐top‐right {     float: left;     width: 25%;     padding‐top: 5px;     font‐size: 66px;     color: #ddd;     line‐height: 100px;     text‐align: right; } .form‐bottom {     padding: 5px 25px 30px 25px;     background: #fff;     ‐moz‐border‐radius: 0 0 4px 4px;     ‐webkit‐border‐radius: 0 0 4px 4px;     border‐radius: 0 0 4px 4px;     text‐align: left; } .form‐bottom form textarea {     height: 100px; } .form‐bottom form .input‐error {     border‐color: #19b9e7; } .login_btn {     display: block;     background: #1faad6;     color: #fff;     font‐size: 15px;     width: 100%;     line‐height: 50px;     border‐radius: 3px;     border: none; } .login_input {     width: 100%;     border: 1px solid #1faad6;     border‐radius: 3px;     height: 40px;     line‐height: 40px;     padding: 2px 5px 2px 30px;     background: none;     font‐size: 14px;        color: #;     background: white;     margin‐top: 20px;     ‐moz‐outline‐radius: 3px;     ‐webkit‐box‐shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);     box‐shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12); } .c {     width: 60%; } .icon_font {     position: absolute;     left: 50px;     margin‐top: 30px;     font‐size: 18px;     color: #1faad6; } .font16 {     font‐size: 18px;     margin‐top: ‐25px; } .login {     width: 400px;     height: 265px;     position: absolute;     background‐color: white;     top: 0;     left: 0;     bottom: 0;     right: 0;     margin: auto; } /* end：登录区域结束 */

运行：

终于有点样子了。

3.5 版权信息的设计与实现

版权信息比上面的布局要简单一点，程序清单3.12显示了布局的代码。

程序清单3.12 login.jsp版权信息。

<!‐‐ 版权信息 ‐‐>     <div class="footer">         <div class="container">             <div class="row">                 <p>                     <span>版权所有©2018</span> <span>荆楚理工学院</span>                 </p>                 <p>                     <span>荆楚理工学院计算机工程学院开发</span>                 </p>             </div>         </div>     </div>

程序清单3.12中所涉及的css，在 style.css中进行了定义，如程序清单3.13 。

程序清单3.13 style.css中版权信息的css。

/* 版权信息 */ .footer {   text‐align: center;   background: #fff;   color: #c1c1c1; } .footer p {     line‐height: 2em;  /* 2倍行间距 */     margin:10px 0px 0px 0px; }

运行：

有点小成就了，登录界面弄出来了。在不同的浏览器或不同大小的窗口测试一下。

在火狐和其实浏览器测试省略。

4.说明

（1）把中间登录区的颜色换成图片，或者轮播图

（2）文档还没有对代码