首先先聲明，本人學習是根據國外頁面CSS文件自行摸索，對很多概念化的東西並不理解，比如盒子模型等，完全不知道是什麼意思
再說幾點注意事項
1，用DW創建新的頁面的時候，會出現一堆英文，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
此段不可刪除，爲W3C標準！（記得最開始老師教的時候我問過是什麼意思，他老人家告訴我是廣告，囧…）
2，各個標籤對之間都有默認的margin等值，所以最開始要設置爲0
div,p,span,form,ul,ol,li,input {margin:0;padding:0;border:0; }
3，注意一些HTML語言，不同的位置完全可以造成兩種截然不同的結果。
例：
樣式爲：
<style type="text/css">
<!--
#left{float:left;width:200px;height:300px;background-color:#FF0000}
#center{height:400px;background-color:#00FF00}
#right{float:right;width:200px;height:500px;background-color:#0000FF}
-->
</style>
HTML代碼：
<div id="left"></div>
<div id="center"></div>
<divid="right"></div>
會產生如下的頁面：
[attach]345090[/attach]
我們樣式不變，換下HTML的代碼
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
會產生如下頁面：
[attach]345091[/attach]
相同的樣式，不同的擺放順序會造成不同的顯示效果。
4，對於有float的，在最後一定要消除float效果
當然，如果你只爲兼容IE6，大可以不必消除
5，減少嵌套，看到很多新手在最開始寫的時候往往會有大量的嵌套（表格佈局的後遺症吧…）
6，先布大塊，在布小塊
7，不要有過多的頁面註釋，我曾經修改的一個頁面
[attach]345092[/attach]
完全變形，找了半天也沒發現是什麼問題，偶爾中刪除了其中一條註釋，居然好了，這個不清楚是什麼原因，希望有高人指點一下。
8，在沒有特殊要求的情況下不要設置高度
其實學習CSS+DIV很簡單的，只要搞清楚其中的幾個屬性就可以完成佈局。
一，搞清float樣式
Div標籤的默認寬度爲百分之百，也就是說當兩個div並列的時候產生的效果是第二個div會在第一個的下一行，但是佈局的時候一定會有一行兩列的情形出現，這個時候我們就要引入float
<div style=”float:left”></div>
<div style=”float:left”></div>
<div style=”clear:both”></div>(再次囉嗦，一定要記得清除浮動)
這個就是最簡單的一行兩列
二，一定要搞清楚padding,border,margin的含義
比如有兩幅表好的畫
畫到邊框的舉例爲padding
邊框爲border
兩幅畫之間的距離爲margin
其中padding算入寬高之內，顏色爲background的顏色
邊框算入寬高之外border:1px solid #000(1像素黑色實線)
Margin沒有顏色屬性（另外說下，在有float屬性的時候在IE6會造成margin雙倍的問題，這個時候只要加入display:inline即可解決）
三，關於相對定位，絕對定位和空間定位
絕對定位：position: absolute;有如下兩種情況
1，沒有設定 Top、Right、Bottom、Left 的情況，默認依據父級的“內容區域原始點”爲原始點
2，有設定 Top、Right、Bottom、Left 的情況，這裏又分了兩種情況如下：
(1)，父級沒 position 屬性，瀏覽器左上角(即 Body)爲“座標原始點”進行定位，位置由 Top、Right、Bottom、Left 屬性決定
(2)，父級有 position 屬性，父級的“座標原始點”爲原始點
相對定位：position: relative;
參照父級的“內容區域原始點”爲原始點，無父級則以 Body 的“內容區域原始點”爲原始點，位置由 Top、Right、Bottom、Left 屬性決定，並且會在父塊以外佔據相同的大小，所以不推薦使用。
空間定位：z-index：數值
當兩個板塊之間用絕對定位產生上下的時候，可以用z-index來決定哪個板塊再上，數值大的位於數值小的上方。
做一個簡單的陰影效果：
<div style="width:900px;font-size:20px;font-family:'黑體';position:absolute; background-color:#CC0000; color:#00CC00;padding:10px; height:200px; font-weight:bold">
<div style="position:absolute;left:5px;top:5px; z-index:150">陰影效果</div>
<div style="position:absolute;left:7px;top:7px;color:#666666;z-index:50">陰影效果</div>
</div>
*注意一點，當設置left屬性的時候不要設置right，同樣，設置top之後不要設置bottom
完全理解以上三點之後，就可以進行自己的CSS+DIV製作
最後說一些關於IE6,IE7和FF的兼容問題以及一些小技巧
1，hack方法
FF,IE7可以識別!important
IE6，IE7識別*
IE6識別_
#hack{width:500px;*width:400px!important;_width:300px}
寬度在FF下爲500，IE7下400，IE6下300
就我個人來說，padding值對於FF和IE系列的解析並不相同（個人感覺），爲了達到完全一直而使用hack，一般情況下不需要使用這種方法
2，當有float屬性時，margin在IE6下雙倍，可加入display:inline來解決
3，想要有最小高度並根據內容自伸縮可以用以下方法
設置min-height:500px!important;_height:500px，FF和IE7會以min-height值爲最小高度並按內容伸縮，height對於IE6爲最小高度並按內容伸縮
4，對於FF想要板塊根據頁面居中需在父塊設置margin:0 auto
5，div標籤沒有垂直居中的概念，所以當只有一行文字的時候，想要垂直居中只需將line-height設置與height相同即可
6，W3C標準寫法：
（1）所有卷標元素名稱都使用小寫
錯誤 <HTML> <TITLE> <HEAD> <BODY>
正確 <html> <title> <head> <body>
（2）所有沒有成對的空標籤必須以 />結尾
錯誤：<br> <hr>
正確：<br /> <hr />
（3）不允許使用target="_blank"
在HTML4.01可以使用target="_blank",
但XHTML1.0是不被允許的,你可以改寫爲 target="new"
（4）特殊字符以符號表示
比如空格使用
(5) 正確使用CSS樣式表
錯誤 <style>
正確 <style type="text/css">
(6) 同一個id選擇器不可重複使用
(7) 絕對不可省略雙引號或單引號