zoomla！逐浪CMS給大家介紹一下15條CSS製作網頁的基本規則：
1、避免濫用類 當類型的結構需要不一樣的表現時 記得什麼是層疊樣式表 具體結構中的p a h1等可使用如下方式：div.sideBarp{}定義即後代選擇器+ID或類選擇器組合方式。
2、DIV與SPAN IV（塊級框）用於對塊級元素的分組 SPAN（行內框）用於對行內元素分組標識 。
3、ID 用於標識頁面單獨元素以及持久行的結構性元素 方便JS的調用，類用於標識同一頁面可重複定義使用的結構性元素ID與類的命名需與表現形式無關 ：leftContent而使用有意義的定義方式：sideBar等等。命名方式遵循“駝峯式大小寫（標誌符由多個單詞組成 除首詞首字母小寫外其餘單詞首字母均大寫）”。
4、對於頁面基本默認的方式可以選擇通用選擇器（*標識）進行定義 * { padding：0; margin:0;}
5、body 也是可以添加ID和類的 這樣就可以爲其添加特別樣式。
6、樣式表中導入樣式表需在頂端 覆蓋規則爲本身樣式覆蓋導入樣式
7、CSS樣式表細分化 顏色 佈局 風格 表單 均可分離 這樣對以後的修改和風格設計更方便
8、盒模型：內→外
content←width height(補充：height只有在父元素定義了絕對高度時其%纔有意義)
border
padding（內補丁）-“填充”
background-image
background-color
margin(外補丁)-“空白邊”透明 可爲負值
記住:在css中 width是指內容區域的寬度
IE/WIN與盒模型：
IE5.5/IE6怪異模式下： 元素框總寬度=content.width+margin.width
FireFox/Opera/.. :元素框總寬度=content.width+padding.width+border.width+margin.width
差異在於：IE5.5/IE6怪異模式下width=有效content.width+padding.width+border.width內補丁和邊框被算在內容寬度裏面
#select{width:750px;padding:10px;border:5px} IE怪異模式:總寬度：750pxFF/OP：780px
IE怪異模式:有效內容寬度：750-20-10 FF/OP：750
IE6正常模式下：同於FF/OP
處理方法：在父元素或子元素中使用padding 本身不使用
空白邊疊加：當兩個空白邊疊加時 頂或底邊將會疊加 實際空白邊高度=空白邊大的值
例： <div id="top" style="margin:0 0 10px0;"></div><divid="bottom" style="margin:20px 0 00；"></div>
空白邊高度爲20px
但是如果這個時候你添加邊框或則填充，將不再疊加
//定位機制//
9、相對定位（relative）：相對於其默認初始位置 絕對定位：相對父級元素或畫布、HTML元素 與文檔流無關 可覆蓋其他元素使用Z-INDEX 控制其層次。IE5.5/IE6下 對right bottom時 需設定框的寬高 後則根據畫布右底定位
絕對定位（absolute）
10、float浮動：記住：“在標準瀏覽器中 浮動元素脫離了文檔流 不佔據外圍容器空間” 明白了這點你就會明白爲什麼IE和FIREFOX下表現的不同了。IE5.5、IE6浮動元素依然佔據外圍容器空間
例如：怎麼在IE下feeter正常 在firefox下就跑上去了呢？^_^ 清除浮動吧
IE下 當float和text-align定義的方向一樣時 出現雙倍錯誤：
select{float:left;text-align:left;margin:0 10px;}
實際左邊margin-left：20px；FF/OP：10px 解決：加上display：inline；
11、徹底理解 “清除浮動”clear
clear：none、left、right、both、
表示當前框元素哪些邊不應該挨着浮動框
理解了10中float在不同瀏覽器下的表現 你也就知道如何去使用清楚了。
12、 背 景圖像的定位：只談百分比 background:url(image-url.gif)no-repeat 20% 30%20%：將圖像X軸20%處與父元素X軸20%處重合 Y同理 top=0% bottom=100% left=0% right=100%center=50%
13、滑動門/ 左右兩個DIV 背景分別定義 一般左背景圖像比較長; 左背景定位：left center 右背景定位：rightcenter
外部控制容器寬度一般小於等於兩個背景和 這樣當內容動態變化時候 右背景圖像便感覺像在左背景圖像上滑動，故名。
這 樣也可以實現：<divid="nav"><ul><li><ahref="index.html"><span>首頁</span></a></li></ul></div>css：_fcksavedurl=""index.html"><span>首頁</span></a></li></ul></div>css："
#nav a{float:left;background:url("../images/navLeft.gif") no-repeatleft top;padding:0;text-decoration:none; cursor:hand;}
#nav a span{float:left;display:block;background:url("../images/navRight.gif")no-repeat right top;padding:5px 36px 5px 40px;color:#ffffff}
原理相似，注意背景圖像定位。
14、小圖標有時會給頁面增色不少，用前記得規劃好整到一張大圖片上，這樣可以減少服務器請求次數。
15、完美的居中佈局：
body{text-align：center；mini-width：760px；}
div#wrapper{margin：0 auto；text-align：left；width：750px；}
mini-width IE並不認識 這是爲老瀏覽器準備的，只是這個值比你需要的實際頁面大就OK。
更多精彩內容請閱讀：zoomla！逐浪CMS
1、避免濫用類 當類型的結構需要不一樣的表現時 記得什麼是層疊樣式表 具體結構中的p a h1等可使用如下方式：div.sideBarp{}定義即後代選擇器+ID或類選擇器組合方式。
2、DIV與SPAN IV（塊級框）用於對塊級元素的分組 SPAN（行內框）用於對行內元素分組標識 。
3、ID 用於標識頁面單獨元素以及持久行的結構性元素 方便JS的調用，類用於標識同一頁面可重複定義使用的結構性元素ID與類的命名需與表現形式無關 ：leftContent而使用有意義的定義方式：sideBar等等。命名方式遵循“駝峯式大小寫（標誌符由多個單詞組成 除首詞首字母小寫外其餘單詞首字母均大寫）”。
4、對於頁面基本默認的方式可以選擇通用選擇器（*標識）進行定義 * { padding：0; margin:0;}
5、body 也是可以添加ID和類的 這樣就可以爲其添加特別樣式。
6、樣式表中導入樣式表需在頂端 覆蓋規則爲本身樣式覆蓋導入樣式
7、CSS樣式表細分化 顏色 佈局 風格 表單 均可分離 這樣對以後的修改和風格設計更方便
8、盒模型：內→外
content←width height(補充：height只有在父元素定義了絕對高度時其%纔有意義)
border
padding（內補丁）-“填充”
background-image
background-color
margin(外補丁)-“空白邊”透明 可爲負值
記住:在css中 width是指內容區域的寬度
IE/WIN與盒模型：
IE5.5/IE6怪異模式下： 元素框總寬度=content.width+margin.width
FireFox/Opera/.. :元素框總寬度=content.width+padding.width+border.width+margin.width
差異在於：IE5.5/IE6怪異模式下width=有效content.width+padding.width+border.width內補丁和邊框被算在內容寬度裏面
#select{width:750px;padding:10px;border:5px} IE怪異模式:總寬度：750pxFF/OP：780px
IE怪異模式:有效內容寬度：750-20-10 FF/OP：750
IE6正常模式下：同於FF/OP
處理方法：在父元素或子元素中使用padding 本身不使用
空白邊疊加：當兩個空白邊疊加時 頂或底邊將會疊加 實際空白邊高度=空白邊大的值
例： <div id="top" style="margin:0 0 10px0;"></div><divid="bottom" style="margin:20px 0 00；"></div>
空白邊高度爲20px
但是如果這個時候你添加邊框或則填充，將不再疊加
//定位機制//
9、相對定位（relative）：相對於其默認初始位置 絕對定位：相對父級元素或畫布、HTML元素 與文檔流無關 可覆蓋其他元素使用Z-INDEX 控制其層次。IE5.5/IE6下 對right bottom時 需設定框的寬高 後則根據畫布右底定位
絕對定位（absolute）
10、float浮動：記住：“在標準瀏覽器中 浮動元素脫離了文檔流 不佔據外圍容器空間” 明白了這點你就會明白爲什麼IE和FIREFOX下表現的不同了。IE5.5、IE6浮動元素依然佔據外圍容器空間
例如：怎麼在IE下feeter正常 在firefox下就跑上去了呢？^_^ 清除浮動吧
IE下 當float和text-align定義的方向一樣時 出現雙倍錯誤：
select{float:left;text-align:left;margin:0 10px;}
實際左邊margin-left：20px；FF/OP：10px 解決：加上display：inline；
11、徹底理解 “清除浮動”clear
clear：none、left、right、both、
表示當前框元素哪些邊不應該挨着浮動框
理解了10中float在不同瀏覽器下的表現 你也就知道如何去使用清楚了。
12、 背 景圖像的定位：只談百分比 background:url(image-url.gif)no-repeat 20% 30%20%：將圖像X軸20%處與父元素X軸20%處重合 Y同理 top=0% bottom=100% left=0% right=100%center=50%
13、滑動門/ 左右兩個DIV 背景分別定義 一般左背景圖像比較長; 左背景定位：left center 右背景定位：rightcenter
外部控制容器寬度一般小於等於兩個背景和 這樣當內容動態變化時候 右背景圖像便感覺像在左背景圖像上滑動，故名。
這 樣也可以實現：<divid="nav"><ul><li><ahref="index.html"><span>首頁</span></a></li></ul></div>css：_fcksavedurl=""index.html"><span>首頁</span></a></li></ul></div>css："
#nav a{float:left;background:url("../images/navLeft.gif") no-repeatleft top;padding:0;text-decoration:none; cursor:hand;}
#nav a span{float:left;display:block;background:url("../images/navRight.gif")no-repeat right top;padding:5px 36px 5px 40px;color:#ffffff}
原理相似，注意背景圖像定位。
14、小圖標有時會給頁面增色不少，用前記得規劃好整到一張大圖片上，這樣可以減少服務器請求次數。
15、完美的居中佈局：
body{text-align：center；mini-width：760px；}
div#wrapper{margin：0 auto；text-align：left；width：750px；}
mini-width IE並不認識 這是爲老瀏覽器準備的，只是這個值比你需要的實際頁面大就OK。
更多精彩內容請閱讀：zoomla！逐浪CMS