为了忘却的纪念，于是乎就把登录界面设计和实现的过程记录下来。
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，具体语句如下：
<link rel="stylesheet" href="${staticPath }/static/css/login/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: #404040;
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）文档还没有对代码
扫一扫
2537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
