下面的截图是猫哥花了半个小时设计的登录页(PS,千万别说太粉嫩,只是因为培训班要爱护祖国的花朵)。
本篇简单的说下设计方法并贴下源代码,然后下一篇将详细的讲述具体设计和实现的想法和步骤。
1,首先确定下前提:没有美工,只能靠自己单干,而此处的自己一般是程序开发人员,缺乏美感!
2,缺乏美感怎么办,找啊。不会创造,欣赏总会把,所以根据整个系统的主题色(后台页面是黑红),然后根据系统应用群体(主要是学生),猫哥确定了登录页以淡红、嫩绿为主,最好是可爱的。
3,然后就去找图呗,当然高手可以P图,可惜猫哥PS是CET-1级(注意不是1级,是-1级)。
4,前面截图中有且只有一张图片,就是猫哥从互联网上找的,注意猫哥没有用于商业用途,只是演示用哈。
5,然后注意到没有,网页中文字、按钮好像跟图片挺搭的。哈哈那是必须的,文字、按钮的颜色都是猫哥直接从图片中取色的,能不搭吗,还是那句话,如果你不会设计,你可以欣赏。
6,最后,确定了上、中、下布局。上、下部分非常简单,中间也很简单哈,就是一张图片,然后图片中间放了一个div,div里面放上用户编号、密码输入框加一个按钮。
7,稍微调整下内外边距及字体大小,就完事了。
最后是源码,非常简单(比猫哥之前介绍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/ActionServlet?method=login&entityType=User">
<div class="row">
<span>编号:</span><input type="text" name="userId" />
</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人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