網(wǎng)頁(yè)制作,轉(zhuǎn)變你的思維方式

“重構(gòu)”的東風(fēng)吹遍大江南北，互聯(lián)網(wǎng)臨時(shí)間土崩瓦解，“div+CSS”儼然已成為一種“時(shí)尚”，難以盡數(shù)的網(wǎng)站都不謀而合地開(kāi)始了本身的“重構(gòu)”。然而打開(kāi)這形形色色網(wǎng)站的源代碼，卻時(shí)常令人啞然發(fā)笑——

我們看到有嵌套6、7層的div布局，有不消table的表格，有純div+a構(gòu)成的頁(yè)面，有成百上千的體現(xiàn)層class……如今關(guān)于尺度的冊(cè)本越來(lái)越多，除了少數(shù)幾本標(biāo)榜“高級(jí)本領(lǐng)”的冊(cè)本以外，很少有人不會(huì)在本身著作的前幾章夸大如許一句話(huà)——“布局與體現(xiàn)分散”。然而這些冊(cè)本的讀者們，又有幾多人認(rèn)認(rèn)真真地讀過(guò)前幾章呢？照舊更多地直接跳過(guò)那些乏味的布局解說(shuō)，一頭扎到貌似高妙的布局本領(lǐng)與Hack中去？

實(shí)在div+CSS這個(gè)說(shuō)法從一開(kāi)始就誤導(dǎo)了太多的人，急功近利的心態(tài)則更是造成這種征象的罪魁罪魁。一個(gè)風(fēng)俗了table布局的網(wǎng)頁(yè)制作打仗尺度的第一步，不該該是去盲目尋求實(shí)現(xiàn)種種布局的CSS本領(lǐng)，而是高興轉(zhuǎn)變本身的頭腦方法。

下面將聯(lián)合我的親身領(lǐng)談判一談適應(yīng)尺度的頭腦方法，此中有不少是我曾經(jīng)走過(guò)的彎路，盼望對(duì)方才打仗尺度的XDJM們有些資助：

1、“節(jié)流代碼”是營(yíng)銷(xiāo)本領(lǐng)，不是宗旨

“利用div布局可以比table布局節(jié)流更多的代碼”，我在很多冊(cè)本和網(wǎng)站上見(jiàn)到過(guò)這句話(huà)。這句話(huà)本身是沒(méi)錯(cuò)的，可以“節(jié)流代碼”簡(jiǎn)直是網(wǎng)頁(yè)尺度化所帶來(lái)的利益之一。然而牢記，它只是“利益之一”，而不是“唯一利益”，更不是宗旨。“節(jié)流代碼”更多的時(shí)間是我們用來(lái)說(shuō)服那些至死不悟的老板的營(yíng)銷(xiāo)本領(lǐng)。網(wǎng)頁(yè)尺度化的唯一宗旨是“布局與體現(xiàn)分散”，而絕不是為了節(jié)流代碼而節(jié)流代碼。我曾經(jīng)過(guò)于網(wǎng)站邊欄乃至主體內(nèi)容的體現(xiàn)情勢(shì)雷同而接納了同一的class （至今另有一些書(shū)是如許教的），如許簡(jiǎn)直比分別定名id更節(jié)流代碼，然而如許做的價(jià)錢(qián)是代碼失去了精良的布局。失去精良布局的結(jié)果是：一、源代碼沒(méi)有了可讀性；二、網(wǎng)站增加了未知的維護(hù)本錢(qián)。試想，當(dāng)某一塊內(nèi)容由于必要而作出體現(xiàn)情勢(shì)的變更，比方鏈接的顏色等等，我們就不得不去修改頁(yè)面源文件，增加分外的class，事情量比起只必要調(diào)解id分組就大了很多。并且長(zhǎng)此以往，布局將會(huì)越來(lái)越差，形成難以逆轉(zhuǎn)的惡性循環(huán)。

另有一種環(huán)境，出如今id的定名方面，也是本人曾經(jīng)犯過(guò)的錯(cuò)誤。當(dāng)時(shí)為了“節(jié)流代碼”，而把主菜單定名為“mm”，二級(jí)菜單定名為“m2”，三級(jí)菜單為“m3”，結(jié)果嚴(yán)峻低落了網(wǎng)頁(yè)的可讀性，使其他同事很難接辦，圖省事卻累了本身。同理，文件及文件夾定名方面也不宜過(guò)簡(jiǎn)，象《網(wǎng)站重構(gòu)》里發(fā)起把圖片都用“i”目次存放，小我私家以為并不行取，除非你能為這種高度縮寫(xiě)的目次布局撰寫(xiě)細(xì)致闡明并包管每個(gè)相干職員包羅其他制作職員、開(kāi)辟、乃至懂行的老板……都能明白和實(shí)行，不然只會(huì)給你本身增加不必要的貧苦。

2、ID是偷襲槍?zhuān)琧lass是雙刃劍

想要做好網(wǎng)頁(yè)布局，id與class都是必須純熟掌握的，所謂“兩手抓，兩手都要硬”。ID就象偷襲槍一樣，可以資助我們精準(zhǔn)地定位要想要加載樣式的元素；而class則是俠客的佩劍，信手拈來(lái)越發(fā)輕巧靈巧，兩者的聯(lián)合可以大概實(shí)現(xiàn)布局精良且體現(xiàn)富厚的頁(yè)面。然而如今有一種錯(cuò)誤的看法，便是id完全可以用class來(lái)代替，究竟上很多網(wǎng)頁(yè)源代碼也簡(jiǎn)直云云，打開(kāi)來(lái)通篇class，找不到一個(gè)id。造成這種征象的來(lái)由有很多種，然而自table期間傳下來(lái)的根深蒂固的“class=CSS”的看法才是本因。簡(jiǎn)直，class比id用途更廣更機(jī)動(dòng)，但也必須意識(shí)到，class對(duì)付構(gòu)建精良的網(wǎng)頁(yè)布局遠(yuǎn)不如id有用。id的逼迫唯一性使得我們可以很容易通過(guò)id檢索到我們必要的恣意模塊，而class則沒(méi)有這個(gè)上風(fēng)。固然我們可以為模塊界說(shuō)唯一的class名，但條件是——只有制作者本人可以動(dòng)網(wǎng)頁(yè)樣式。不然換一個(gè)輕微懶一些店員，看到樣式雷同便直接把前面的class拿來(lái)套用，其結(jié)果便是我們發(fā)明網(wǎng)頁(yè)里有十幾個(gè)模塊都叫做“gonggao”大概“xinwen”，以至于為了區(qū)分還不得不加上大量的html解釋?zhuān)缭S的結(jié)果顯然并不是我們想要的。再者便是前面提到的，通過(guò)通用class所節(jié)流下來(lái)的代碼，又不得不在每個(gè)單獨(dú)界說(shuō)的class中浪費(fèi)失。

ID是偷襲槍?zhuān)琧lass是雙刃劍，合則兩利，分則兩敗。

3、并不是全部的內(nèi)容都必要div做“容器”

　　主菜單究竟是用