站在DIV+CSS的頂端
作為一個程序員，不能只學習技術，適當的時候需要站的高一點，這樣才能看的更遠，才會取得更高的成就！
如果你是做Web開發的，那么DIV+CSS將是我們學習的基礎，很多人認為DIV+CSS很簡單，的確如此，一個好的程序員，幾乎可以模仿出所有顯示的網頁，并實現非常炫的頁面特效，給人耳目一新的感覺，我也經常為能夠看到一個漂亮的網頁而興奮。但是如果學習停留的層次僅限于此，那么除了做一個碼工還能干什么呢！
全局思考問題的意識
任何頁面設計首先要做的就是用DIV設計框架，例如考慮頁面整體上應該是什么樣子的結構，是上、中、下三層，還是左、中、右三層，又或者只有其中的一部分等等。
- <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>
盡管這已經成為了所有Web開發人員做網頁的第一步，并且在此道路上混跡江湖很多年，但是這其中的智慧并不是所有人都會思考的。框架要求設計者有站在高處的思維，能夠從全局的角度思考問題，而不是一味的在一個層次上勇往直前，否則你的設計將是眉毛胡子一把抓，既沒有清晰整體的架構也沒有明確的細節處理！
找到共同之處
完成DIV的框架設計之后，通常需要將頁面元素進行分類，這樣對頁面樣式的修改將會變得非常方便，比如常見的CSDN左側的博客欄目都有他們共同的樣式，這樣當我們修改樣式的時候，就可以盡可能的保證頁面樣式的統一，避免因樣式不同而導致頁面不堪入目！
按照這種方式，針對上述的DIV代碼，我們可以將它的公有成分抽象出來形成類，而在每個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;
- }
對于Web開發者來說，公有部分的抽取是菜鳥和大鳥區別的重要部分！這種思考方式放在學習上就是：將我們未學過的放在學過的基礎上進行，這其中的智慧，對于你我而言其實比學習很牛技術更值得推崇！
再牛的技術也是看的見、摸得著的，只要想學、沒有學不會的！但是思想的凝練卻并不是誰都能做的，所以多思考、總結學習經驗、提煉其中的方法才是各位讀者進步的捷徑！
原文鏈接：http://blog.csdn.net/zs15932616453/article/details/7823956
【編輯推薦】
