DIV CSS 佈局教程網

《這將是一場革命》一文出來以後。得到業界大伙的認同，當然與此同時也得到部分來自內部與外部的挑釁，不過的更加多的是更多人來尋問每一個點的細節。今晚回家很早就睡了，半夜在一個夢中醒來，夢裡正在和小學的同學玩一個游戲——“The Next”。醒來以後覺得自己需要做點什麼，於是終於將TMENU修改了（拖了很久了）；然後覺得近期需要對之前提到的五點詳細的出一部分實在的案例寫得詳細點，於是開始寫本文。
夢裡回到小學，是有道理的。一是那個“The Next”的游戲提醒我，另外一個則是我和飄飄經常和別人說的，要學好HTML先回去看看小學的語文書。回小學的原因是那裡的書本不會受到過多的應試教育的干擾，裡面的“本質”存有真實性，而語文書這是意味HTML的本質：標題、段落、列表、書目。HTML學習的本質就是該是什麼就用什麼——Ghost。當然這句話是需要一個解釋的，參照的范例就是你的小學語文書。
我們先來看看我們制作網站的歷程。記憶中我第一個網站是產生於1998年，當時都是一群用table做網頁的人。在table的時代我們覺得最難的題目是什麼？
奇特的三行不定列布局：

奇特的一像素邊界：

table時代過後（記憶中是2001年前後），出現了第一批使用<div>的人。於是國內吹起了一股CSS之風。用法是將他套著若干的table然後利用CSS的絕對定位，還有的加上些JS讓他飄來飄去。後面就有人開始研究CSS起來，記得“風人設計”的初期就有若干談合作的人拿著一本CSS的書和我說這說那的（當然這些人最後都轉行了）。在這個時候我們覺得最難的題目是做一個當時被叫做“Java特效”的咚咚。於此時我被一個人提出的XML所吸引，但只是將他看作一種數據儲存（其實這也就奠定了Qzone實現的雛形）。
時間飛快如梭，2004年5月1日，國際勞動節當天，電子工業出版社出版了一本名為《網站重構——應用Web標准進行設計》的書譯。於是國內就遍布了“DIV CSS”的信念，真正的意味上中國網站重構的跨時代性起步開始了；但另一個角度而言，這本書將中國的WebReBuilder從一個火坑拉出來，丟進了另外的一個火炕。我想我們只能使用看待隋唐盛世的眼光去看待這本書。因為它只是意味一革新的皇帝和新的朝代的誕生，並沒有從本質上面推動社會的變革和進化。這本書將table嵌套，變成了div嵌套。當時最流行的話語（直到現在）是“我的網站是‘DIV CSS’做的。”這個時候我並沒有加入這個行列，一直是在等待；因為我有一個很關鍵的問題沒有解決“為什麼要‘DIV CSS’而不是‘TABLE CSS’”：
引用《這將是一場革命》內容：
我們先看看一下兩個范例。table做的，div做的表面上他們是一樣的，但是一旦產品經理提出修改，表現需要變化。對於div會很輕易的變化成為這個 范例 。范例可以看出不修改html的情況下，table就是打死也完成不了這樣的改變。“DIV CSS”比“TABLE CSS”優秀就是排版的自由化，就以上例為題，table就一輩子都無法做到。
一直到了Qzone3.0前後，我才開始想明白上面的答案，歷時差不多有一年。接著在Qzone4.0的時候動用了三個標記“dl、dt、dd”和 TMENU 的誕生。現在非常悔恨的是我也將大家帶入了另一個跨時代的起步——“XHTML CSS”，同時也是將大家帶進了一個新的火炕。進火炕容易出火炕難，我才開始明白為什麼兩個重構名人——阿捷、老甘會在互聯網當中逐漸消失。我開始不去怪責他們之前的事情，更多的是一種體諒，與此心中也暗下決心。便開始了進行鋪墊“良性競爭”的“SB”觀念。
歷史路程如上，回歸到HTML學習的本質就是該是什麼就用什麼；意思就是標簽不能濫用，還原到內容的本質的標簽才是合格的標簽。就以 TMENU 為范。
之前的HTML代碼是：
<ul class="menu">
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#" class="now"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
</ul>
現在的HTML代碼是：
<map id="directmenu" class="menu">
<div><a href="#"><span><span>123123</span></span></a>
<a href="#"><span><span>123123</span></span></a>
<a href="#"><span><span>123123</span></span></a>
<a href="#" class="now"><span><span>123123</span></span></a>
<a href="#"><span><span>123123</span></span></a></div></map>
<h2>以下是一個菜單列表</h2>
<ul class="menu"><li>
<a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
<li><a href="#" class="now"><span><span>123123</span></span></a></li>
<li><a href="#"><span><span>123123</span></span></a></li>
</ul>
兩者的不同點，大家也看到了。多了一塊map的標簽和一個hn的標簽。為什麼是這樣呢？我們再來看一個例子：操場上面有100台不同牌子，不同外形，不同顏色的車；現在讓你將這些車分成若干組，反饋一個列表以供選擇。當然，使用列表是大家都會想到的。但是大家有沒有想到這個列表能表現什麼呢？
引用范例
<ul>
<li>XXX牌子XXX型號</li>
<li>XXX牌子XXX型號</li>
</ul>
再或者
引用范例
<ol>
<li>XXX牌子XXX型號</li>
<li>XXX牌子XXX型號</li>
</ol>
就這上面的列表，我根本就看不清楚這個列表的分類是怎麼形成的，為什麼一個是有序，一個是無序的。他們是怎麼樣會這樣排，為什麼放在一起。很多很多的問題。我們再來看看下面的范例
引用范例
<h3>黃色系列車</h3>
<ul>
<li>XXX牌子XXX型號</li>
<li>XXX牌子XXX型號</li>
</ul>
再或者
引用范例
<h3>出廠年份</h3>
<ol>
<li>XXX牌子XXX型號</li>
<li>XXX牌子XXX型號</li>
</ol>
上述的范例，大家是否一看就一目了然了。所有的來龍去脈都變得清清楚楚。然而為什麼TMENU代碼裡面還有map標簽呢？我們看看一個范例

