整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
1、常规的Web页面实现方法
早期的Web应用系统开发中的Web页面内的信息定位和Web页面布局一般是采用HTML表格<table>标签实现的，但由于HTML标签本身是将数据和显示风格混合在一起的——请见下面的表格标签示例：
<table><tr><td>表格中的某个单元格需要显示的数据</td></tr></table>
当每个用户请求访问后台服务器时，服务器端程序都必须要将整个页面文件的全部显示格式控制的HTML标签内容向客户端的Web浏览器发出。如下示图为传统的页面设计中利用表格定位和布局页面内容的设计效果的示例图
这种利用<table>标签实现Web页面信息定位和布局的页面设计方法不便于Web页面的维护修改和功能扩展，基于MVC的系统架构模式的基本思想要求将页面中的数据和显示风格两者相互分离——也就是MVC体系架构设计模式中所倡导的表示和模型相互分离的设计原则。
2、J2EE Web 表示层组件JSP
JSP（Java Server Pages）是由Sun Microsystem公司（现在改为Oracle公司）于1999年6月推出的动态网站实现技术，并且是基于Java Servlet以及整个Java技术体系的Web开发技术。
而且JSP技术具有简便和高性能、服务器无关性和可重用性等技术实现方面的特点。但JSP技术在应用方面也暴露出一些不足之处：Web页面开发实现的人员职责不清晰、HTML标签与JSP脚本程序混合在一起而导致Web页面不便于维护升级和功能扩展，因为Web页面的内容（"数据"）和表现（"HTML标签"）耦合在一起。
如下示图为某个JSP页面示例，在该JSP页面中包含有服务器端的Java程序脚本代码、JSP标签和HTML标签，整个JSP页面内容显得比较"凌乱"，可读性比较低。
正是由于JSP技术本身存在有这些方面的问题，能否将面向对象Java编程技术中所倡导的"封装"、"隔离"等OOP设计思想应用于JSP Web页面的应用开发中？目前在J2EE应用开发平台中出现了许多完善、甚至代替JSP作为表示层的新技术。
3、采用"CSS+Div"分离J2EE Web表示层组件中的数据和表现
（1）"CSS+Div"中的CSS是页面层叠样式表技术
CSS（Cascading Style Sheet）是Web页面层叠样式表技术，利用CSS中的各种规则定义可以统一规范Web应用系统中的整体网页的格式，而不再需要分别给每个Web页面中的目标标签单独进行显示风格的属性设置。从而大大地减少了对Web页面显示风格的重复编辑、也提高了Web页面功能的可扩展性
（2）"CSS+Div"中的Div代表<div>标签
Div其实也就是HTML超文本标签语言中的<div>标签，<div>标签主要用于构建Web页面中区域的定义——简单地说，也就是它能够将Web页面划分为不同的功能区块。每个功能区块的显示风格和其中的数据本身是相互分离的。
（3）采用"CSS+Div"分离Web表示层页面中的数据处理逻辑和表现逻辑
由于CSS主要是实现Web页面中的数据显示风格，而利用<div>标签可以包装和定位其中的数据。因此，"CSS+Div"相互组合在一起就能够分离Web表示层页面文件中的数据处理逻辑和表现逻辑。
Web应用系统的表示层开发人员首先应用<div>标签构建好每个功能区块，之后再用CSS样式单给各个<div>标签统一配置相应的显示风格——<div>标签不仅能够定位页面中的文字内容，也能够包装图片（图片以背景的形式出现）或者其它形式的标签。
<div>标签代表要显示的Web页面数据的一个容器，而CSS层叠样式表技术则能够控制这个容器的各种显示元素——比如高度和宽度、边框的颜色、背景颜色以及其中的文字大小、文字颜色等等这些显示信息。
"CSS+Div"是目前比较流行的Web页面版面布局方式，能够分离Web表示层页面中的数据处理逻辑和表现逻辑、并且还能够减少Web页面中HTML标签的数量、减少网络数据的传送量；也更便于Web页面的维护修改和功能扩展；而且还可以为同一个Web页面或者一组Web页面统一定义一个CSS层叠样式表文件或者为不同的功能区块定义不同的CSS层叠样式表文件，并且可以动态切换和应用不同的CSS层叠样式表文件而产生出Web页面"换皮肤"的应用效果。
4、为什么要应用"CSS+Div"构建Web应用系统表示层组件
（1）减少Web页面中的重复HTML标签和提高Web页面的响应性能
由于采用CSS层叠样式表技术能够全局定义各个不同Web页面的显示风格，从而避免了在每个Web页面中都内嵌有这些显示风格的控制标签，这样的Web页面设计方法能够大大地减少Web页面中的重复标签的数量和提高Web页面的响应性能。
另外，CSS层叠样式表技术的兼容性也比较高——目前各个不同厂商的浏览器也都支持CSS层叠样式表技术。一个采用"CSS+Div"技术实现的Web页面布局可以在不同的Web浏览器、不同的网络设备上都能够正常地显示。因此，它也方便了基于"CSS+Div"构建的Web应用系统的可扩展性和可移植性——Web页面中需要显示的数据及其它形式的内容与显示设备无关。
（2）分离Web页面的表现逻辑与数据结构定义
在实际企业应用系统的Web页面开发中，一般再配合采用JavaScript脚本语言进行行为控制——也就是采用"CSS+Div+JavaScript"三种技术相互结合进行Web页面开发，其中的CSS层叠样式表技术实现Web页面风格的显示、Div（<div>标签）则实现其中数据的包装和定位、而JavaScript脚本程序代码则实现与用户相互交互的事件等行为的控制。
因此，采用"CSS+Div+JavaScript"三种技术相互配合进行Web页面开发，基本上能够达到模型视图控制器（MVC）体系架构设计模式所倡导的"结构"、"表现"、"行为"三者相互分离的效果。
如果应用该技术，首先，将能够使得Web页面中的各个部分的耦合性更小、更易于维护和扩展。比如，如果希望调整Web页面的显示风格，设计和开发实现人员只需要改变相关的CSS层叠样式表文件中有关的样式表定义，而Web页面文件本身并不需要被动地修改；其次，Web页面的结构清晰，设计和开发实现相关的人员分工也非常明确。
5、在银行账户信息管理系统页面开发中应用CSS+Div+JavaScript技术
在示例项目银行账户信息管理系统Web页面开发中，作者应用了"CSS+Div+JavaScript"三种技术，不仅减少了每个Web页面中的标签总量，也将Web页面中的格式、内容和行为三者相互分离。
另外，在银行账户信息管理系统中还应用了Tiles模板技术将整个Web页面分为不同的版块（Tiles），而每个版块中的Web页面文件又采用"CSS+Div+JavaScript"技术实现，最终使得整个Web应用系统中的每个Web页面内的HTML标签数量都比较少，而且可重用度也都比较高。
下面的代码示例中的Web页面内容为示例项目银行账户信息管理系统中版权信息页面内容的示例，其中的JavaScript脚本程序实现Web页面内容的防拷贝控制、而Web页面的显示风格定义由style.css样式表文件定义——请见黑体标识的部分代码——应用CSS+Div+JavaScript技术实现版权信息页面内容的示例
<%@ page contentType="text/html; charset=gb2312" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href='<c:url value="/css/style.css" />' type=text/css rel=stylesheet />
<title>蓝梦网上银行系统版权信息显示页</title>
</head>
<body>
<script type="text/javascript">
document.body.oncopy = function (){
setTimeout( function () {
var text = clipboardData.getData("text");
if (text) {
text = text + "\r\n所复制的内容来源于"蓝梦网上银行系统"
www.webbank.com ，原文的链接为："+location.href;
clipboardData.setData("text", text);
}}, 100 )
}
</script>
<div id="globalMenuBar">
<a href='<c:url value="/pageForwordAction.action?action=forwardIndex" />'
class="hrefstyle">返回首页</a> -
<a href="#" class="hrefstyle">关于本站</a> -
<a href="#" class="hrefstyle">网站帮助</a> -
<a href="#" class="hrefstyle">网站声明</a> -
<a href="#" class="hrefstyle">服务网点</a> -
<a href="#" class="hrefstyle">服务热线</a> -
<a href="#" class="hrefstyle">广告合作</a> -
<a href="#" class="hrefstyle">下载声明</a> -
<a href="#" class="hrefstyle">友情连接</a> -
<a href="#" class="hrefstyle">网站地图</a> -
<a href="#" class="hrefstyle">联系我们</a>
</div>
</body>
</html>为了减少本书的篇幅，在上面的代码示例中省略了各个超链接中的目标URL地址的显示。该页面在Macromedia Dreamweaver工具软件中的预览效果请见下图示例图所示。
6、应用支持"CSS+Div"的可视化软件工具提高页面开发的效率
（1）CSS Tab Designer是一款使用CSS设计导航菜单的可视化软件
由于在"CSS Tab Designer"可视化软件中内置有高达60多种不同风格的样式，Web页面开发人员只需修改现成样式的模版文件，就能快速地生成满足自己的Web应用系统需要的CSS菜单。如下示图为"CSS Tab Designer"官方网站对该软件的功能特性的介绍文字的局部截图，读者可以在此网站中下载该软件，为开源共享软件。
并且该软件生成的XHTML标签严格遵循W3C网页标准，所创建出的CSS菜单也能够兼容于各种主流的浏览器（如Internet Explorer、Firefox、Opera、Netscape等）。
读者在成功下载该开源软件后，在CSS Tab Designer的系统文件及目录结构中的tab.exe文件为它的启动程序。而在Help目录中的文件为操作帮助指南，samples目录内的文件为示例样式文件，styles目录内的文件为CSS Tab Designer内带的各个样式模板文件。
（2）启动CSS Tab Designe导航菜单可视化软件
读者点击所下载的CSS Tab Designe文件目录中的tab.exe文件就可以启动CSS Tab Designe导航菜单可视化软件，下图所示为启动后的初始界面的截图。其中在左面【项目】视图中显示所创建的各个页面文件；而在中间的【标签样式表】视图中提供有CSS Tab Designe可视化软件内带的各个模板样式，开发人员可以直接选择；在右面的【预览】视图中直接显示开发人员所设计的结果、并能够采用"所见即所得"方式进行开发实现。
（3）浏览CSS Tab Designe导航菜单可视化软件的操作帮助指南
在CSS Tab Designe导航菜单可视化软件提供有操作帮助指南，并且文档的技术说明内容写的也比较详细和易懂——请见下图所示的帮助文档的局部内容的截图。读者可以浏览和阅读CSS Tab Designe导航菜单可视化软件的帮助文档掌握对该软件的使用，以提高应用CSS+Div技术进行页面设计时的效率。
如何应用策略设计模式的思想设计通用的数据库连接类
如何应用策略设计模式分离JDBC数据库连接中的外部环境信息
如何应用GOF设计模式中的构建者模式创建复合对象实例
如何应用GOF设计模式中的创建型模式实现松耦合地创建对象实例
如何应用观察者设计模式重构系统中日志处理功能实现的程序代码
源：设计达人（shejidaren888）
最近在更新设计导航 HTML 代码时，发现有个样式总是加载不出来，经过细看发现竟然是因为用了中文的双引号导致，但因为网页代码编辑器西文和中文的双引号太相似所以忽略查找这个问题，如此初级的问题却浪费了不少时间……
所以最终解决方案就是为网页代码编辑器使用代码专用字体：FiraCode + 中文字体组合（也适用于网页端），使用此方法，可以美化代码效果，减少因字符视觉差造成的小问题，对眼睛疲劳也有一定缓解作用哦。
一、FiraCode字体
FiraCode估计很多资深编码人员都了解过，在 Github 已经有30000 的 Star，它主要有2个特色：
1、字符等宽
每个字符宽度占用距离是一样的，所以无论大小写，你都能看到它是对齐的，但是若遇到有中文字体，这就不太好使了。
2、连字符号设计
当用户如输入 这两个符号，就会自动连在一起。如下图：
二、中文字体选择
为了解决引号的视觉问题，我们还必须选择中文字体，经小编测试一翻后，最后使用了思源黑体，这样引号就比较好分别了。WIN 系统下显示可能会更加明显。当然最后还是个人喜好设置中文字体啦。
mac 系统 Atom 编辑器截图
三、Atom 编辑器修改字体方法
小编使用的免费的 Atom 网页代码编辑器，所以只能用它来举例，其它编辑器修改方法也大同小异，可自行百度哦。
1、选择菜单 Atom ，然后在下拉菜单中选择用户样式设置
2、在「atom-text-editor」加入 font-family 和 font-size 的 CSS 属性：
font-family: "firacode-retina","Source Han Sans CN"; font-size:16px;
需要注意的是，小编使用了 Retina 屏的电脑，所以字体名称就用「firacode-retina」，在非高清屏的下直接使用「firacode」就行，具体大家可以自己试试，区别不是很大。
具体如下图：
四、下载地址
下载的字体非常全面，包含 ttf 及网页端的eot, woff 等字体格式，无需转换就能直接使用。
Firacode 官方下载地址：
https://github.com/tonsky/FiraCode
思源黑体下载地址：
http://www.shejidaren.com/app-she-ji-bi-bei-zi-ti.html
总结
使用FiraCode 中文的字体组合，不仅能让一串串代码变得工整美观，还能减少因字符显示引起的出错率，推荐大家收藏使用。
技术等级】初级
【承接文章】《强大的CSS选择器，CSS的核心技术，前端小白必备功底》
本文重点讲解CSS技术中有关字体样式的属性以及这些属性的取值。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
从本文开始，小海老师将带领大家认识CSS技术中的所有属性。我把CSS技术中的各个属性进行了分类，首先我们从与字体样式有关的属性开始。
CSS中与字体有关的属性包括以下六个：
font-family
font-size
font-weight
font-style
font-variant
color
一、字体样式属性：
CSS利用font-family属性来设置字体或字体列表。
1、设置字体：
.sty01{font-family:黑体;}
上述代码定义了用户自定义类sty01，该样式设置字体为“黑体”。利用class属性取值为sty01样式的HTML标记对中的文字将以“黑体”的字体显示。
2、设置字体列表：
.sty02{font-family:汉仪综艺体简,微软雅黑,黑体;}
上述代码定义了用户自定义类sty02，该样式设置了一个字体列表。利用class属性取值为sty02样式的HTML标记对中的文字，首先以“汉仪综艺体简”的字体显示，目标浏览器所在的设备若没有安装该字体，则自动以“微软雅黑”的字体显示；目标浏览器所在的设备若也没有安装“微软雅黑”字体，则自动以“黑体”的字体显示。
注意：为了防止CSS文件的中文字体名称不符合字符集的要求，所以习惯上都是用中文字体的外文名称来书写font-family属性的取值，下面我就为大家罗列几个常用的字体名称。
设置字体为 微软雅黑：.style1{font-family:Microsoft YaHei;}
设置字体为 宋体：.style2{font-family:SimSun;}
设置字体为 幼圆：.style3{font-family:YouYuan;}
设置字体为 黑体：.style4{font-family:SimHei;}
设置字体为 楷体：.style5{font-family:KaiTi;}
更多中文字体的西文名称，小海老师会在后续的文章中详细罗列。
二、字号大小属性：
CSS利用font-size属性来设置文本的字号效果
1、绝对大小：
xx-small
x-small
small
medium
large
x-large
xx-large
上述取值中：medium为默认值，medium以上的取值越来越小，medium以下的取值越来越大。
2、相对大小：
smaller，比上一级元素的字体大小小一号。
larger，比上一级元素的字体大小大一号。
代码实例：
<div style=“font-size:14px;”>
<span style=“font-size:larger;”>段落文字内容</span>
</div>
上述代码中“段落文字内容”的字体大小显示为比14px字号大一号的外观。
3、带有单位的长度值：
代码实例：.s1{font-size:16px;}
上述代码定义了用户自定义类s1，该样式设置字号为16px大小。
4、百分比：
设置字体字号为上一级元素的百分比大小。
代码实例：.s2{font-size:10%;}
上述代码定义了用户自定义类s2，该样式设置字号是上一级元素的字体大小的20%。
三、字体粗细属性
CSS利用font-weight属性来设置文本的粗细效果
normal，普通粗细，粗细度约为400。
bold，粗体，粗细度约为700。
bolder，更粗体，粗细度约为900。
lighter，更细体，粗细度约为500。
100、200、300、400、500、600、700、800、900：9个粗细等级。
但是现在的浏览器都无法将字体的粗细渲染的如此细腻，也就是说这9个等级的粗细度并没有明显的差异。
四、字体斜体属性
CSS利用font-style属性来设置文本的斜体效果
normal，普通，字体显示为不斜体。
italic，斜体，设置字体为斜体。
oblique，倾斜体，当特殊字体没有斜体效果时，可以使用该取值将字体倾斜。
五、设置字体是否为小型大写字母
CSS技术利用font-variant属性来设置是否为小型大写字母
normal，普通，字体显示为正常。
small-caps，小型大写字母。
六、设置字体的颜色
CSS技术利用color属性来设置文本颜色
十六进制颜色代码。
实例：h1{color:#ff0000;}
含义：重定义HTML中的h1标记对为红色。
十进制颜色代码。
实例：h2{color:rgb(0,255,0);}
含义：重定义HTML中的h2标记对为绿色。
颜色英文单词。
实例：h3{color:blue;}
含义：重定义HTML中的h3标记对为蓝色。
下一次小海老师会为大家讲解CSS中有关文本段落的属性，结合前面HTML的内容，可以对页面中的段落进行更为细致的调整。千万不要错过哦。
如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
*请认真填写需求信息，我们会在24小时内与您取得联系。
