Div CSS布局應(yīng)該注重語義、注重代碼的重用性!_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
普通的一個(gè)頁面無非就是HTML以及CSS和JS等腳本組成,相對(duì)以前來說,大家都是用表格(table)來實(shí)現(xiàn)頁面的布局,而現(xiàn)在呢,追求的是用層(div)來布局了。很多朋友說用層(div)布局跟用表格(table)布局的差別很大,這個(gè)我同意,因?yàn)楸砀瘢╰able)是用來體現(xiàn)二維數(shù)據(jù)的。但是既然我們以前能用,而且一直在用,也就說明表格(table)布局還是可以的。但是為什么我們現(xiàn)在要用用層(div)來布局呢?因?yàn)槲覀円孒TML的每個(gè)標(biāo)簽都能在語義上很好的體現(xiàn)出來,即使看源代碼也能很明了它的作用。
想想以前,什么CSS樣式、什么HTML代碼都不管,只要能在FrontPage或者DreamWeaver上制作出頁面上要體現(xiàn)的效果就可以了。而現(xiàn)在呢,大家放棄了FrontPage,為什么?因?yàn)镕rontPage會(huì)產(chǎn)生很多無用的代碼,影響代碼的可讀性。既然注重到了這點(diǎn),那么現(xiàn)在的重構(gòu),標(biāo)準(zhǔn),是為了什么呢,還不是為了在代碼上的一個(gè)可讀性嗎?
都說重構(gòu)后的站是要把表現(xiàn)和結(jié)構(gòu)分離,那把所有表現(xiàn)跟結(jié)構(gòu)都分離就完事了嗎?不!我們還要把表現(xiàn)的內(nèi)容利用,而且是反復(fù)利用,不是用過一次就不要了。假如把要表現(xiàn)的內(nèi)容當(dāng)做一次性筷子用過一次后就不要了,那重構(gòu)你的站點(diǎn)似乎意義不大,反而讓你的樣式文件變多變大。要把表現(xiàn)的內(nèi)容反復(fù)利用起來,在結(jié)構(gòu)上要做的事情也將影響到樣式的調(diào)用,而且假如能將每個(gè)結(jié)構(gòu)的語義用很貼切的標(biāo)簽來體現(xiàn),那對(duì)源代碼的可讀性也是一個(gè)很大的提升。
曾經(jīng)看過一位朋友重構(gòu)后的站點(diǎn),他是一個(gè)<div></div>將頁面所有的內(nèi)容都包含在里面,當(dāng)時(shí)我就在想,這樣做有什么意義呢?是不是跟當(dāng)初的用一個(gè)<table></table>將頁面的所有內(nèi)容包含在里面一樣呢?這樣做并不是說不可以,也并沒有錯(cuò),只是我們?cè)诮Y(jié)構(gòu)上并不需要這樣做,不是嗎?一般最常見的是上(頭部)中(內(nèi)容)下(版權(quán)信息)三個(gè)部分,相對(duì)這樣的,我們可以用三個(gè)<div></div>來實(shí)現(xiàn)。
相對(duì)這樣來說,總比<div></div>一個(gè)大大的框來約束內(nèi)容來得強(qiáng)。
最后要說一下的就是,現(xiàn)在瀏覽器不統(tǒng)一,支持的內(nèi)容不同,雖然我們可以用hack的方法來實(shí)現(xiàn)我們要的東西,不過我們?yōu)槭裁床簧宰鳇c(diǎn)犧牲呢。假如對(duì)版面的影響不大的話,是否可以放棄使用hack的方法呢?難道你的客戶會(huì)去用不同的瀏覽器看看效果做對(duì)比嗎?hack用得多了,只會(huì)對(duì)后期的修改上帶來麻煩。
按飛飛說的,偶這里都是P話,總結(jié)可以是一句話:那就是要注重語義。注重代碼的重用性。
表達(dá)能力不行,大家請(qǐng)勿見怪。沒寫過啥東西。
想想以前,什么CSS樣式、什么HTML代碼都不管,只要能在FrontPage或者DreamWeaver上制作出頁面上要體現(xiàn)的效果就可以了。而現(xiàn)在呢,大家放棄了FrontPage,為什么?因?yàn)镕rontPage會(huì)產(chǎn)生很多無用的代碼,影響代碼的可讀性。既然注重到了這點(diǎn),那么現(xiàn)在的重構(gòu),標(biāo)準(zhǔn),是為了什么呢,還不是為了在代碼上的一個(gè)可讀性嗎?
都說重構(gòu)后的站是要把表現(xiàn)和結(jié)構(gòu)分離,那把所有表現(xiàn)跟結(jié)構(gòu)都分離就完事了嗎?不!我們還要把表現(xiàn)的內(nèi)容利用,而且是反復(fù)利用,不是用過一次就不要了。假如把要表現(xiàn)的內(nèi)容當(dāng)做一次性筷子用過一次后就不要了,那重構(gòu)你的站點(diǎn)似乎意義不大,反而讓你的樣式文件變多變大。要把表現(xiàn)的內(nèi)容反復(fù)利用起來,在結(jié)構(gòu)上要做的事情也將影響到樣式的調(diào)用,而且假如能將每個(gè)結(jié)構(gòu)的語義用很貼切的標(biāo)簽來體現(xiàn),那對(duì)源代碼的可讀性也是一個(gè)很大的提升。
曾經(jīng)看過一位朋友重構(gòu)后的站點(diǎn),他是一個(gè)<div></div>將頁面所有的內(nèi)容都包含在里面,當(dāng)時(shí)我就在想,這樣做有什么意義呢?是不是跟當(dāng)初的用一個(gè)<table></table>將頁面的所有內(nèi)容包含在里面一樣呢?這樣做并不是說不可以,也并沒有錯(cuò),只是我們?cè)诮Y(jié)構(gòu)上并不需要這樣做,不是嗎?一般最常見的是上(頭部)中(內(nèi)容)下(版權(quán)信息)三個(gè)部分,相對(duì)這樣的,我們可以用三個(gè)<div></div>來實(shí)現(xiàn)。
示例代碼 [hl5o.cn]
<div id=”pageTop”></div>
<div id=”pageContent”></div>
<div id=”pageBottom”></div>
<div id=”pageContent”></div>
<div id=”pageBottom”></div>
相對(duì)這樣來說,總比<div></div>一個(gè)大大的框來約束內(nèi)容來得強(qiáng)。
最后要說一下的就是,現(xiàn)在瀏覽器不統(tǒng)一,支持的內(nèi)容不同,雖然我們可以用hack的方法來實(shí)現(xiàn)我們要的東西,不過我們?yōu)槭裁床簧宰鳇c(diǎn)犧牲呢。假如對(duì)版面的影響不大的話,是否可以放棄使用hack的方法呢?難道你的客戶會(huì)去用不同的瀏覽器看看效果做對(duì)比嗎?hack用得多了,只會(huì)對(duì)后期的修改上帶來麻煩。
按飛飛說的,偶這里都是P話,總結(jié)可以是一句話:那就是要注重語義。注重代碼的重用性。
表達(dá)能力不行,大家請(qǐng)勿見怪。沒寫過啥東西。
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-Div CSS布局應(yīng)該注重語義、注重代碼的重用性!
。