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作用域中取得学生对象的listList<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框架实现好看的页面,提高学习的兴趣,详见下一篇文章讲解。
Java Web实战详细教程(十一)贯穿项目搭建+CSS修饰前端页面相关推荐
- 支持增删查改的简单Java Web通讯录详细教程【基于Mac OS+IDEA+Servlet+JDBC+Tomcat】
本文将以Web版通讯录的形式介绍一个支持简单增删查改的Java Web项目,软硬件环境基于Macbook Air M2+macOS Ventura 13.1+IntelliJ IDEA 2022,技术 ...
- 《Java Web程序设计任务教程》简要复盘:第二章 JavaWeb概述
<Java Web程序设计任务教程>简要复盘:第二章 JavaWeb概述 第二章:Java Web概述 XML基础 XML概述 XML语法 HTTP协议 1.HTTP概述 HTTP介绍 W ...
- 基于java web和echarts的数据可视化项目
EchartDemo 项目介绍 基于java web和echarts的数据可视化项目 主要分析浙江省各市区的gdp和固定资产投资.以及房产数据,数据源浙江省经济社会发展统计,数据经过整理后插入数据库中 ...
- 《Java Web程序设计基础教程》简介
本书是关于Java Web开发的基础教程,共分15章.第1章介绍如何构建Java Web应用:第2.3章介绍如何解决Java Web应用的输入和输出问题:第4-6章对登录功能进行了3次重构,这也是Ja ...
- 【kratos入门实战教程】1-kratos项目搭建和开发环境配置
1.系列目录 [kratos入门实战教程]0-商城项目介绍 [kratos入门实战教程]1-kratos项目搭建和开发环境配置 [kratos入门实战教程]2-实现注册登陆业务 2.概览 经过上一篇的 ...
- Java Web开发技术教程入门-初识动态网页
这段时间学校搞了一个"阅战阅勇"的阅读活动,奖品还是挺丰富的~于是,奔着这些奖品,我去图书馆借了这本<Java Web开发技术教程>.一是为了那些丰富的奖品,二是为了回 ...
- java二维码编码生成并转换成流传入前端页面
java二维码编码生成并转换成流传入前端页面 这里主要用了com.google.zxing的依赖,这个依赖主要可以完成图片叠加.二维码生成和图片加文字等功能. ①添加依赖 <dependency ...
- Java Web实战开发 | Web项目的创建与运行
01Web项目的创建与运行 1●创建项目 在完成了IDE.Tomcat服务器以及数据库的安装后,Java Web项目开发集成环境已经准备就绪,可以进行Java Web应用系统的开发.下面通过例1-1讲 ...
- SSM框架实战详细教程(三)IDEA+Maven搭建项目
本章内容将搭建Maven,并且与IDEA关联,然后将上一篇中使用Eclipse中开发的普通Java Web项目改造成IDEA+Maven形式. 搭建Maven,并且与IDEA关联请查看 ...
最新文章
- 如何去除小数点后面多余的0_704密封胶如何使用?怎么样去除多余的704密封胶?...
- 【Linux】一步一步学Linux——objdump命令(254)
- RabbitMQ 声明Queue时的参数们的Power
- 如何使用digiKam进行照片管理
- GIT基本概念和用法总结
- 4--RESTful应用程序
- 【贪心】hdu5969 最大的位或
- Python开发过程中错误解决记录【持续更新记录,欢迎交流】
- nanovna使用说明_白色NanoVNA 矢量网络分析仪天线短波 MF HF VHF便携式频谱分析仪...
- 如何开通支付宝小程序助手?
- QQ2009SP5和SP6后台会疯狂的访问qqlogo.qq.com:80
- mysql semi join详解_MySQL中的semi-join
- selenium处理iframe标签
- chatbot学习汇总
- 数据分析金庸武侠经典人物,我们喜欢江湖中的这群人
- 移动端图文直播技术方案的分析
- 编写函数,输入一个自然数n,如果n为奇数,输出表达式1+1/3+…+1/n的值;如果n为偶数,输出表达式1/2+1/4+…+1/n的值;输出表达式结果保留2位小数。
- 【解决方案】HIKSDK/大华SDK/Ehome协议视频智能分析平台EasyCVR在文物古建筑智慧防火场景的应用
- Go中的uil 指的是什么
- 厦门集美大学的计算机专业,2017集美大学各专业录取分数线
热门文章
- 「医次元」「心际舰队」:论传销洗脑与纳粹之关联
- 校招和社招有什么区别?不同时期重点不同!
- Vivado HLS常用优化命令介绍
- 【数据压缩】作业1-1:对浊音、清音、爆破音进行音频分析
- 北京计算机游戏专业排名2015,2015大学专业排行榜_大学最佳专业排行榜_游戏专业怎么样_52PK游戏网...
- VM虚拟机ssh免密登录其他主机
- 【ps功能精通】1.简单了解PS
- (附源码)计算机毕业设计SSM快递代收系统
- 常用的IDEA插件,个个都是精品
- ubuntu如何安装java jdk,Ubuntu下安装JDK图文详解