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

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

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

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

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

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

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

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

2、ID是偷襲槍，class是雙刃劍

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

ID是偷襲槍，class是雙刃劍，合則兩利，分則兩敗。

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

　　主菜單究竟是用