學(xué)習(xí)CSS制作網(wǎng)頁總結(jié)的一些經(jīng)驗(yàn)

互聯(lián)網(wǎng) ? 發(fā)布時(shí)間：2008-10-17 19:28:20 ? 作者：佚名 ? 我要評論

讓你使用DIV CSS排版 不是讓你用換個(gè)標(biāo)簽然后再去按照表格的方式去排版

而是做到內(nèi)容與表現(xiàn)的分離

1: ID用于標(biāo)識頁面單獨(dú)元素以及持久行的結(jié)構(gòu)性元素 方便JS的調(diào)用

類用于標(biāo)識同一頁面可重復(fù)定義使用的結(jié)構(gòu)性元素 ID與類的命名需與表現(xiàn)形式無關(guān) ：leftContent 而使

讓你使用DIV CSS排版 不是讓你用換個(gè)標(biāo)簽然后再去按照表格的方式去排版

而是做到內(nèi)容與表現(xiàn)的分離

1: ID用于標(biāo)識頁面單獨(dú)元素以及持久行的結(jié)構(gòu)性元素 方便JS的調(diào)用

類用于標(biāo)識同一頁面可重復(fù)定義使用的結(jié)構(gòu)性元素 ID與類的命名需與表現(xiàn)形式無關(guān) ：leftContent 而使用有意義的定義方式：sideBar等等。命名方式遵循“駝峰式大小寫(標(biāo)志符由多個(gè)單詞組成 除首詞首字母小寫外 其余單詞首字母均大寫)”

2：避免濫用類 當(dāng)類型的結(jié)構(gòu)需要不一樣的表現(xiàn)時(shí) 記得什么是層疊樣式表 具體結(jié)構(gòu)中的p a h1等可使用如下方式：div.sideBar p{}定義即后代選擇器 ID或類選擇器組合方式。

3：DIV與SPAN IV(塊級框)用于對塊級元素的分組 SPAN(行內(nèi)框)用于對行內(nèi)元素分組標(biāo)識

4：對于頁面基本默認(rèn)的方式可以選擇通用選擇器(*標(biāo)識)進(jìn)行定義 * { padding：0; margin:0;}

5: body 也是可以添加ID和類的 這樣就可以為其添加特別樣式。

6:樣式表中導(dǎo)入樣式表需在頂端 覆蓋規(guī)則為本身樣式覆蓋導(dǎo)入樣式

7：CSS樣式表細(xì)分化 顏色 布局 風(fēng)格 表單 均可分離 這樣對以后的修改和風(fēng)格設(shè)計(jì)更方便

8：盒模型：內(nèi)→外

content←width height(補(bǔ)充：height只有在父元素定義了絕對高度時(shí)其%才有意義)

border

padding(內(nèi)補(bǔ)丁)-“填充”

background-image

background-color

margin(外補(bǔ)丁)-“空白邊”透明 可為負(fù)值

記住:在css中 width是指內(nèi)容區(qū)域的寬度

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 內(nèi)補(bǔ)丁和邊框被算在內(nèi)容寬度里面

#select{width:750px;padding:10px;border:5px} IE怪異模式:總寬度：750px FF/OP：780px

IE怪異模式:有效內(nèi)容寬度：750-20-10 FF/OP：750

IE6正常模式下：同于FF/OP

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

空白邊疊加：當(dāng)兩個(gè)空白邊疊加時(shí) 頂或底邊將會疊加 實(shí)際空白邊高度=空白邊大的值

例：

空白邊高度為20px

但是如果這個(gè)時(shí)候你添加邊框或則填充，將不再疊加

//定位機(jī)制//

9：相對定位(relative)：相對于其默認(rèn)初始位置 絕對定位：相對父級元素或畫布、HTML元素 與文檔流無關(guān) 可覆蓋其他元素 使用Z-INDEX 控制其層次。IE5.5/IE6下 對right bottom時(shí) 需設(shè)定框的寬高 后則根據(jù)畫布右底定位

絕對定位(absolute)

10：float浮動：記住：“在標(biāo)準(zhǔn)瀏覽器中 浮動元素脫離了文檔流 不占據(jù)外圍容器空間” 明白了這點(diǎn) 你就會明白為什么IE和FIREFOX下表現(xiàn)的不同了。IE5.5、IE6浮動元素依然占據(jù)外圍容器空間

例如：怎么在IE下feeter正常 在firefox下就跑上去了呢？^_^ 清除浮動吧

IE下 當(dāng)float和text-align定義的方向一樣時(shí) 出現(xiàn)雙倍錯(cuò)誤：

select{float:left;text-align:left;margin:0 10px;}

實(shí)際左邊margin-left：20px；FF/OP：10px 解決：加上display：inline；

11：徹底理解 “清除浮動”clear

clear：none、left、right、both、

表示當(dāng)前框元素哪些邊不應(yīng)該挨著浮動框

理解了10中float在不同瀏覽器下的表現(xiàn) 你也就知道如何去使用清楚了。

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：滑動門/

左右兩個(gè)DIV 背景分別定義 一般左背景圖像比較長; 左背景定位：left center 右背景定位：right center

外部控制容器寬度一般小于等于兩個(gè)背景和 這樣當(dāng)內(nèi)容動態(tài)變化時(shí)候 右背景圖像便感覺像在左背景圖像上滑動，故名。

這樣也可以實(shí)現(xiàn)：

• 首頁

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并不認(rèn)識 這是為老瀏覽器準(zhǔn)備的，只是這個(gè)值比你需要的實(shí)際頁面大就OK

15:小圖標(biāo)有時(shí)會給頁面增色不少 用前記得規(guī)劃好 整到一張大圖片上 這樣可以減少服務(wù)器請求次數(shù)。

相關(guān)文章

這篇文章主要介紹了純 CSS 實(shí)現(xiàn)【點(diǎn)擊展開閱讀全文】功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-13

這篇文章主要介紹了CSS實(shí)現(xiàn)兩個(gè)元素相融效果(粘滯效果),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)2020-10-12

這篇文章主要介紹了css為什么要放在head標(biāo)簽中,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-12

這篇文章主要介紹了CSS兩種常用的封裝示例，幫助大家更好的利用CSS制作網(wǎng)頁，感興趣的朋友可以了解下2020-10-12

這篇文章主要介紹了CSS標(biāo)簽?zāi)Ｊ絛isplay屬性,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-12

這篇文章主要介紹了css 收貨地址平行四邊形的線條樣式示例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-09

這篇文章主要介紹了css實(shí)現(xiàn)鼠標(biāo)放上去時(shí)圖片過渡轉(zhuǎn)換動畫,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-09

這篇文章給大家介紹了CSS中width和height的默認(rèn)值auto與%案例，本文通過實(shí)例案例給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2020-09-30

這篇文章主要介紹了css一些不常見但很有用的屬性操作大全,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-28

這篇文章主要介紹了解決搜索框和搜索按鈕button邊框不能重合的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-28

最新評論

總結(jié)

以上是生活随笔為你收集整理的html css做网页总结,学习CSS制作网页总结的一些经验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。