以上的范例當然是正確的。然而這樣的結構就會讓人覺得用戶極度低能了，站名和副標過後不是站點地圖導航菜單麼？（特指menu在頂部的站點）而且與此同時HTML本身就提供了一個特指站點地圖導航的標簽——<map>。既然有一個本身就有這樣意義的標簽你又何必使用文字去說明呢？你總不會使用<h3>這是一個無序列表</h3><ul>這麼白癡吧。大家都知道阿媽是女人啊。我們再看看下面的范例：


是不是，代碼更加的簡單清晰明了了。



其實要走好WebReBuild的第一步HTML不會很難的，回去看看小學的語文書，想想最本質的，多點問問自己“為什麼？”。和做人一樣，該是怎麼樣就應該怎麼樣，不應該被復雜的社會和繁瑣的人際關系干擾你，堅持做人腳踏實地的原則，踏踏實實地工作和做人，是金子總是要發光的。
引用內容
我有個怪癖。我很喜歡在面試的時候我總是要先考面試人XHTML。就好像以前師傅招收學徒一樣，能力和慧根屬其次，人品首當其沖。
我以為，XHTML好比一個人的本質，CSS好比人的處事方式和態度，JS好比人做事的行為以及作風。三者的分離再加上些周邊的SEO、人機交互也就是我們所說的網站重構，也就是一個很不錯的人。之前總是有一部分人認為CSS就是網站的最主要的元素，其實自然而然的也就代表了一種人生觀。的確，一個人沒有好的處事方式和態度很難在現在的社會很好的存活；但是這個處事的方式和態度位置過於偏重了，就成了一個善於欺騙、做事不擇手段的人。
引用范例
<h1>站點名稱</h1>*
<h2>站點副標</h2>*
<map><div><a href="#">連接1</a> <a href="#">連接2</a></div></map>
注：*號注釋部分為強調站點為推廣首要的時候用。
引用范例
<h1>站點名稱</h1>*
<h2>站點副標</h2>*
<h3>站點地圖導航菜單</h3>
<ul>
<li>連接1</li>
<li>連接2</li>
</ul>
注：*號注釋部分為強調站點為推廣首要的時候用。