學習CSS制作網頁總結的一些經驗_CSS教程

編輯Tag賺U幣

教程Tag：暫無Tag,歡迎添加,賺取U幣!

讓你使用DIV CSS排版不是讓你用換個標簽然后再去按照表格的方式去排版

而是做到內容與表現的分離

1: ID用于標識頁面單獨元素以及持久行的結構性元素方便JS的調用

類用于標識同一頁面可重復定義使用的結構性元素 ID與類的命名需與表現形式無關：leftContent 而使用有意義的定義方式：sideBar等等。命名方式遵循“駝峰式大小寫（標志符由多個單詞組成除首詞首字母小寫外其余單詞首字母均大寫）”

2：避免濫用類當類型的結構需要不一樣的表現時記得什么是層疊樣式表具體結構中的p a h1等可使用如下方式：div.sideBar p{}定義即后代選擇器 ID或類選擇器組合方式。

3：DIV與SPAN IV（塊級框）用于對塊級元素的分組 SPAN（行內框）用于對行內元素分組標識

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怪異模式:總寬度：750px FF/OP：780px

IE怪異模式:有效內容寬度：750-20-10 FF/OP：750
IE6正常模式下：同于FF/OP

處理方法：在父元素或子元素中使用padding 本身不使用

空白邊疊加：當兩個空白邊疊加時頂或底邊將會疊加實際空白邊高度=空白邊大的值

例：

空白邊高度為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 右背景定位：right center

外部控制容器寬度一般小于等于兩個背景和這樣當內容動態變化時候右背景圖像便感覺像在左背景圖像上滑動，故名。

這樣也可以實現：<div id="nav"><ul><li><a href="index.html"><span>首頁</span></a></li></ul></div>

css：

#nav a{float:left;background:url("../images/navLeft.gif") no-repeat left 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:完美的居中布局：body{text-align：center；mini-width：760px；}
div#wrapper{margin：0 auto；text-align：left；width：750px；}

mini-width IE并不熟悉這是為老瀏覽器預備的，只是這個值比你需要的實際頁面大就OK

15:小圖標有時會給頁面增色不少用前記得規劃好整到一張大圖片上這樣可以減少服務器請求次數。