本文從四個方面概述了如何設計商業網站的域名(功能變數名稱)，好的網站應該首先有一個好的功能變數名稱，下面看看本文具體的論述：

　　一、功能變數名稱的重要性

　　在這個資訊爆炸的時代，企業如何合理地利用網路優勢並發揮其潛能，是運籌帷幄，決勝千里的關鍵。

　　眾多企業將目光投到企業建站上，有些人往往在建站初期就把心思放在做網頁、搞宣傳方面。他們忽略了一項重要的環節，就是設計一個好的功能變數名稱。要想在激烈的市場競爭中出類拔絮，擁有一個好的功能變數名稱顯得尤為重要。因為功能變數名稱註冊後是受到保護的，就如同是你在互聯網上的商標和品牌，是一筆無形的資產。功能變數名稱也是你在進入互聯網上給人的第一印象，當別人看到你的功能變數名稱就會讓人聯想到這是你的企業、品牌、產品。而且它具有全球唯一性，因此它的價值可能會高於傳統的名字、商標。

　　如果忽略了功能變數名稱的重要性，很可能會給企業帶來巨大的損失。正如美國的三家大型汽車製造商，他們共同設立的零部件採購網上交易所就因功能變數名稱問題導致出師不利。由於一開始就忙於投入大筆資金進行系統開發和測試，在網站全面推出之前，才驚訝地發現功能變數名稱設計方案還沒有最終答案。因此網站發佈時間一推再推，時間緊迫，不能再等閒視之，最後才匆忙擬定了一個晦澀難懂的功能變數名稱。一些汽車零部件銷售公司對此大為不滿，因為該功能變數名稱過於複雜，並且沒有任何含義。由於他們因延誤網站發佈時間，使大批蠢蠢欲動的客戶頓時大失所望，以至交易所損失大量的交易資金。

　　所以，建立商業網站的第一步，就是給您的網站起個好名字。

　　二、功能變數名稱大觀

　　現在國內網站的功能變數名稱層出不窮，可見創意真的發揮得淋漓盡致。許多國內網站的功能變數名稱設計思路都不錯，大致可以分為幾類：

　　數字型

　　有人說國內數位功能變數名稱潮是丁磊註冊163後掀起的。不管怎麼樣，數位式功能變數名稱正不斷漸入民心，相信大部分民眾隨便都可以說出一大堆。除了跟世界之最喜馬拉雅山的8848、跟數學有關的3721、也有好兆頭的名字，如188、168等等。

　　區域型

　　不要以為區域型的功能變數名稱就一定是政府機關所有，像taiwan.com、china.com這些以國家、地區名稱作為功能變數名稱的例子在網上隨處可見。區域型功能變數名稱給人感覺大氣磅礴，有利於提高網站知名度。

　　組合型

在需要打開新視窗時，通常會採取下面三個方法之一：

1.通過JavaScript的window.open()函數打開新的視窗
<script>
window.open("http://www.simplelife.cn");
</script>

2.通過連結打開新的頁面
<a href="http://www.simplelife.cn" target="_blank">Open a new window
</a>

3.通過Form表單提交到新的頁面
<form action="http://www.simplelife.cn" target="_blank">
Open a new window
</form>

有時候，我們不但要打開新視窗，而且還想讓打開的新視窗有referrer資訊，以便統計來路。
需要跳轉的URL是需要參數的，如：
http://www.lohoclean.com/index.php?option=com_content&task=view&id=12&Itemid=26

在某種應用場合下，例如在打開視窗前需要做一些資料驗證操作等的時候，不允許我們使用連結來打開新視窗，而必須使用JavaScript來打開新視窗，這時候如果還需要保留referrer，經過實驗只能使用下面的方式：
<font onclick="Go('http://www.rus.net.tw')">Go</font>
<form name=JumpForm id=JumpForm action="" target="_blank" Method=Post>
</form>
<script>
function Go(url){
var form = document.getElementById("JumpForm");
form.action=url;
form.submit();
}
</script>

ID與CLASS的原則

據說W3C對於ID與CLASS的設定是ID具有唯一性，CLASS 具有普遍性。所以我們這裡的使用原則也是依據這一特性建立的。

