您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Java Web实战详细教程(十一)贯穿项目搭建+CSS修饰前端页面

        在上一篇文章中,我们使用了MVC架构完成了一个学生数据的信息开发,我们可以作为本系列的一个贯穿案例,进行后续的增删改查及关联关系的功能开发,以及涉及到Web前端技术、JSTL、监听器、过滤器等技术的学习。
        为了更好的切入贯穿项目,我们新建一个stuWeb项目,并将上一节完成的MVC练习代码文件,复制构建一个新的项目。项目结构图如下所示:
在这里插入图片描述
        当前页面效果如下图所示,可见非常简陋。表格的边框,我们是使用了HTML提供的修饰属性border实现的。在前端技术蓬勃发展的90年代,为了实现结构和修饰的解耦,出现了CSS技术。规范的开发要求由HTML做结构,由CSS做修饰。

在这里插入图片描述
        也就是说,HTML中使用border属性进行修饰的方法是不规范的,我们应该使用CSS进行修饰。了解CSS的读者应该知道,通过CSS可以构建样式极其复杂的页面,以我们当前的表格为例,我们可以通过CSS进行如下修饰:
代码如下:

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page import="java.util.*"%>
<%@ page import="entity.*"%>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>学生管理</title>
<style>
#main {
	width: 600px;
	margin: 20px auto;
}

#data {
	width: 100%;
	border: 1px solid #666;
	/*边折叠效果*/
	border-collapse: collapse;
}

#data th, #data td {
	text-align: center;
	border: 1px solid #666;
}
</style>
</head>
<body>
	<div id="main">
		<table id="data">
			<tr>
				<th>ID</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<%
				//从request作用域中取得学生对象的list
				List<Student> list = (List<Student>) request.getAttribute("list");
				for (Student stu : list) {
			%>
			<tr>
				<td><%=stu.getId()%></td>
				<td><%=stu.getName()%></td>
				<td><%=stu.getGender()%></td>
				<td><%=stu.getAge()%></td>
			</tr>
			<%
				}
			%>
		</table>
	</div>
</body>
</html>

        效果如下图所示:
在这里插入图片描述
        通过效果图可以看到,通过CSS修饰,可以让表格变的好看起来。但是我们必须要承认,这个表格还是十分简陋,缺乏色彩点缀,实际就是不好看。
        我们可以思考一下如何让表格修饰的好看?那就牵扯着大小、间距、字体、字体大小、字体颜色、背景色、色彩的搭配等等知识。而以上知识体系并不是一个程序员的知识范畴之内,而是UI设计师范畴之内。因为好的UI设计师是需要美术功底的。
        在正规的公司开发分工上,会有UI设计师进行页面的设计工作,做出效果图,然后由前端工程师进行HTML、CSS的实现。而我们学习阶段没有这方面的资源,那是不是就要使用这种丑陋的页面继续下去呢?
        其实也大可不必,我们可以使用开源免费的CSS框架实现好看的页面,提高学习的兴趣,详见下一篇文章讲解。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进