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;
}
5. 总结
猫哥有着一颗爱美的心!