ID是不能重複的，所以在 XHTML的結構中，大結構一定是用ID。比如標誌、導航、主體內容、版權。這些呢接我自己制定的規範命名為#logo , #nav , #content , #copyright 這些是雷打不動的命名。有人說佈局排版用ID，配色背景用CLASS，其實這是不正確的，ID與佈局排版沒有直接關係，CLASS與配色也不是對等的。

有人呢為了麻煩全都用ID或是全都用CLASS，全都用CLASS呢還有可理解，全都用ID就不正常了，這有悖ID唯一性。如果每個ID都不一樣，那非累死不可。我通過實踐總結的使用原則是：ID需要具有唯一性，並且儘量在週邊使用。而CLASS具有可重複性，並且儘量在結構內部使用。這樣做的好處是有利於網站代碼的後期維護與修改，這樣的做法就會讓所有的CLASS都成為ID的子級或是孫級。

你可以有兩個兒子但你能有兩個爸爸嗎，就是這個道理。在我們寫 CSS的時候可以寫成這樣 #father .child {…} 儘量不要讓Class包含ID，.father #child {…}如果寫成這樣顯得有點可笑 。當然這也不是鐵定的，特殊情況需要特殊對待嘛。但是通常情況下這種形式的必要性不大。 以上就是ID與CLASS使用原則，歸總起來一句話：ID是唯一的並是父級的，CLASS是可以重複的並是子級的。

定義格式：

形如id="aaa"定義的,在css中是這樣設置其樣式的： #aaa{ 樣式清單 }

而以class="bbb"形式定義的，在css中應該這樣設置其樣式： .bbb{ 樣式清單 }

用途：
class元素分2種,關聯的和獨立的.關聯的用於html的相關tag的,比如
h1.redone{color:red}
<h1 class= redone> 字體為紅色的 <h1>
<h1> 字體是黑色的 <h1>

獨立的元素可以用於所有的html元素的,比如
.classname {property:value}

id元素和獨 立的class功能相似,區別是id 是唯一的而且對於javascript操作html 元素有説明,
#idname {property: value}

概念定義： id是元素的名稱，可以供js或其它腳本程式來訪問該元素物件，而class是該元素的css類名。 id的值在整個當前網頁中應該是唯一的，即某一個元素定義了id="aaa"，那麼這個網頁中其它的元素的id就不能定義成aaa，而class則可以。

若出現重複定義時，從優先順序來看是：

Style ＞ ID ＞ Class ＞ 缺省的Html元素

一個Class是用來根據使用者定義的標準對一個或多個元素進行定義的。打個比較恰當的比方就是劇本：一個Class可以定義劇本中每個人物的故事線，你可以通過CSS，javascript等來使用這個類。因此你可以在一個頁面上使用class="Frodo" ，class="Gandalf"， class="Aragorn"來區分不同的故事線。還有一點非常重要的是你可以在一個文檔中使用任意次數的Class。

至於 ID，通常用於定義頁面上一個僅出現一次的標記。在對頁面排版進行結構化佈局時（比如說通常一個頁面都是由一個頁眉，一個報頭< masthead>，一個內容區域和一個頁腳等組成），一般使用ID比較理想，因為一個ID在一個文檔中只能被使用一次。而這些元素在同一頁面中很少會出現大於一次的情況。

歸納成一句話就是：Class可以反復使用而ID在一個頁面中僅能被使用一次。有可能在很大部分瀏覽器中反覆使用同一個ID不會出現問題，但在標準上這絕對是錯誤的使用，而且很可能導致某些瀏覽器的現實問題。 在實際應用的時候，Class可能對文字的排版等比較有用，而ID則對宏觀佈局和設計放置各種元素較有用。

ID與CLASS的使用技巧

1. 子級的命名的包含父命名中的部分為開頭。這樣方便在編寫CSS時明確層次關係。

2. CLASS中的子級最好不用ID。當然特殊情況特殊對待。

