都說用DIV+CSS布局來設計網站便于優化，容易被收錄，那么你對DIV+CSS布局的用法是否了解？CSS布局是網頁html通過DIV標簽+CSS樣式表代碼開發制作的（html）網頁的統稱。DIV+CSS布局是現在非常流行的布局方法，替代了原來的表格布局。下面我們先來看下學習DIV+CSS布局的基本步驟：

一、認清學習的要求

1、弄清目的，首先要認識為什么要學習CSS？

2、心態不能急，如果你很急躁，否則會很快喪失興趣。

3、堅持，這個不是一到兩天的事情，是一個漫長的過程（至少兩個月）。


二、基礎學習

1、了解CSS作用是什么？（即CSS、html和js的關系是什么，html結構重要性）

2、css基礎知識、css屬性樣式

3、html

上面幾點，一般都是很快的掌握了，也不需要做到精通，了解大概就可以。

差不多時候，開始在網上找一些psd設計稿，自己做做看，做完之后發現問題，并把他們進行總結。


三、學會分析別人網頁布局

當你做psd設計的代碼，發現問題，可能找不到答案或沒有人幫你回答，也不要急，這時最好看看別人網頁的布局結構，主要看html布局框架，進行借鑒（當然網上還有很多結構代碼很槽糕）。然后了解美工圖如何分析、如何使用PS工具切出需要的素材、如何使用這些切出的圖片素材進行布局、布局技巧、兼容性解決與避免等。

總之：就是讓自己布局時候能知道大的布局結構如何布局，建立布局思想與技巧。


四、代碼的規范

當你看完很多別人的網頁代碼之后，你會發現，他們都有規范，這些規范網上有很多，你需要總結和背誦，當然不是死記硬背，主要在切圖上多做多實踐，熟了就能記住。


五、大量練習

練習是從始到終的，不要斷，即使找一些簡單的網頁進行布局實踐，開始可能開發很慢，會遇到很多小問題，也不急。

制作DIV CSS網頁前思考布局：

首先我們可以分析出我們DIV CSS布局重構此頁面結構框架，我們可以看出是上、中、下結構，其中又包括了左右結構。

由此我們就要寫此頁面CSS和html時候就先從上到下從外到內原則寫CSS與html。

我們首先建一個web的文件夾并在此文件夾里新建html頁面命名為index.html，CSS文件命名為index.css。這里有個訣竅就是可以導入模板方式來建CSS與html初始頁面，然后將CSS文件引用到html，再在CSS模板的基礎上再寫再添加CSS。

以下是index.html的html代碼：

以下為引用的內容：