都說用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工具切出需要的素材、如何使用這些切出的素材進行布局、布局技巧、相容性解決與避免等。
總之：就是讓自己布局時候能知道大的布局結構如何布局，建立布局思想與技巧。
四、**的規範
當你看完很多別人的網頁**之後，你會發現，他們都有規範，這些規範網上有很多，你需要總結和背誦，當然不是死記硬背，主要在切圖上多做多實踐，熟了就能記住。
五、大量練習
練習是從始到終的，不要斷，即使找一些簡單的網頁進行布局實踐，開始可能開發很慢，會遇到很多小問題，也不急。
首先我們拿到一張網頁美工我們將從上下、上中下、左右、上中（中包括左右）下布局框架來思考。
下面通過乙個例項講解下css布局分析，我們以div css5列表頁面分析css布局：
首先我們可以分析出我們div css布局重構此頁面結構框架，我們可以看出是上、中、下結構，其中又包括了左右結構。
由此我們就要寫此頁面css和html時候就先從上到下從外到內原則寫css與html。
我們首先建乙個web的資料夾並在此資料夾裡新建html頁面命名為index.html，css檔案命名為index.css。這裡有個訣竅就是可以匯入模板方式來建css與html初始頁面，然後將css檔案引用到html，再在css模板的基礎上再寫再新增css。
以下是index.html的html**：
以下為引用的內容：
DivCSS布局例項 用dl dt dd來製作列表
今天有人發郵件問的乙個問題,最開始的想法是用ul列表來實現 但是這樣用出現兩個比較麻煩的地方 1 如果用ul還布局，右邊一欄比較麻煩 2 文字外邊的邊框自適應比較麻煩 3 很可能要定死高度 所以，細細地看一看這個布局，想一想還是用dl.dt.dd作是合理的 1 布局合理一些 2 將來擴充套件很方便 ...
Div CSS布局的十六條技巧及詳細用法
1 ie分不清繼承關係和父子關係的差別，全部都是繼承關係。2 在給你的標籤瘋狂加選擇符的時候，別忘了在css裡給選擇符加上注釋。等你以後修改你的css的時候就知道為什麼要這麼做了。另外提醒您，不要太瘋狂了。3 如果你給乙個標籤設定了乙個深色調的背景和亮色調的文字效果。建議這個時候給你的標籤再設定乙個...
DIV CSS系列課程 三 常用標籤及簡單例項
文件開始與結束 文件頭部 一般用於設定關鍵字 標題 描述等資訊 裡面的內容不顯示到網頁正文 文件標題 在頭部中巢狀 文件鏈結 一般用於鏈結樣式表檔案 在頭部中巢狀 常用屬性有href路徑 rel stylesheet type text css 格式 文件正文 一般不用管 表單 一般不用管 層 用的...