上一篇中，我们实现了登录功能，本篇主要关注点是不同用户登录后，根据用户角色不同（校长、教师、学生）进入到不同的页面。为了便于理解，猫哥贴下当前的项目结构图：
task2-1，首先要理解不同的页面，所谓不同的页面，是指校长或者教师或者学生登录进来，看到的菜单、功能、显示是有所不同的。但是对于程序设计者来说，有多重方式可以实现这种不同。
最容易理解的，就是根据登录角色的不同，跳转到不同的页面，然后根据角色对应的功能设计，不同页面显示不同的内容。好的，我们就先来实现这一点。
首先是校长这个角色，我们希望他登录成功后，进入一个后台界面，这个界面上方有我们的系统名称和登录用户的信息，左边有菜单可以选择对应的操作，右边是具体的文字、按钮等功能显示区域。那么我们应该简单的设计为：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>schoolmaster.jsp</title>
</head>
<body>
<div id="top">
</div>
<div id="left">
</div>
<div id="right">
</div>
</body>
</html>task2-2，参考猫哥的前文《猫哥带你去战斗——Java Web开发——网页篇[6]——布局 》，简单设计一下布局如下：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>schoolmaster.jsp</title>
<style type="text/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;
}
/*宽度占满它爹的宽度，高度64px是瞎试的，不好看再调整，猫哥喜欢用16px、32px、64px、128px这些，你懂的。
背景色猫哥继续取色器，文字颜色取色器，标题部分啊文字用微软雅黑，大气！
line-height表示文字占用的高度，它也是64那就是文字占用高度跟top区域高度是一样的嘛，所以文字就居中了*/
#top{
width:100%;
height:64px;
background-color:#000000;
color:#FFFFFF;
font-family:"微软雅黑";
line-height:64px;
font-size:36px;
}
/*宽度占200px差不多了吧
float表示漂浮，left的话就是靠左了，所以这个left区域就得靠左飘飘了
内部的东西跟边距有点距离好看点，暂时定为10px，上下左右都是哦*/
#left{
width:200px;
height:536px;/*猫哥认为600-64=536*/
float:left;
background-color:#EEEEEE;
padding:10px;
}
/*同理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;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
猫哥培训班作业管理系统
</div><!-- top部分是标题栏 -->
<div id="left">
这边是菜单
</div><!-- left部分是菜单栏 -->
<div id="right">
这边是内容
</div><!-- right部分是具体内容显示区 -->
</div>
</body>
</html>预览下界面，大体还可以，凑合着用吧。
task2-3，咱们再把左边菜单栏弄上。如下：
<div id="left">
<ul>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
<li>菜单1</li>
</ul>
</div><!-- left部分是菜单栏 -->对应css也调整下
/*调整id=left的div中的ul标签下的li标签的样式为上边距10px，左边距15px*/
#left ul li{
margin:10px 0px 0px 15px;
}好的，感觉自己棒棒哒，大体样子出来啦：
本篇到此为止，下一篇还得继续完善下，完善的内容还有：
1，顶部标题栏，分为左右两侧，左侧系统名称，右侧登录信息提示
2，左侧菜单栏菜单内容改为超级链接形式
3，研究左侧点击按钮后，右侧跳转到不同的内容这些还是属于schoolmaster.jsp内容，所以下一篇依然是task2-x。
点击查看更多内容
6人点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