3. CLASS的命名最好命名用大小寫合用。例 .newMovie 這樣的寫法與第一條結合起來使用明確關係最合適。要需要注意的是IE以外的瀏覽器對於大小寫是很敏感的。還有就是一定要以字母開頭。 其實上面講的都是一些大家都明白的內容，只是我撿了個漏先寫下來算是一個總結。希望大家對於ID與CLASS的使用提出自己的新觀點新思路。一起總結出最適合也最有效率的規範來。

一、使用軟體
現在到了隆重推薦時刻，非常可愛的woof千里迢迢從家裡趕到了我的面前，嬉皮笑臉地對我說，讓它來露露臉。好吧，看在它那迷人的臉蛋上，我就向大家講講用它搜尋硬碟上的SWF檔。 安裝之後直接執行它，按下圖設置，搜尋SWF檔。

預覽後找到想保存的檔，在前面打上勾，在File>>Copy，選擇保存的路徑，完成。
果然不錯，woof，筆者向你保證，向大家推薦使用這個軟體。

二、去temp裡搜尋
有些網站為保護自己的設計成果不讓人偷竊，做好了框架，對於一些不大熟悉HTML標記語言的網友來說，無從下手，"去temp裡搜尋"不失為一個好方法，因為通常瀏覽過的網頁，IE都會把它們有關的資料資訊記錄到"Temporary Internet Files"目錄中。

獲取的方法是：在那個目錄上按滑鼠右鍵，點擊搜尋".SWF"，很快，所有的FLASH檔都顯示在眼前，只要一起把它們全部COPY到另外的目錄，然後再慢慢挑。

在win2000中又有不同，因為它根據不同使用者設置了不同的各種參數，包括上網的記錄，我們必須到以下的目錄來搜尋:
作業系統>>Documents and Settings>>Administrator>>Local Settings>>Temporary Internet Files
或者：
作業系統>>Documents and Settings>>Default User>>Local Settings>>Temporary Internet Files
注意：最好不要打開那個目錄，那樣機器會產生運行慢的現象，不要奇怪，這是正常現象，因為裡面的檔非常多，會耗費不少系統資源。

三、有全螢幕連結的
有很多網站為了方便網友看FLASH作品，常常提供了全螢幕欣賞，這種方式最受筆者的歡迎了，只要直接在連結上按滑鼠的右鍵，選擇"複製快捷方式(copy url)"，然後到下載工具上黏貼位址連結URL（如上法），這個FLASH作品又乖乖地歸到硬碟上去了。

四、查看原始檔案
當瀏覽網頁見到誘人的FLASH時，我的愛鼠右鍵就受苦了，一點擊它，在右鍵功能表中選擇"View source"（英文版本的IE）或者"查看原始檔案"（中文版本的IE），記事本就帶著密密麻麻的原始程式碼顯示在面前.

按下快速鍵"Ctrl + F"，在彈出的對話方塊中輸入".swf"，確定即可搜尋到FLASH的SWF檔,COPY下連結位址，注意看是絕對連結還是相對連結。 把它黏貼到瀏覽器的地址欄上，FLASH就全螢幕地出現在瀏覽器視窗。

接著複製整個位址，打開下載工具軟體flashget或者NetAnt，黏貼連結位址URL即可。 如果頁面裡有多個FLASH檔，但只是想下載其它一個兩個，按上面的方法先使SWF檔全螢幕，直到找到想下載的SWF文件。

1.   控制項變成顏色漸變：
<style type="text/css">
<!--
.test{FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='white', endColorStr='red', gradientType='1');}
-->
startColorStr是開始顏色；endColorStr是結束顏色；gradientType，0是從上到下，1是從左到右

2. 自訂 tableborder：
{
/*這個為自訂的選擇，注意它前面的. 這是自訂的方法！*/
background-color: #E1FDEE; /*背景顏色*/
border: 1px solid #FF0000;
  }

3. CSS導入：

第一種方法：
是把CSS樣式表寫在HTML的行內，比如下面的代碼：
<p style=“font-size：14pt；color：blue”>藍色14號文字</p>
這是採用<Style=“ ”>的格式把樣式寫在html中的任意行內，這樣比較方便靈活。

