1. 本章任务
之前虽然已实现人员的增删改查全面管理功能，但是右侧内容区域实在是有点难看。
虽然本教程并不注重美观方面，但是也不代表着妥协。
故特意拿出一章来对其进行美化。
2. 内容区域添加当前页面名称显示
首先在右侧内容区域的顶部，显示当前页面名称，同时该页面名称要比较清晰明显。
此处先以userManager.jsp为例，添加顶部栏。
<html>
<head>
<title>userManage.jsp</title>
<link href="css/content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="content_top">人员管理</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>角色</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<c:forEach items="${users}" var="item">
<tr>
<td>${item.userId}</td>
<td>${item.userName}</td>
<td>${item.userRole}</td>
<td><a
href="/HomeworkSystem/RouteServlet?childPage=userEdit.jsp&userId=${item.userId}">编辑</a></td>
<td><a
href="/HomeworkSystem/UserServlet?method=userDelete&userId=${item.userId}">删除</a></td>
</tr>
</c:forEach>
</table>
<a href="/HomeworkSystem/RouteServlet?childPage=userAdd.jsp">新增</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
然后通过content.css文件添加对content_top部分的样式描述。
/*一定需要注意，该页面因为和index.jsp有嵌套关系，
所以通过id选取元素时，id千万别和index.jsp中重名了
其余部分之前都讲过了，不再详述*/
#content_top {
height: 30px;
font-family: "微软雅黑";
font-size: 16px;
border-bottom: 1px solid #D4D5D7;
}
1
2
3
4
5
6
7
8
9
可见就是让顶部字体增大，固定高度，同时在顶部和下面直接添加边框隔开。
3. 内容区域固定高度
将表格整体放入内容区域
<div id="content_top">人员管理</div>
<div id="content_mid">
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>角色</th>
<th>操作</th>
<th>操作</th>
</tr>
</thead>
<c:forEach items="${users}" var="item">
<tr>
<td>${item.userId}</td>
<td>${item.userName}</td>
<td>${item.userRole}</td>
<td><a
href="/HomeworkSystem/RouteServlet?childPage=userEdit.jsp&userId=${item.userId}">编辑</a></td>
<td><a
href="/HomeworkSystem/UserServlet?method=userDelete&userId=${item.userId}">删除</a></td>
</tr>
</c:forEach>
</table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
然后设置内容区域的样式，固定高度，同时加大与上面顶部栏的距离。
#content_mid {
height: 400px;
margin-top: 5px;
}
1
2
3
4
4. 添加底部操作栏
将底部新增按钮使用div包围起来，然后设置操作栏样式：
<div id="content_bottom">
<a href="/HomeworkSystem/RouteServlet?childPage=userAdd.jsp">新增</a>
</div>
1
2
3
#content_bottom {
background-color: #D4D5D7;
margin: 5px auto;
width: 240px;
height: 20px;
line-height: 20px;
text-align: center;
}
1
2
3
4
5
6
7
8
5. 美化表格部分
表格部分可以直接从网上搜一些css样式使用即可，这里随便搜了一个，大家也可以直接拿来使用。
<table class="table_theme1">
<table>
1
2
/* 以下为表格美工*/
.table_theme1 thead, .table_theme1 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(230, 189, 189);
}
.table_theme1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(230, 189, 189);
}
/* Padding and font style */
.table_theme1 td, .table_theme1 th {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
color: rgb(177, 106, 104);
}
/* Alternating background colors */
.table_theme1 tr:nth-child(even) {
background: rgb(238, 211, 210)
}
.table_theme1 tr:nth-child(odd) {
background: #FFF
}
/*注意逗号表示同时设置两组对象的CSS属性
a:link表示未访问的链接,a:visited表示已访问的链接，颜色凭爱好了*/
.table_theme1 tr td a:link, .table_theme1 tr td a:visited {
color: #0000EE;
text-decoration: none; /*不要下划线*/
}
/*a:hover表示鼠标悬停的链接,a:active表示被选择的链接*/
.table_theme1 tr td a:hover, .table_theme1 tr td a:active {
color: #59A827;
text-decoration: none;
}
6. 其他页面改动
其他页面也都通过顶部content_top，中间content_mid，下边content_bottom修饰即可。
7. 效果
效果如下，很明显大气了许多，大功告成！
