div css制作步驟介紹thinkcss經驗篇
ThinkCSS總結CSS制作重要步驟供大家學習與參考。
在CSS制作前對網頁美工圖分析是必不可少的，少了分析會讓你接下來布局凌亂。我們分析也應該遵循整體到局部、從外到內、從上到下，分析內容：
1、網頁結構
分析網頁結構，讓自己有數如何布局網頁框架，比如分析網頁左右、上下結構構造，便於整體布局把握
比如重要的 頭部、內容部分、底部版權
內容部分是什麼結構，可以如何拆分布局。
2、分析需要切出圖片素材
分析網頁美工圖那些是作為網頁背景、那些是內容圖片。
作為網頁背景圖片，如果是背景不重復的一般是隱藏遮擋背景圖片上的內容再整體切出，如果是可以平鋪重復顯示背景，我們如何切出減少素材大小。
3、特效分析
如果網頁中有特效，我們如何實現，自己會那沒問題，也可以找特效嵌入，這個時候就要求平時多收集常用CSS+JS特效（CSS特效、CSS模塊），便於布局運用。
4、整體把握
通過整體、局部分析應該做到對此網頁CSS布局心中有數，整體框架如何布局，網頁如何拆分結構布局、局部是否有難點，難點解決等都要做到心中有數。
根據第一步分析，切出網頁中圖片、網頁素材等，PS導出切片。
一般圖片GIF格式，如果是圖片有半透明一般導出PNG格式（ie6 png透明解決），圖片內容一般導出為jpg格式。
將拷貝一份thinkcss初始化模板，命名好文件夾項目名。提供的初始化css模板，包括了CSS文件(style.css)、HTML文件（index.html）、放圖片images文件夾，已經對應新建好常用文件夾結構。
CSS模板
我們將網頁素材圖片考入新建項目的images文件夾內。
1、基礎修改設置
一般使用DW軟件打開index.html,首先進行基本設置，比如根據網頁美工圖使用PS獲得文字顏色、背景顏色，對css中設置字體顏色、背景顏色、如果背景是圖片中設置好CSS背景圖片。
2、布局把握
一般是從上到下布局，從外到內布局，先布局同級最大結構框架，再局部布局。
比如，頭部，我們就開始布局頭部最外層div盒子，設置好css布局居中，css寬度等，再布局頭部上下結構情況，再分別設置局部左右框架最後布局內容（左右布局一般使用css float樣式）。
比如左右結構內容，一般是先布局最外層盒子，在跟著布局左右結構2個盒子，然後再回到左側盒子，開始布局左側內容。新手不要布局最外層盒子後，就開始布局左側及左側內容而右側結構都沒有設置布局，如果這樣很容易造成布局混亂與布局錯誤。
重要：一定先最外層，如何對應左側和右側盒子大框架布局了，再回到左側或右側開始從上到下布局局部。
以上布局把握布局步驟讓您在布局時候有條有理，不易造成布局混亂無從下手。
同時在布局時候可能一般不確定自己布局是否正確是否兼容，可以在布局時候邊布局邊在一個浏覽器中測試兼容，新手千萬不要在軟件中布局完網頁才測試，這樣很容易造成錯誤兼容問題找不到原因。在布局中測試可以發現問題解決問題，讓DIV+CSS網頁兼容更好。
布局時候可能您會遇到：
css命名
css hack
網頁布局完後，就進行最後常用浏覽器兼容性測試，最後調整修改完善，這樣一個從網頁美工圖到css制作完成的html網頁就完成。
希望以上ThinkCSS總結常見重要布局步驟對大家學習與布局有用，網頁布局總體思維布局方法一定要善於總結。