第二種方法：
是把CSS文檔放到<head>文檔中：
<style type=“text/css”> …… </style>
其中<style>中的“type=‘text/css’”的意思是<style>中的代碼是定義樣式表的。

第三種方法：
<!--#include file="/temp/Css.aspx"-->,把他放到<head>中，
不過Css.aspx檔得包括在<style type=“text/css” > …… </style> 中。

第四種方法：
把您編輯好的CSS文檔保存成“.CSS”文件，然後在<head>中定義。定義的格式是這樣的：
<head> <link rel=stylesheet href=“style.css”> …… </head>
我們看到這裡應用了一個<Link>，“rel=stylesheet”指連接的元素是一個樣式表（stylesheet）文檔。
一般這裡是不需要您改動的。

而後面的“href=‘style.css’”指的是需要連接的檔位址。
您只需把編輯好的“.CSS”檔的詳細路徑名寫進去就可以了。
這種方法非常適宜同時定義多個文檔。它能使多個文檔同時使用相同的樣式，從而減少了大量的冗餘代碼。

　　1、活用Format Table命令

　　在複雜的網頁設計中，表格的應用是最多的，因為利用表格可以自由地控制文本和圖像在網頁上出現的具體位置，從而使整個網頁看上去緊湊統一。Dreamweaver在這方面也不甘落後，我們可以使用其中的“Format Table”（格式化表格）命令來快速地對表格應用預先設計好的樣式。要使用預先設計好的樣式，先將游標置於表格的任意一個儲存格內，再選擇“Command”→“Format Table”命令， 在隨後出現的對話方塊中，從左邊的列表中選擇一個設計方案。按“Apply” 鍵來查看效果，如果不滿意的話，還可以重新設置或者修改部分參數的值，如邊界粗細，背景顏色等等。

　　2、巧妙隱藏標籤

　　3、靈活運用樣式

　　熟悉網頁設計的網友就知道，調用Style的方法很多，我們可以按一下滑鼠右鍵選擇Custon Style來調用Style標準，也可以在狀態列中的元素清單上按一下右鍵來調用Style。雖然不同的方法達到的效果看似一樣，但實際上產生的HTML代碼則完全不同。比如用Custon Style來調用Style標準，在網頁代碼中就生成一個〈span〉標籤，這樣的標籤一多就會使檔十分臃腫而且影響瀏覽器的解析速度，所以我們應儘量使用狀態列中的元素清單來調用Style。

　　4、不給檔起中文名稱

　　大家在製作好了網頁後，通常會給網頁起一個具有代表性的中文名稱，一來能使人一看檔案名就能大概瞭解檔所包含的內容，二來能夠方便各個超級連結之間的相互調用。但如果你在Dreamweaver中這樣做，就會發現Dreamweaver對中文檔案名支持得不是太好，經常會有頁面調用不正確的現象發生，所以我們以後在Dreamweaver中保存網頁的時候，儘量用英文或者數位作為檔案名稱，這樣就可以避免上面的出錯現象。

　　5、同時連結到兩個網頁

　　我們都知道超級連結一次只能連到一個頁面。如果我們要想一次在不同的框架頁中打開文檔，可以使用“Go To URL”javascript 行為。打開一個有框架的網頁，選擇文字或圖像，然後從行為面板中選擇“Go To URL”。我們會注意到Dreamweaver會在“Go To URL”對話方塊中顯示所有可用的框架。選擇其中一個我們想連結的框架並輸入相應的URL後再選擇另一個框架並輸入另一個URL。

　　6、巧妙設置字體解析度

　　我們在製作網頁的時候，經常有這種體會，那就是製作好的網頁在本地電腦上瀏覽時很正常，但在另外一台電腦上瀏覽時發現原本漂亮的網頁變得歪歪扭扭了，這是為什麼呢？原來各個電腦的解析度要使你的主頁在不同的解析度下都能正常顯示，在 Dreamweaver中得到了較好的解決。在文件視窗的右下角，Dreamweaver 顯示當前文檔被設計成的解析度大小。按一下哪個數位，在彈出式功能表中可以為當前的頁面指定顯示解析度，通過修改可以使你的主頁更具靈活性。使不同解析度的顯示器都能較好地顯示。

