對于(yú)前端的(de)學習，我還是(shì)有些心得的(de)，畢竟學了(le／liǎo)很久的(de)html、css和(hé / huò)javascript。

  本文我想簡單的(de)講下關于(yú)div和(hé / huò)css的(de)網頁布局。整個(gè)寫作過程，内容安排，都是(shì)環環相扣的(de)，也(yě)是(shì)一(yī / yì ／yí)個(gè)曆史經驗的(de)歸納總結。

 如何怎麽做一(yī / yì ／yí)個(gè)簡易的(de)網頁，回顧其步驟：

  1、新建站點，在(zài)css文件中添加居中代碼。

  2、打開index.html，按照網頁的(de)六個(gè)組成部分，依次創建logo層、導航層、banner層、内容層、友情鏈接層、版權層

  3、在(zài)firework中切圖，在(zài)firework中，打開之(zhī)前做好的(de)網頁效果圖psd源文件。按照6大(dà)組成部分，進行切圖。作爲(wéi / wèi)初學者，可以(yǐ)先不(bù)考慮網頁中的(de)文字。（關于(yú)如何切圖下節講）

  4、在(zài)紙上(shàng)，記錄下每一(yī / yì ／yí)部分寬高具體的(de)尺寸。

  5、通過css控制面闆，對每個(gè)層進行定義，如它們的(de)寬、高，邊框、背景、填充、邊界等。定義的(de)時(shí)候，必須定義左浮動。

  6、預覽其效果，感受其作用。

  7、看其效果，對應的(de)去看代碼及其含義。

  相信有很多人(rén)會說(shuō)，你說(shuō)的(de)這(zhè)些我都明白，但是(shì)做的(de)時(shí)候還是(shì)力不(bù)從心。 這(zhè)就(jiù)是(shì)不(bù)動手的(de)原因。

  定義明白了(le／liǎo)，思路理清了(le／liǎo)，這(zhè)學習就(jiù)事半功倍，從而(ér)學習的(de)目的(de)就(jiù)達到(dào)了(le／liǎo)。我一(yī / yì ／yí)直說(shuō)，做好一(yī / yì ／yí)個(gè)網頁如果給10分，那麽理清思路就(jiù)已經得6分了(le／liǎo)。 想當年，我學習的(de)時(shí)候，就(jiù)是(shì)因爲(wéi / wèi)不(bù)知道(dào)做網頁的(de)思路，花費掉了(le／liǎo)兩年多的(de)時(shí)間。真正去做，用的(de)時(shí)間實在(zài)是(shì)太少了(le／liǎo)。思路理清楚了(le／liǎo)，克服細節的(de)問題，找百度就(jiù)好了(le／liǎo)。

  學習代碼最重要(yào / yāo)的(de)一(yī / yì ／yí)點就(jiù)是(shì)動手，代碼看的(de)再多，寫不(bù)出(chū)來(lái)，那麽知識就(jiù)不(bù)是(shì)你的(de)，這(zhè)個(gè)簡單的(de)道(dào)理我們應該都懂。