如何應用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

言

技術概述

定義

核心特性和優勢

示例代碼

技術細節

工作原理

難點分析

實戰應用

應用場景

代碼示例

優化與改進

性能瓶頸

優化建議

代碼示例

常見問題

總結與展望

您的項目需求