如何应用CSS+Div分离Web表示层数据处理逻辑和

如何应用CSS+Div分离Web表示层数据处理逻辑和展现逻辑

件项目实训及课程设计指导——如何应用CSS+Div分离Web表示层数据处理和展现逻辑

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设计模式中的创建型模式实现松耦合地创建对象实例

如何应用观察者设计模式重构系统中日志处理功能实现的程序代码

言

如果网页只有一种颜色，那是非常可怕的，颜色的设置丰富了网页，就如同多彩缤纷的世界。

在了解css颜色之前，我们回顾下计算机是如何显示颜色的？计算机根据色光三原色的原理通过各种算法来显示颜色。

css 颜色 —— color

网页中使用颜色关键字、16进制字符、rgb、rgba等表示红，绿，蓝三种颜色混合色，如下示例,几种写法都是指同一个颜色（红色）：

color：red;
color: #ff0000;
color: rgb(255,0,0)
color: rgba(255,0,0,1)

对于16进制形式，每2位表示一个颜色，从左到右分别是红、绿、蓝，每种颜色取值从00 到 FF。

如下示例：

color: #000000; /*黑色*/
color: #ffffff; /*白色*/
color: #ff0000; /*红色*/
color: #00ff00; /*绿色*/
color: #0000ff; /*蓝色*/

对于rgb的表示法，由三个参数组成，分别是红、绿、蓝，每种颜色取值从0 到 255。

如下示例：

color: rgb(0,0,0); /*黑色*/
color: rgb(255,255,255); /*白色*/
color: rgb(255,0,0); /*红色*/
color: rgb(0,255,0); /*绿色*/
color: rgb(0,0,255); /*蓝色*/

红，绿，蓝值从0到255的结合，给出了总额超过1600多万不同的颜色（256 × 256 ×256）。

但是现代大多数显示器能够显示至少16384种颜色。所以在使用颜色时要格外注意，避免设置不能够显示的颜色，可以参考网页安全色：https://www.w3school.com.cn/cssref/css_colors.asp。

颜色除了有三原色红绿蓝组成，还有亮度层级，如下图：

rgba 中的a是指透明度，这个是css3新增加的属性，通过rgba可以设置更加漂亮的颜色。

css 背景 —— background

通过background属性可以设置元素的背景色、背景图片，语法如下：

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

background 在一个声明中设置所有的背景属性，可以在这里设置如下属性：

background-color —— 背景颜色。
background-image —— 使用的背景图像
background-position —— 背景图像的位置
background-size —— 背景图片的大小
background-repeat —— 如何重复背景图像
background-origin —— 背景图片的定位区域
background-clip —— 背景的绘制区域
background-attachment —— 背景图像是否固定或者随着页面的其余部分滚动。

各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 url(img.png)是允许的，但至少有一个值。

建议使用background 简写属性，这样可以更好地兼容较老的浏览器，少写很多代码，当然你也可以分开使用，比如：

background-color: #ff0000;
background-image: url(img.png);
background-repeat: no-repeat;
background-size: 100% auto;

1、背景颜色 —— background-color

background-color 和之前讲的的color 一样，可以使用16进制、rgb、rgba等设置颜色。如下实例：

<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
<body>
<h1>背景色1</h1>
<h2>背景色2</h2>
<p>背景色3</p>
<p class="no2">背景色4</p>
</body>
</html>

如下图显示：

注意：background-color: transparent; 指透明色，不显示任何颜色。

2、背景图片的使用——background-image

给html元素添加背景图片，在早期网页制作中被广泛应用，如今已不建议大量使用。如下实例：

body {background-image:url(/static/bg.gif);}

这里使用了一个125*125大小的图片，如下：

但是你会发现，整个网页铺满了图片，上面的代码默认会铺满整个页面从左到右，从上到下。如果不想被平铺，可以使用background-repeat 设置。

背景图片同时可以设置多个背景图片，如下：

background-image: url(/statics/bg1.gif), url(/statics/bg2.gif);

多个图像以逗号隔开，在页面中多个图片会叠加显示，第一张图片显示在最顶端。

如下效果：

3、背景重复方式 —— background-repeat

它有如下几个属性：

repeat	默认。背景图像将在垂直方向和水平方向重复。
repeat-x	背景图像将在水平方向重复。
repeat-y	背景图像将在垂直方向重复。
no-repeat	背景图像不重复。
inherit	从父元素继承 background-repeat 属性的设置。

实例如下：

4、背景图的位置 —— background-position

背景图片默认显示在左上角，语法如下：

background-position: x y; // x 距离左边距离，y距离顶部距离

如果要改变它的位置，可以使用关键字：top、bottom、left、right 和 center；或者使用长度值，如 100px 或 5cm；也可以使用百分数值。

x 可以取值百分比| 数值| left | center | right。

y 可以取值百分比| 数值| top| center | bottom。

当只设置一个值的时候，另一个会缺省为 center。

使用关键字，将背景图片水平居中，垂直居中：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

使用百分比%：

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50% 50%;

50% 50% 等同于 center center，显示效果和上图一样。

还可以使用具体数值，比如 px、em、cm等。

