如何應用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設計模式中的創建型模式實現松耦合地創建對象實例

如何應用觀察者設計模式重構系統中日志處理功能實現的程序代碼

源：設計達人（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教材發給你，幫助你在前端開發的道路上闊步前行。

在線咨詢

上一篇：原生 js 實現點擊按鈕復制文本
下一篇：CSS3實現文本字體漸變雙色變化

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

如何應用CSS+Div分離Web表示層數據處理邏輯和展現邏輯

件項目實訓及課程設計指導——如何應用CSS+Div分離Web表示層數據處理和展現邏輯

文章預告

小海聲明

您的項目需求