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>
<!-- 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. 最終效果
最後我們的背景管理頁面效果如下，我感覺還是不錯的，大功告成哈哈。