特地上網(wǎng)搜索了一下,關(guān)于div,說法很多。
把div看成是布局元素這種觀點(diǎn)我想是更多的,類似有“用div代替table進(jìn)行布局”、“實(shí)戰(zhàn)CSS+DIV布局”等等等等,太多了,還有不少人延用Dreamweaver的定義,稱div為層,按Photoshop的層的概念來應(yīng)用……有朋友干脆就直接稱div和span為幫助布局元素。
怎么說呢?固然我很想說對(duì)div類似的這種熟悉是錯(cuò)誤的,div不是一個(gè)布局元素,沒有一個(gè)tag是用來布局的,但是我是對(duì)的嗎?我也不知道。幾乎所有人對(duì)div的宣傳都是布局,不管是‘民間’的還是‘官方’的,但是假如我們找根源,中文中,div是一個(gè)結(jié)構(gòu)化標(biāo)簽,是一個(gè)塊級(jí)元素。好吧,我們首先看看div擁有的語義,division(分隔),按語義它的作用是將兩個(gè)部分分隔開來。然后我們?cè)倩氐絯3往看看怎么定義div和span的:The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.
留心到我上面加粗的一句話了嗎?W3可沒說是 for layout,而是for structure,是結(jié)構(gòu)!由于分隔從而產(chǎn)生(定義)一個(gè)代碼結(jié)構(gòu)。我想,結(jié)構(gòu)和布局應(yīng)當(dāng)是兩個(gè)概念吧。或許,由于table確實(shí)被用于布局了,所以這種根深蒂固的布局思路又自然而然的轉(zhuǎn)嫁到div上,我曾在很長一段時(shí)間里也是這么懂得的。但是,現(xiàn)在我要說,這盡對(duì)是一個(gè)錯(cuò)誤并且,這是更度嚴(yán)重的錯(cuò)誤!??!這純粹個(gè)人觀點(diǎn)個(gè)人懂得,自己取舍好了。
為什么嚴(yán)重?懂得的錯(cuò)誤直接導(dǎo)致的就是應(yīng)用的錯(cuò)誤。由于假如按照這個(gè)思路,把div作為布局元素應(yīng)用,那么我認(rèn)為:
你永遠(yuǎn)無法固定xhtml!永遠(yuǎn)陷在css的怪圈中!永遠(yuǎn)不會(huì)往思考和懂得結(jié)構(gòu)!永遠(yuǎn)擦不干凈table烙下的痕跡!永遠(yuǎn)無法接近神(同床異夢(mèng)的神哈,呵呵)……
或許把div稱為布局元素還是為了更好的推行尺度,但是卻將人們從一個(gè)錯(cuò)誤帶向了另一個(gè)錯(cuò)誤。兩年前我剛接觸尺度時(shí)就在《重構(gòu)之美》前幾篇中困惑過關(guān)于改版的事情,固然隨著懂得的深進(jìn)似乎有了突破,在我寫下xhtml后不變動(dòng),然后通過css的技巧來完成新版面。比如像**的csszengarden。但是很快我又有新的困惑,一個(gè)人這樣做似乎沒什么標(biāo)題,團(tuán)隊(duì)呢?比如假如同樣的內(nèi)容,設(shè)計(jì)成兩個(gè)版式,然后交給不同的兩個(gè)人來寫xhtml,會(huì)一樣嗎?就像假如把csszengarden的情勢(shì)顛倒一下,基于同一份數(shù)據(jù)先做好100個(gè)設(shè)計(jì)稿,讓100個(gè)人按照這個(gè)設(shè)計(jì)稿寫100份xhtml,會(huì)一樣嗎?我想按照div布局模式,對(duì)于同樣的版式,不同人不同的頁面分析都會(huì)產(chǎn)生不同的xhtml,更何況不同的版式呢?但是既然表現(xiàn)與結(jié)構(gòu)無關(guān),那么同樣的內(nèi)容不應(yīng)當(dāng)有2份以上的xhtml。不要小看這個(gè)標(biāo)題,對(duì)于團(tuán)隊(duì)中前后臺(tái)的有效分別與快速協(xié)同,這是關(guān)鍵!我在培訓(xùn)中提出一個(gè)觀點(diǎn):更幻想的境界是前臺(tái)閉著眼睛都能知道后臺(tái)輸出的是什么樣的xhtml結(jié)構(gòu)代碼。那么標(biāo)題出在哪里?div布局!尤其是在懂得了h系列標(biāo)簽不公平之后,領(lǐng)會(huì)更深進(jìn)。
上篇文章我提出的關(guān)于結(jié)構(gòu)應(yīng)當(dāng)分為兩種:語義結(jié)構(gòu)和代碼結(jié)構(gòu)。懂得了這兩個(gè)結(jié)構(gòu)之后,那么div的用處就比擬明朗了,稍稍動(dòng)動(dòng)頭腦就能想到,用于組織代碼結(jié)構(gòu)。所以hx標(biāo)簽的標(biāo)題我認(rèn)為經(jīng)典呢,不要說html了,即便對(duì)于xhtml,大部分的人關(guān)心的還是如何表現(xiàn),小部分人關(guān)心語義結(jié)構(gòu),很少人往關(guān)心代碼結(jié)構(gòu),似乎xml有了,xhtml就不需要代碼結(jié)構(gòu)了。但是從hx系列的標(biāo)題可以看出并延伸知道W3可一直在關(guān)心代碼結(jié)構(gòu),從1.0,1.1直到2.0,一直盼看xhtml擁有xml般嚴(yán)謹(jǐn)?shù)拇a結(jié)構(gòu)。說到這里再多看xhtml 2.0的另一個(gè)變更,br不再被推薦,應(yīng)當(dāng)很好懂得了,br的語義是產(chǎn)生一個(gè)截?cái)啵╞reak),但實(shí)記凹各用是產(chǎn)生一個(gè)行,語義結(jié)構(gòu)上仍不完善,所以應(yīng)用line進(jìn)行調(diào)換<line>this is one line</line>。同樣br也無代碼結(jié)構(gòu)可言,假如我想提取第三行的數(shù)據(jù)如何把持?所以很有可能類似br、hr這類標(biāo)簽都將被放棄。我揣摩著,xhtml1.x是W3清算表現(xiàn),將人們往語義結(jié)構(gòu)[Semantic]的方向牽引,而xhtml 2.0則是展現(xiàn)和突出代碼結(jié)構(gòu)[structure]。呵呵,您說我揣摩得對(duì)嗎?瞎猜瞎猜。^_^
回過火來,那么怎么組織?首先對(duì)于一個(gè)設(shè)計(jì)稿,必定要不被設(shè)計(jì)所困惑和左右,只提取看得見和看不見的數(shù)據(jù),然后就扔掉設(shè)計(jì)稿,先完成數(shù)據(jù)的語義結(jié)構(gòu),再添加代碼結(jié)構(gòu)(adding structure to documents.),完成xhtml后,更后一步才是重新拾起設(shè)計(jì)稿打開css,還原。當(dāng)然實(shí)記凹個(gè)的時(shí)候不可能不看設(shè)計(jì)稿,但是怎么看?只提數(shù)據(jù)!再說一點(diǎn),數(shù)據(jù)在文檔中的先后次序由什么定?當(dāng)然是由文檔而定,不是由設(shè)計(jì)稿所定。舉個(gè)例子,假如有兩個(gè)欄目,消息頭條和普通消息。誰在前誰在后,很顯然在文檔中應(yīng)當(dāng)是頭條在前普通在后,這是由UE(用戶體驗(yàn))和欄目輕重的綜合考慮決定。但是按照div布局的話,是按照設(shè)計(jì)稿上前下后左前右后的次序來決定的,那么假如設(shè)計(jì)稿中將普通消息欄目設(shè)計(jì)在左欄,頭條設(shè)計(jì)在中欄,文檔中普通消息就跑到頭條消息上面往了。所以我打開一個(gè)Web尺度站點(diǎn)文檔瀏覽,假如文檔的先后次序是按照頁面布局上前下后,左前右后的次序而定的,那么我……特例一點(diǎn),假如一個(gè)單屏設(shè)計(jì)的網(wǎng)站,標(biāo)題和導(dǎo)航設(shè)計(jì)在頁面下方,那你的文檔豈不是更下面才是標(biāo)題和導(dǎo)航,這是什么UE?這不是扯蛋嘛。div,div布局的惡果——文檔結(jié)構(gòu)仍然在為表現(xiàn)所左右!同床異夢(mèng)!!
代碼結(jié)構(gòu)怎么做?大處按照上篇文章所寫,用h系列劃分大結(jié)構(gòu)。那么小處呢?這里就要牽涉進(jìn)div的另外一個(gè)概念:塊級(jí)元素。什么塊?模塊!用div模塊化小處。舉例:
<div>
<h3><span>用戶登陸</span></h3>
<div>
<label for="name">用戶名</label>
<input />
</div>
<div>
<label for="pw">密碼</label>
<input />
</div>
<p><button /></p>
</div>
這個(gè)在[復(fù)雜表單]中提到過的例子,我們來具體分析div在小處如何模塊化應(yīng)用。實(shí)在很簡(jiǎn)略,h3/lable/p是語義結(jié)構(gòu),然后,對(duì)于用戶名和相應(yīng)的輸進(jìn)框顯然是不可分割的整體,那么好了,div將其標(biāo)識(shí)為一個(gè)塊,對(duì)應(yīng)的密碼部分同理。更后,兩者一起與標(biāo)題和按鈕又構(gòu)成一個(gè)不可分割的登陸整體,div之。這樣擁有很好的語義結(jié)構(gòu)和代碼結(jié)構(gòu)。好的代碼結(jié)構(gòu)不**可以便于固定xhtml,便于程序把持節(jié)點(diǎn),還對(duì)css供給了很高的自由度。如上例結(jié)構(gòu),我只需要給更外div一個(gè)class,比如"loginarea"。那么:
我可以這么按節(jié)點(diǎn)/路徑層層定義下往:.loginarea label{} .loginarea input{} .loginarea div label{} .loginarea div input。假如我需要橫向登陸,只需要定義一個(gè)關(guān)鍵點(diǎn):.loginarea div{float: left},假如縱向則往掉這個(gè)關(guān)鍵點(diǎn),模塊化的登陸就這么簡(jiǎn)略。這樣還可以省寫不少class,尤其對(duì)于有些看似復(fù)雜的結(jié)構(gòu)實(shí)在模塊化設(shè)計(jì)好了,模塊內(nèi)部是簡(jiǎn)略的,一個(gè)路徑定義過往,基本無需class還不會(huì)引起樣式?jīng)_突和干擾,css的可讀性也很好。當(dāng)然這里會(huì)涉及到css的技巧,我認(rèn)為css的技巧更重要的就是分析頁面,頁面分析的好,寫出來的css簡(jiǎn)略明了充分利用tag還有多以備擴(kuò)大,否則class一大堆復(fù)雜冗長還會(huì)感到tag不夠用又往添加損壞結(jié)構(gòu)。復(fù)雜表單那套系統(tǒng)的css我寫了48k,還未做更后優(yōu)化,全部圖片總共只有5K,還全是無損PNG格局。整套系統(tǒng)幾十個(gè)大模塊,又有無限級(jí)菜單、樹、頁簽、彈出,復(fù)雜表單,合同,frame,iframe,報(bào)表,控件套控件等等亂七八糟什么都有,css加圖片全部表現(xiàn)部分可以做到50K以內(nèi)。這個(gè)項(xiàng)目四個(gè)程序員一起開發(fā)我一個(gè)人更所有前臺(tái),三個(gè)月時(shí)間,程序員不管任何有關(guān)表現(xiàn)部分,我都是玩玩做做就搞定了。中后期,臨著交付客戶時(shí)候我還感到公司供給的設(shè)計(jì)不好,又自己花1天重新設(shè)計(jì),花不到2天另外寫了一個(gè)css,全部系統(tǒng)全變了且以前的設(shè)計(jì)未喪失。功效不變的情況下界面大換,再大的系統(tǒng)也不過一個(gè)人幾天時(shí)間,且程序員不用管。這就是Web尺度的威力之一!(由于是內(nèi)網(wǎng)利用,所以我?guī)缀鯖]考慮和照顧瀏覽器兼容性,沒必要,也是快的一個(gè)因素)
所以我認(rèn)為當(dāng)前各大網(wǎng)站上以各種方法事先列出什么單行一列,兩行一列諸如此類的幾行幾列的div+css布局代碼,不好說他們不對(duì),你完整可以往懂得是如何應(yīng)用css實(shí)現(xiàn)幾行幾列的布局,然后公平應(yīng)用到自己的結(jié)構(gòu)上。但是假如你按照他供給的代碼往套、往添加內(nèi)容,那么你就錯(cuò)了。不過話說回來,在被一篇一篇標(biāo)題著斗大的“布局”兩個(gè)字的潛移默化下,您還有心思往關(guān)心結(jié)構(gòu)嗎?所以很多都往揣摩css了,所以這些善意的Web尺度推廣者還是有錯(cuò)的,包含我在內(nèi),我2004年撰寫的《重構(gòu)之美》代碼示例部分帶有更大的誤導(dǎo)性(好在當(dāng)初我一再夸張代碼毫無鑒戒的意義,也算在文字上有所補(bǔ)充)?,F(xiàn)在呢?我也不知道,在路上,在路上……
寫很多了,span的公平應(yīng)用留給Update吧。
深進(jìn)CSS結(jié)構(gòu):公平應(yīng)用div和span,希望對(duì)您有參考價(jià)值。
查看更多寧波網(wǎng)站建設(shè)公平結(jié)構(gòu)CSS