JSP+Servlet培训班作业管理系统[2]--后台管理页面外观实现

本文主要是介绍JSP+Servlet培训班作业管理系统[2]--后台管理页面外观实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

点此查看本系列文章目录、源代码、配套视频教程

本文目录

1. 背景
2. 后台管理页面整体布局
3. 设计页面大框架
4. 完善样式部分
- 4.1 全局样式
- 4.2 顶部标题栏样式
- 4.3 左侧菜单栏样式
- 4.4 右侧内容区域样式
5. 最终效果

1. 背景

上一篇中，我们实现了登录功能，本篇来实现登录后要显示的后台管理页面。

2. 后台管理页面整体布局

首先顶部是标题栏，这是国际惯例了。

左侧是导航菜单，不同角色登录进来加载的菜单不同。

右侧是点击菜单后对应的页面内容。大体上应该像下面的样子：
在这里插入图片描述

3. 设计页面大框架

根据我们的分析，需要设计页面的顶部、左侧、右侧，所以新建后台管理页面index.jsp并编码如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!-- 使用c:标签需要添加本行代码 -->
<html>
<head>
<title>index.jsp</title>
<!-- index.css是外部样式文件 -->
<link href="css/index.css" type="text/css" rel="stylesheet" />
</head>
<body><div id="main"><div id="top"><!-- 标题部分 --><div id="top_title">猫哥培训班作业管理系统</div><!-- 登录用户信息部分 --><div id="top_info">欢迎您，尊敬的XXX</div></div><!-- left部分是菜单栏 --><div id="left"><ul><li>菜单1</li><li>菜单2</li><li>菜单3</li></ul></div><!-- right部分是具体内容显示区 --><div id="right">内容部分</div></div>
</body>
</html>

此时，各个区域的内容都能显示在网页中了，效果如下：
在这里插入图片描述

4. 完善样式部分

我们还需要根据设计，让标题栏处于顶部，菜单栏处于左侧，内容部分处于右侧。

此时只需要在index.css中编辑对应样式即可。

4.1 全局样式

为了让整个页面统一风格，我们设计全局样式如下。

	/*css/index.css*//*星号表示选择全部，设置外边距0，内边距0，字体大小12px，宋体*/*{margin:0px;padding:0px;font-size:12px;font-family:"宋体";}/*整个body区域背景色为#F5F5F5，这个很简单，自己下载个取色器，找个漂亮的网页，取个颜色就行*/body {background-color: #FCFCFC;}/*在top、left、right外面套用一层main是为了控制宽度，并且整体居中*/#main{width:1000px;margin:0px auto;}

4.2 顶部标题栏样式

顶部标题栏包括标题和用户信息两部分，左侧标题，右侧用户信息。并且应该占据一定的高度，最后还需要有点背景色。所以css编辑如下：

   /*宽度占满它爹的宽度，高度64px是瞎试的，不好看再调整，猫哥喜欢用16px、32px、64px、128px这些，你懂的。背景色猫哥继续取色器line-height表示文字占用的高度，它也是64那就是文字占用高度跟top区域高度是一样的嘛，所以文字就居中了*/#top{width:100%;height:64px;background-color:#000000;line-height:64px;  	}/*文字颜色取色器，标题部分啊文字用微软雅黑，大气！*/#top_title{line-height:64px;font-family:"微软雅黑";color:#FFFFFF;float:left;font-size:32px;margin-left:16px;}/*颜色依然是自己取色的*/#top_info{color:#71777D;float:right;line-height:64px;font-size:16px;margin-right:16px;}

4.3 左侧菜单栏样式

左侧菜单栏需要放在左侧，且设计背景色区分区域。

    /*宽度占200px差不多了吧float表示漂浮，left的话就是靠左了，所以这个left区域就得靠左飘飘了内部的东西跟边距有点距离好看点，暂时定为10px，上下左右都是哦*/#left{width:200px;height:536px;/*猫哥认为600-64=536*/float:left;background-color:#EEEEEE;padding:10px;}/*调整id=left的div中的ul标签下的li标签的样式为上边距10px，左边距15px*/#left ul li{margin:10px 0px 0px 15px;}/*注意逗号表示同时设置两组对象的CSS属性a:link表示未访问的链接,a:visited表示已访问的链接，颜色凭爱好了*/#left a:link, #left a:visited {color: #333333;text-decoration:none;/*不要下划线*/}/*a:hover表示鼠标悬停的链接,a:active表示被选择的链接*/#left a:hover, #left a:active {color: #0AA770;text-decoration:none;}

4.4 右侧内容区域样式

右侧比较简单，靠右布局，设计下宽度和高度、背景色即可。

   /*同理right向右飘*/#right{width:760px;/*1000-200-10*4=760,此处一定要注意padding的内容会拓宽div整体宽度，有志于前端的可以专门去研究下*/min-width:600px;height:536px;/*猫哥认为600-64=536*/float:right;background-color:#FFFFFF;padding:10px;}