为了账号安全,请及时绑定邮箱和手机立即绑定

JSP+Servlet培训班作业管理系统[24] -番外篇之登录页美工实现过程

标签:
Java Html/CSS

正式开始登录页的实现过程。

第一步,是设计整体的感觉,因为是培训班作业管理系统嘛,培训班面对的都是些小学生,最喜欢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/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>
 #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;
    }
点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
软件工程师
手记
粉丝
1.5万
获赞与收藏
1523

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消