JSP+Servlet培训班作业管理系统[15]–后台管理页面右侧内容区域美化

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

本文目录

1. 本章任务
2. 内容区域添加当前页面名称显示
3. 内容区域固定高度
4. 添加底部操作栏
5. 美化表格部分
6. 其他页面改动
7. 效果

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>

然后通过content.css文件添加对content_top部分的样式描述。

/*一定需要注意，该页面因为和index.jsp有嵌套关系，
        所以通过id选取元素时，id千万别和index.jsp中重名了
 	其余部分之前都讲过了，不再详述*/
#content_top {
	height: 30px;
	font-family: "微软雅黑";
	font-size: 16px;
	border-bottom: 1px solid #D4D5D7;
}

可见就是让顶部字体增大，固定高度，同时在顶部和下面直接添加边框隔开。

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>

然后设置内容区域的样式，固定高度，同时加大与上面顶部栏的距离。

#content_mid {
	height: 400px;
	margin-top: 5px;
}

4. 添加底部操作栏

将底部新增按钮使用div包围起来，然后设置操作栏样式：

  <div id="content_bottom">
		<a href="/HomeworkSystem/RouteServlet?childPage=userAdd.jsp">新增</a>
	</div>

#content_bottom {
	background-color: #D4D5D7;
	margin: 5px auto;
	width: 240px;
	height: 20px;
	line-height: 20px;
	text-align: center;
}

5. 美化表格部分

表格部分可以直接从网上搜一些css样式使用即可，这里随便搜了一个，大家也可以直接拿来使用。

	<table class="table_theme1">
  <table>


/* 以下为表格美工*/
.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;
}