對(duì)于前端的(de)學習(xí)，我還(hái)是(shì)有(yǒu)些(xiē)心得(de)的(d‍e)，畢竟學了(le)很(hěn)久的(de)html、css和(hé)javascript。

  本文(wén)我想簡單的(de)講下(xià)關于div和(hé)css的(de)網頁✔布局。整個(gè)寫作(zuò)過程，內(nèi)容安排，都(dōu)是(shì)環環相(xiàng)扣的(de)，也(yě)是(shì)一(yī)個(gè)曆史經驗的(de)歸納總結。♥

 如(rú)何怎麽做(zuò)一(yī)個(gè)簡易的(de)網頁，回顧其步驟：

  1、新建站(zhàn)點，在css文(wén)件(jiàn)中添加居中代碼。

  2、打開(kāi)index.html，按照(zhào)網頁的(de)六個(gè)組成₩部分(fēn)，依次創建logo層、導航層、banner層、內(nèi)容層、友(yǒu)情鏈接層、版權層

  3、在firework中切圖，在firework中，打開(kāi)之前做(zuò)好(hǎo)的(de)網頁效果圖psd源文(&wén)件(jiàn)。按照(zhào)6大(dà)組成部分(fēn)，進行(xíng)切圖。作(zuò)為(wèi)初學者，可(kě)以先不(bù)考慮網頁中的(×de)文(wén)字。（關于如(rú)何切圖下(xià)節講）

  4、在紙(zhǐ)上(shàng)，記錄下(xià)每一(yī)部分(fēn)寬高(gāo)具體(tǐ)的(de)尺寸。

  5、通(tōng)過css控制(zhì)面闆，對(duì)每個(gè)層進行(xíng)定義，如(rú)它們的(de)寬、高(gāo)，邊框、背景、填充、邊界等。定義的(de)時'(shí)候，必須定義左浮動。

  6、預覽其效果，感受其作(zuò)用(yòng)。

  7、看(kàn)其效果，對(duì)應的(de)去(qù)看(kàn)代碼及其含義。

  相(xiàng)信有(yǒu)很(hěn)多(duō)人(rén)會(huì)說(shuō)，你(nǐ)說(shuō)的(de)這(zhè)些(xiē)我都(dōu)明(míng)π白(bái)，但(dàn)是(shì)做(zuò)的(de)時(shí)候還(hái)是(shì)力不(bù)從(c₩óng)心。 這(zhè)就(jiù)是(shì)不(bù)動手的(de)原因。

  定義明(míng)白(bái)了(le)，思路(lù)理(lǐ)清了(le)，這(zhè)學習(xí)就(jiù)事(shì)半功倍，從(cóng)™而學習(xí)的(de)目的(de)就(jiù)達到(dào)了(le)。我一(yī)直說(shuō)，做‍(zuò)好(hǎo)一(yī)個(gè)網頁如(rú)果給10分(fēn)，那(nà)麽理(lǐ)清思路(lù)就(jiù)已經得(de)6分(fēn)了(le)。 想當年♦(nián)，我學習(xí)的(de)時(shí)候，就(jiù)是(shì)因為(wèi)不(bù)知(zhī)道(dào)做(zuò)網頁的(d•e)思路(lù)，花(huā)費(fèi)掉了(le)兩年(nián)多(duō)的(de)時(shí)間(jiān)。真正去(qù)做(zuò)，用(yòng)的( de)時(shí)間(jiān)實在是(shì)太少(shǎo)了(le)。思路(lù)理(lǐ)清楚了(le)，克服細節的(de)問(wèδn)題，找百度就(jiù)好(hǎo)了(le)。

  學習(xí)代碼最重要(yào)的(de)一(yī)點就(jiù)是(shì)動手，代碼看(kàn)的(de)再多(duō)，寫不(bù)出來(lái)，那(nàγ)麽知(zhī)識就(jiù)不(bù)是(shì)你(nǐ)的(de)，這(zhè)個(gè)簡單的(de)道(dào)理(lǐ)我們應該都(dōu)懂(dǒ×ng)。