background-image:url('/statics/images/course/smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position: 50px 50px;

显示效果如下：

5、背景图相对于容器的基准点 —— background-origin

就是设置背景图片相对于html元素什么位置作为初始坐标点，语法：

background-origin: padding-box|border-box|content-box;

几种值得含义：

padding-box	背景图像相对填充框的位置
border-box	背景图像相对边界框的位置
content-box	背景图像相对内容框的位置

如下实例：

6、背景图片大小 —— background-size

默认会显示背景图原始尺寸，可以通过此属性设置背景图片在元素上的大小，语法：

background-size: width height;

宽度和高度可以使用数值、百分比%、cover 及 contain ;

数值：可以使用任何单位的数字，比如 px、em、cm等。如果设置一个值，第二个为"auto(自动)"。

百分比%：相对于其所在html原始宽度和高度，如果设置一个值，第二个为"auto(自动)"。

cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。

contain：把背景图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

如下示例：

7、背景图像是否固定或者随着页面的其余部分滚动

background-attachment 属性有以下几个值：

scroll	背景图片随页面的其余部分滚动。这是默认
fixed	背景图像是固定的
inherit	指定background-attachment的设置应该从父元素继承
local	背景图片随滚动元素滚动

如设置一个固定的背景图片，不跟随页面滚动：

background-attachment:fixed;

滚动滚动条，会发下背景图片始终固定在屏幕那个位置。

8、背景绘制区域 —— background-clip

语法如下：

background-clip: border-box|padding-box|content-box;

border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

这个属性类似于 background-origin ，只不过它会裁剪背景图片，如下示例：

9、背景层的混合模式 —— background-blend-mode

所谓混合模式就是将图片与颜色或图片与图片进行混合，语法：

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity;

属性值：

示例如下：

正常模式

luminosity 亮度模式

color 颜色模式

其它模式可以自己试试，看下有什么区别。

到此，我们了解了颜色和背景的使用方法，尤其是背景的使用，由于它的属性很多，可以简写也可以分开写，要想完全掌握，还得多练习，每种属性进行组合使用看看其效果。

一般建议使用 background 简写方式，主要是可以少写很多代码。以上介绍难免有误，或不齐全，欢迎指出错误，并补充。

上篇：前端入门——css链接样式

言

在现代Web开发中，JavaScript（JS）扮演着至关重要的角色，它使网页具备了动态交互的能力。通过JS，开发者能够实时地改变页面的布局、样式以及内容，极大地提升了用户体验。本文将聚焦于如何使用JS来修改文档对象模型（DOM）中的元素样式和属性，通过具体的示例和深入的分析，让你全面掌握这一技能。

技术概述

定义

DOM是一套标准，用于表示和修改HTML和XML文档的结构。JavaScript提供了多种方法来访问和修改DOM中的元素。通过JS，我们可以改变元素的CSS样式和HTML属性，从而实现页面的动态更新。

核心特性和优势

实时响应：JS能够立即响应用户事件，如点击、输入等，即时更新页面。
样式与行为分离：通过JS修改样式，可以保持CSS的整洁，遵循良好的分离原则。
增强交互性：动态地改变页面元素，可以创建丰富的用户界面和交互效果。

示例代码

// 改变元素的样式
document.getElementById('myElement').style.color='red';

// 改变元素的HTML属性
document.getElementById('myLink').setAttribute('href', 'https://www.example.com');

技术细节

工作原理

当JS修改DOM元素的样式或属性时，实际上是在改变浏览器对这些元素的渲染方式。JS通过访问DOM API，如style属性和setAttribute方法，来实现这一过程。

难点分析

性能考虑：频繁的DOM操作可能会导致页面重绘和回流，影响性能。
兼容性问题：不同浏览器对某些CSS属性的支持程度不同，需要进行适配。

实战应用

应用场景

假设我们有一个登录表单，当用户输入信息时，我们希望实时显示输入状态，如输入框边框颜色的变化。

代码示例

const inputField=document.getElementById('username');
inputField.addEventListener('input', function() {
    if (this.value.trim().length > 0) {
        this.style.borderColor='green';
    } else {
        this.style.borderColor='red';
    }
});

优化与改进

性能瓶颈

频繁的DOM操作可能导致页面性能下降，尤其是当涉及到大量元素时。

优化建议

减少重绘和回流：尽量批量操作DOM，减少不必要的样式更改。
使用CSS类：通过切换CSS类而非直接修改样式属性，可以利用浏览器的缓存机制。

代码示例

const element=document.getElementById('myElement');
element.classList.add('highlight'); // 利用CSS类

常见问题

Q: 如何避免在修改多个属性时导致的多次重绘？
A: 可以通过将多个属性设置放在同一个style对象中操作，或者使用CSS类来切换不同的样式集。

总结与展望

掌握通过JS操纵DOM元素的样式和属性是前端开发的基本功之一。它不仅增强了页面的互动性和响应性，也是构建现代Web应用的基础。随着Web技术的不断进步，DOM操作的效率和便捷性也在不断提升，学习和掌握这一技能将为你的前端开发之路打开更多可能性。

希望本文能够帮助你深入理解并熟练运用JS来操控DOM元素的样式和属性，无论是在日常的编码实践中，还是在解决复杂的问题场景下，都能得心应手。如果你有任何疑问或想要分享的经验，欢迎在评论区留言。让我们一起探索前端世界的无限可能！

在线咨询

上一篇：白蛇仙劫0.1折4周年庆登录送豪华现金卡碎片材料包称
下一篇：使用CSS3 box-decoration-brea

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

如何应用CSS+Div分离Web表示层数据处理逻辑和

件项目实训及课程设计指导——如何应用CSS+Div分离Web表示层数据处理和展现逻辑

言

css 颜色 —— color

css 背景 —— background

言

技术概述

定义

核心特性和优势

示例代码

技术细节

工作原理

难点分析

实战应用

应用场景

代码示例

优化与改进

性能瓶颈

优化建议

代码示例

常见问题

总结与展望

您的项目需求