我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什麼意思呢？絕對是什麼地方的絕對，相對又是相對於什麼地方而言的呢？那他們又有什麼樣的特性，可以做出什麼樣的效果呢？absolute與relative怎麼區分，怎麼用？關於兩者之間又有什麼樣的技巧呢？我們就來一一解說。

Relative，CSS中的寫法是：position:relative;  他的意思是絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。

Absolute，CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。

如果設定TRBL並且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

一般來講，網頁居中的話用Absolute就容易出錯，因為網頁一直是隨著解析度的大小自動適應的，而Absolute則會以瀏覽器的左上角為原始點，不會應為解析度的變化而變化位置。很多人出錯就在於這點上出錯。

而網頁居左其特性與Relative很相似，但是還是有本質的區別的。

當然有一點要注意，父子關係是無法用z-index來設定上下關係的，一定是子級在上父級在下。

有時我們還需要依靠z-index來設定容器的上下關係，數值越大越在最上面，數值範圍是自然數。

Dreamweaver是一個非常簡單易用但又功能強大的網頁製作軟體。但是，它卻又一個令很多初學者很困惑的問題。那就是空格。

代碼雖然簡單，但是它的作用也很大。在做網頁時候我們空出一行或者幾行就要靠這個代碼來幫忙。學過HTML語法的朋友都知道<p></p>標籤是用來標記一個段落的。但光寫<p></p>這段代碼是不是就可以生成空行呢？這是無效的。必須在<p>標籤中增加“；”代碼才行。<p> </p>這樣的代碼才會有空行效果。這裡該標記也是起了佔據位置的作用。

如果用Dreamweaver生成一張表格，察看原始程式碼的時候會發現。儲存格<td>標籤中頁有這個標記<td> </td>。如果你把這些標記刪除，會發現所有的儲存格全部擠在一起。根本無法往裡面填寫內容非要拖拽邊框不可。

在Dreamweaver中使用空格遠遠沒有象word中一樣方便。比如首行無法空格，句子中間空一格以上都是不行的。原因是什麼呢？這是因為在HTML語言中多於一個的空格都被忽略不計。這樣就造成了空格困難的原因。

怎樣才能解決Dreamweaver的空格問題呢？方法有很多：

1、 製作一張很小的透明圖片。嵌入到文本當中或者行首。這種方法實現起來比較麻煩。

2、 使用全形空格。為什麼這種方案可行呢？因為全形空格實現起來比較簡單。雖然也是空格但是對應的HTML代碼卻不是空格代碼。而是另外的代碼，因此Dreamweaver把他當字元處理而不是空格。所以可以相安無事。但是在不支持中文字元集的瀏覽器看來就是亂碼了。

3、 使用軟空格。即在要插入空格的地方按Ctrl+shift+空格。這樣的空格所有瀏覽器都能認識。但是缺點是在頁面編輯的時候無法看見插入了多少空格，只能在瀏覽器預覽的時候才能看清楚。不夠直觀。軟空格其實使用的是代碼。是不間斷空距標記。他可以生成軟空格。每按一下Ctrl+shift+空格就是增加一個代碼。

1、直排文字 —— 使用writing-mode

writing-mode屬性有兩個值lr-tb和tb-rl，前者是默認的左-右、上-下，後者是上-下、右-左。
比如：
p{
writing-mode: tb-rl;
}
可以結合direction排版。

2、設定文字字體、顏色、大小 —— 使用font

font-style設定斜體，比如font-style: italic;
font-weight設定文字粗細，比如font-weight: bold;
font-size設定文字大小，比如font-size: 12px;（或者9pt，不同單位顯示問題參考CSS手冊）
line-height設定行距，比如line-height: 150%;
color設定文字顏色（注意不是font-color），比如color: red;
font-family設定字體，比如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;（這是通用的寫法）

以上都可以寫在一行font屬性裡（除了color屬性需要單獨寫）：
font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif;

3、控制段落排版 —— 使用margin，text-align

中文段落使用
標籤，左右（相當於縮進）、段前段後的空白，都可以用margin。比如：

