JSP+Servlet培训班作业管理系统[20] -番外篇之登录页美工设计

来源：互联网发布：php post 数据并跳转编辑：程序博客网时间：2024/04/28 15:41

下面的截图是猫哥花了半个小时设计的登录页（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;    }

0 0