站在DIV+CSS的頂端
作為一個(gè)程序員，不能只學(xué)習(xí)技術(shù)，適當(dāng)?shù)臅r(shí)候需要站的高一點(diǎn)，這樣才能看的更遠(yuǎn)，才會(huì)取得更高的成就！
如果你是做Web開(kāi)發(fā)的，那么DIV+CSS將是我們學(xué)習(xí)的基礎(chǔ)，很多人認(rèn)為DIV+CSS很簡(jiǎn)單，的確如此，一個(gè)好的程序員，幾乎可以模仿出所有顯示的網(wǎng)頁(yè)，并實(shí)現(xiàn)非常炫的頁(yè)面特效，給人耳目一新的感覺(jué)，我也經(jīng)常為能夠看到一個(gè)漂亮的網(wǎng)頁(yè)而興奮。但是如果學(xué)習(xí)停留的層次僅限于此，那么除了做一個(gè)碼工還能干什么呢！
全局思考問(wèn)題的意識(shí)
任何頁(yè)面設(shè)計(jì)首先要做的就是用DIV設(shè)計(jì)框架，例如考慮頁(yè)面整體上應(yīng)該是什么樣子的結(jié)構(gòu)，是上、中、下三層，還是左、中、右三層，又或者只有其中的一部分等等。
- <div style="border:1px solidred;margin:1px;height:100px;">這是top部分</div>
- <div style="border:1px solidred;margin:1px;height:500px;">這是middle部分</div>
- <div style="border:1px solidred;margin:1px;height:100px;">這是bottom部分</div>
- <div style="border:1px solidred;margin:1px;width:200px;float:left;">這是left部分</div>
- <div style="border:1px solidred;margin:1px;width:400px;float:left;">這是center部分</div>
- <div style="border:1px solidred;margin:1px;width:200px;float:left;">這是right部分</div>
盡管這已經(jīng)成為了所有Web開(kāi)發(fā)人員做網(wǎng)頁(yè)的第一步，并且在此道路上混跡江湖很多年，但是這其中的智慧并不是所有人都會(huì)思考的?？蚣芤笤O(shè)計(jì)者有站在高處的思維，能夠從全局的角度思考問(wèn)題，而不是一味的在一個(gè)層次上勇往直前，否則你的設(shè)計(jì)將是眉毛胡子一把抓，既沒(méi)有清晰整體的架構(gòu)也沒(méi)有明確的細(xì)節(jié)處理！
找到共同之處
完成DIV的框架設(shè)計(jì)之后，通常需要將頁(yè)面元素進(jìn)行分類，這樣對(duì)頁(yè)面樣式的修改將會(huì)變得非常方便，比如常見(jiàn)的CSDN左側(cè)的博客欄目都有他們共同的樣式，這樣當(dāng)我們修改樣式的時(shí)候，就可以盡可能的保證頁(yè)面樣式的統(tǒng)一，避免因樣式不同而導(dǎo)致頁(yè)面不堪入目！
按照這種方式，針對(duì)上述的DIV代碼，我們可以將它的公有成分抽象出來(lái)形成類，而在每個(gè)div塊中保留他們的不同部分，代碼如下
- <div class="style1" style="height:100px;">這是top部分</div>
- <div class="style1"style="height:500px;">這是middle部分</div>
- <div class="style1"style="height:100px;">這是bottom部分</div>
- <div class="style1"style="width:200px;float:left;">這是left部分</div>
- <div class="style1"style="width:400px;float:left;">這是center部分</div>
- <div class="style1"style="width:200px;float:left;">這是right部分</div>
其中提出的公有成分放在CSS文件中，具體如下：
- .style1{
- <SPAN style="WHITE-SPACE: pre"> </SPAN>border:1pxsolid red;
- <SPAN style="WHITE-SPACE: pre"> </SPAN>margin:1px;
- }
對(duì)于Web開(kāi)發(fā)者來(lái)說(shuō)，公有部分的抽取是菜鳥(niǎo)和大鳥(niǎo)區(qū)別的重要部分！這種思考方式放在學(xué)習(xí)上就是：將我們未學(xué)過(guò)的放在學(xué)過(guò)的基礎(chǔ)上進(jìn)行，這其中的智慧，對(duì)于你我而言其實(shí)比學(xué)習(xí)很牛技術(shù)更值得推崇！
再牛的技術(shù)也是看的見(jiàn)、摸得著的，只要想學(xué)、沒(méi)有學(xué)不會(huì)的！但是思想的凝練卻并不是誰(shuí)都能做的，所以多思考、總結(jié)學(xué)習(xí)經(jīng)驗(yàn)、提煉其中的方法才是各位讀者進(jìn)步的捷徑！
原文鏈接：http://blog.csdn.net/zs15932616453/article/details/7823956
【編輯推薦】
