1. 背景
虽然功能基本都实现了，但是登陆界面太丑了，直接拉低了我们系统的整体档次。
虽然我不是前端、不是UI设计师、不是美工，但是我有一颗执着的心，相信我的CSS技术和高雅的审美观。于是我决定设计下登录页的美工效果。
2. 本章任务
下面的截图是猫哥花了半个小时设计的登录页（PS，千万别说太粉嫩，只是因为培训班要爱护祖国的花朵）。
本章就来实现下上面的效果。
3. 整体思路
首先确定下前提：没有美工，只能靠自己单干，而此处的自己一般是程序开发人员，缺乏美感！
缺乏美感怎么办，找啊。不会创造，欣赏总会把，所以根据整个系统的主题色（后台页面是黑红），然后根据系统应用群体（主要是学生），猫哥确定了登录页以淡红、嫩绿为主，最好是可爱的。
然后就去找图呗，当然高手可以P图，可惜猫哥PS是CET-1级（注意不是1级，是-1级）。
前面截图中有且只有一张图片，就是猫哥从互联网上找的，注意猫哥没有用于商业用途，只是演示用哈。
然后注意到没有，网页中文字、按钮好像跟图片挺搭的。哈哈那是必须的，文字、按钮的颜色都是猫哥直接从图片中取色的，能不搭吗，还是那句话，如果你不会设计，你可以欣赏。
最后，确定了上、中、下布局。上、下部分非常简单，中间也很简单哈，就是一张图片，然后图片中间放了一个div，div里面放上用户编号、密码输入框加一个按钮。
稍微调整下内外边距及字体大小，就完事了。
3. 具体实现
第一步，是设计整体的感觉，因为是培训班作业管理系统嘛，培训班面对的都是些小学生，最喜欢TFBoys啊这种小帅哥、还有snh48啊这种小美女，青春年少、才华横溢。猫哥能想到的主色调就是粉红+嫩绿。春天的感觉，棒棒哒。
第二步，有了整体的感觉之后，带着这种朦胧的感觉，去寻找一幅登录页的背景图。猫哥一般习惯于使用搜索引擎搜索一幅淡雅的图片，注意因为是背景图，猫哥建议是有很多地方是空白的，且颜色较淡。猫哥大约找了几分钟，找到一幅自己颇为满意的图片如下：
第三步，结合图片可以有个大约的设计，注意到整个图片上边有大片空白，所以上边可以设置一个标题栏。图片正中心偏上也有一片空白，可以放置用户名输入框、密码输入框和登录按钮，最后图片的下方可以放置版权说明，这样设计出来的网页应该是还不错的。
第四步，说干就干，将body部分分为三个区域：
<body> <div id="top"> 培训班作业管理系统登录 </div> <div id="mid"> 此处放置编号、密码输入框和登录按钮 </div> <div id="bottom"> Copyright:PandaBrother 2017.2.22 </div> </body>
第五步，设置整个网页区域默认样式，以及top、mid、bottom区域的宽度、高度等基本样式，具体为何这样设置，注释有详细描述。
/*应用于全部内容的格式*/ *{ margin:0px; padding:0px; font-size:12px; font-family:"宋体"; width:auto; } /*设定顶部样式*/ #top{ height:70px;/*一般顶部标题栏的高度差不多70px*/ line-height:70px;/*保证标题栏文字居中显示（从上往下方向）*/ font-family:"微软雅黑";/*标题栏使用微软雅黑，高端大气上档次*/ font-size:32px;/*标题栏字体要大*/ color:#DE7D74;/*这个颜色注意了，是图片中较深的粉红色*/ border-bottom: medium solid #B0B2B6;/*顶部下方设置了一个边框，用以分割顶部和中间内容区域*/ padding-left:16px;/*顶部左侧内边距16px，避免文字太靠左边*/ font-weight:600;/*文字加粗，具体多少好看慢慢调节*/ } #mid{ height:500px;/*电脑高度一般600px、768px或者更多，去掉70px顶部和很少的底部，留个500px算合理*/ text-aligh:center;/*内容在中间显示*/ background-image:url(../images/back.jpg);/*把背景图片设置进来*/ background-size: 100% 100%;/*背景图片铺满整个区域，这样好看*/ } /*底部，很简单，没啥好说的*/ #bottom{ margin-top:16px; text-align:center; }
最后，在mid区域的中间空白区域，放置一个居中的div，里面放上编号、密码输入框和登录按钮即可，注意登录按钮的颜色是选取的图片中较淡的粉红色：
<div id="mid"> <div id="login_input"> <form id="mainForm" method="post" action="/HomeworkSystem/LoginServlet"> <div class="row"> <span>用户：</span><input type="text" name="userName" /> </div> <div class="row"> <span>密码：</span><input type="password" name="userPassword" /> </div> <div class="row"> <input class="submit" type="submit" value="登录" /> </div> </form> </div> </div>
#login_input{ border:thin solid #FFEFD6; width:400px; height:240px; margin:32px auto; text-align:center; } .row{ width:100%; margin:32px auto; } .row span{ width:60px; } .row input{ width:120px; } .row .submit{ border-radius:8px; background-color: #FFE5D5; }
4. 源码
最后是源码，非常简单（比猫哥之前介绍CSS部分文章使用的原理还要少），如果同学还是看不懂也不要紧，下篇会讲述到底怎么来的：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>login.jsp</title> <link href="css/login.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="top">培训班作业管理系统登录</div> <div id="mid"> <div id="login_input"> <form id="mainForm" method="post" action="/HomeworkSystem/LoginServlet"> <div class="row"> <span>用户：</span><input type="text" name="userName" /> </div> <div class="row"> <span>密码：</span><input type="password" name="userPassword" /> </div> <div class="row"> <input class="submit" type="submit" value="登录" /> </div> </form> </div> </div> <div id="bottom">Copyright:PandaBrother 2017.2.22</div> </body> </html>
/*login.css*/ /*应用于全部内容的格式*/ *{ margin:0px; padding:0px; font-size:12px; font-family:"宋体"; width:auto; } /*设定顶部样式*/ #top{ height:70px; line-height:70px; font-family:"微软雅黑"; font-size:32px; color:#DE7D74; border-bottom: medium solid #B0B2B6; padding-left:16px; font-weight:600; } #mid{ height:500px; text-aligh:center; background-image:url(../images/back.jpg); background-size: 100% 100%; } #login_input{ border:thin solid #FFEFD6; width:400px; height:240px; margin:32px auto; text-align:center; } .row{ width:100%; margin:32px auto; } .row span{ width:60px; } .row input{ width:120px; } .row .submit{ border-radius:8px; background-color: #FFE5D5; } #bottom{ margin-top:16px; text-align:center; }
