首页手记 JSP+Servlet培训班作业管理系统[23]...

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

标签：

Java Html/CSS

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

点击查看更多内容