11.14日(rì)音(yīn)訊,網站(zhàn)建≠¶✘設css布局構思和(hé)布局與模塊命名。最近(jìn)在思考怎麽完全脫離÷↓™(lí)視(shì)覺去(qù)思考結構，讓寫出來(lá♣≠∏i)的(de)結構更有(yǒu)語義？交互原型出來(lái)後，怎麽讓 &←前端結構和(hé)視(shì)覺設計(jì)同↕Ω時(shí)并行(xíng)？結構寫完可(kě)以先讓< £程序套模闆并且結構不(bù)會(huì)再修改？視(shì)覺設計(<☆↑πjì)出來(lái)後，前端寫樣式，寫完樣式鏈接到(dào)套好(h₩δǎo)的(de)模闆？
參考了(le)35王少(shǎo)峰↓'ε的(de)四方框架，他(tā)把結構層單獨拿(ná)出來♣∞(lái)，然後畫(huà)格子(zǐ)。我覺得(de)這(zhè)個(₹λε¥gè)思路(lù)很(hěn)好(hǎo)，布≈€≈局是(shì)屬于視(shì)覺的(de)，應該₹↑先定義好(hǎo)，免得(de)寫樣式的(de)時(shí)候再來(lái)修φλ改結構。我參考了(le)一(yī)下(xià)他(tā)的(d×<e)思想，并結合自(zì)己的(de)理(lǐ)解，談談布局↓→©♣層的(de)構思。
我們用(yòng)r表示行(xíng≤✔₽ )，并且清除浮動。為(wèi)每一(yī)行(↑♠xíng)添加索引，方便每一(yī)行(xíng)間(jiān)距的(₽≠φ©de)調節。
用(yòng)c表示列，并且左浮動。為(wèi)每₽€•♦一(yī)列添加索引，方便定義寬度和(hé)間♠ε(jiān)距。我們把r2分(fēn)成三列。
這(zhè)樣結構可(kě)以無限制(zhì)的(de ∞)分(fēn)下(xià)去(qù)，并且每一(yī)格都(dōu)有(yǒ∑ε≤u)唯一(yī)的(de)索引，可(kě)以方便✔∞§→的(de)來(lái)定義每一(yī)格的(de)布局。思路(lù)剛成型<≥↔，還(hái)得(de)拿(ná)幾個(gè)項目來(lái)嘗試看•≥(kàn)看(kàn)是(shì)否可(k↕¥ ≠ě)行(xíng)。
為(wèi)了(le)能(néng)更好(hǎo)的(de)分(fēn™ε∏¥)工(gōng)協作(zuò)，使用(yòng)模塊化(h$uà)來(lái)開(kāi)發，每個(gè)人(rén)負責一(yī"≥)個(gè)模塊，互不(bù)幹擾，下(xià)面簡要(yào)的(d£$e)說(shuō)說(shuō)模塊化(huà)的 ∏Ω™(de)構思。
所有(yǒu)頁面公用(yòng)頭部和(hé)尾部，這(zhè)兩部✔∞分(fēn)拿(ná)出來(lái)公用(yòng)，分(fēn)别用(yγòng)#h和(hé)#f命名，主體(tǐ)部分(fēn)每個(gè)頁面都(<φ&dōu)不(bù)同用(yòng)#b命名。.w代表公用(y₩₹→òng)的(de)寬度，如(rú)果是(shì)1280的(de)就(jiù)&定義.w{width:1280px;margin:0auto;}這(zhè<♥)樣全部的(de)都(dōu)能(néng)居中。
每個(gè)大(dà)塊再進行(xíng)細✘♦分(fēn)，.r表示行(xíng)，.c表示列，每一(yī)行(xí€←≈ng)每一(yī)列都(dōu)有(yǒu)唯一(yī≠≈π∑)的(de)索引，方便定義寬度和(hé)間(jiān)距。比如(rú)導航欄的≥<(de)布局可(kě)以用(yòng)選擇器(qìβ•÷)#h.r1.c2來(lái)定義寬度。.fl左浮動.fr右↕&浮動.clearfix清除浮動。
模塊外(wài)層
格子(zǐ)裡(lǐ)面再放(fàng)入模塊，模塊相($•&xiàng)互獨立不(bù)影(yǐng)響，使用(yòng)p<"↑↔hpinclude進來(lái)。同一(yī)個(gè)頁面相(xiàng)<≠同樣式的(de)可(kě)以為(wèi)模塊±±€定義class。單獨的(de)用(yòng)布局+模塊選擇器(qì)定義就&α•≥(jiù)可(kě)以了(le)。比如(rú≠δ♣)搜索#h.r2.c2.m1,就(jiù)不(bù)σπ用(yòng)為(wèi)模塊單獨想一(yī)個(gè)c$λlass，避免樣式沖突。
模塊內(nèi)層
模塊內(nèi)層結構再進行(xíng)細分(fēn)，頭部用(yòng₩∏×).h，主體(tǐ)部分(fēn)用(yòng).b，尾部用(yòn♦£g).t，跟大(dà)塊布局類似，隻是(shì)id換成cla∏ss。這(zhè)樣的(de)缺點是(shì)選擇器(qì)比較長(ch₩←&≠áng)，之後嘗試用(yòng)less或者sass看(kà∞$↔n)有(yǒu)沒有(yǒu)更簡便的(de)寫法。
