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

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;
   }

5. 最终效果

最后我们的后台管理页面效果如下,我感觉还是不错的,大功告成哈哈。
在这里插入图片描述


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页