p{
margin: 18px 6px 6px 18px; /*分別是上、右、下、左，十二點開始的順時針方向*/
}
文字的對齊方式用text-align，比如：
p{
text-align: center; /*居中對齊*/
}
對齊方式還有left、right和justify（兩端對齊）

PS.談起margin，我習慣於在寫CSS的時候為所有的標籤定義margin: 0; 因為時而出現由於預設的margin值導致頁面排版問題，而自己找不到原因（特別注意的是ul/ol/p/dt/dd等標籤）

4、首字下沉 —— 使用:first-letter

偽對象:first-letter配合font-size、float可以製作首字下沉效果。
比如：
p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}

5、首行縮進 —— 使用text-indent

text-indent可以使得容器內首行縮進一定單位。比如中文段落一般每段前空兩個中文字。可以這麼寫：
p{
text-indent: 2em; /*em是相對單位，2em即現在一個字大小的兩倍*/
}
如果font-size是12px的話，那麼text-indent: 2em則縮進24px。

6、專案符號的問題 —— 使用list-style

在CSS裡專案符號有disc（實心圓點）、circle（空心圓圈）、square（實心方塊）、decimal（阿拉伯數字）、lower-roman（小寫羅馬數字）、upper-roman（大寫羅馬數字）、lower-alpha（小寫英文字母）、upper-alpha（大寫英文字母）、none（無）。比如設定一個列表（ul或ol）的專案符號為方塊，如：
li{
list-style: square;
}
另外list-style還有一些值，比如可以採用一些小圖片作為專案符號，在list-style下直接寫url(“圖片位址”)就可以了。注意如果一個項目列表的左外補丁（margin-left）設為零的時候，list-style-position: outside（預設是outside）的專案符號不會顯示。可惜的是上述的專案符號似乎並不能設定大小，圓點和方塊始終是那麼點。並且不能設定垂直方向上的對齊。

7、固定寬度中文字（詞）折行 —— 使用word-break

舉個例子，比如說要在一個固定寬度容器裡面顯示很多地名（假設以空格分隔），為了避免地名中間斷開（即一個字在上面而另一個字折斷到下一行去了）。則可以使用word-break。

8、關於中文字注音 —— 使用ruby標籤和ruby-align屬性

比如說注音zhu yin，可以利用ruby-align設置對齊方式。這是在CSS手冊裡面看到的，具體可以自行查閱ruby-align項。

9、固定寬度中文字截斷 —— 使用text-overflow

用後臺語言可以對從資料庫裡的欄位內容做截斷處理，比如說截12個中文字（之後用省略號）。但是有時還需要html標籤的過濾等，而用CSS來控制則沒有這個問題。比如對清單應用以下樣式：
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
不過只能處理文字在一行上的截斷，不能處理多行。

有一個很簡單的方法，使用display:table, display:table-row and display:table-cell 就可以實現，而且高度小的容器會自我調整那些高度相對較高的，但是IE不支援這個屬性，我們先不用去責備IE，相信以後會有所改善的。這裡我製作了一個模型。

先看看xhtml的結構：

<div class="equal">
<div class="row">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</div>

很簡單不用解釋就能看懂，但是這裡給出一個table的結構，是不是很相似

<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

下面是css：

.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .three {
}

有些網站設計師都喜歡將兩個或者多個容器等高的並排一起放置，並在裡面展示每個容器的內容，就象經典表格佈局中的儲存格控制幾個欄目的位置，也喜歡容器的內容居中或頂部對齊顯示。但是你又不喜歡用table來實現他，那怎麼辦呢？實現的方法很多，有根據視覺錯覺實現的，有用JS控制使高度相等的，還有採用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。

裡還使用了 border-spacing:10px;來區別幾個盒子，正如上面所陳述的，IE下不能正常顯示，但是在：Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1經過測試均可以完美顯示.

解釋：

1.dispaly:table;讓層.equal作為塊級元素的表格table顯示，也就是將他作為一個表格
2.border-collapse:separate;邊框獨立，就像表格沒有合併儲存格以前
3.display:table-row;將.row作為表格行tr顯示
4.display:table-cell;將.row的下級div作為表格儲存格td顯示
5.然後定義寬度