網(wǎng)站重構(gòu)和CSS編程進(jìn)階課件

1、網(wǎng)站重構(gòu)和CSS編程進(jìn)階 鳳凰網(wǎng)技術(shù)中心 應(yīng)用管理部 一、網(wǎng)站重構(gòu)Web標(biāo)準(zhǔn)的定義為什么要使用Web標(biāo)準(zhǔn)結(jié)構(gòu)、表現(xiàn)和行為Web標(biāo)準(zhǔn)的定義Web標(biāo)準(zhǔn)就是結(jié)構(gòu)化的語(yǔ)言(XHTML和XML),解釋性語(yǔ)言(CSS)，對(duì)象模型(DOM)和腳本語(yǔ)言(ECMAScript)。更形象的理解就是結(jié)構(gòu)，表現(xiàn)和行為相分離。為什么要使用Web標(biāo)準(zhǔn)易于協(xié)同開發(fā)和維護(hù)代碼量減少，降低了帶寬成本提高網(wǎng)站易用性和用戶體驗(yàn)與未來(lái)瀏覽器和手持設(shè)備兼容搜索引擎優(yōu)化(SEO)結(jié)構(gòu)、表現(xiàn)和行為二、CSS基礎(chǔ)糟糕的代碼和優(yōu)秀的代碼什么時(shí)候使用ID，什么時(shí)候使用Class錯(cuò)誤的命名和正確的命名塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽瀏覽器模式和文檔類型聲明CS

2、S定義的優(yōu)先級(jí)順序和繼承關(guān)系糟糕的代碼和優(yōu)秀的代碼*糟糕的代碼：沒有意義的標(biāo)簽，結(jié)構(gòu)和表現(xiàn)部分混雜在一起，不可讀。優(yōu)秀的代碼：具有語(yǔ)義，結(jié)構(gòu)和表現(xiàn)相分離，可讀，優(yōu)雅。ID和Class*ID：用于標(biāo)識(shí)頁(yè)面唯一的區(qū)塊，比如說(shuō)導(dǎo)航條，正文，版權(quán)。Class：用于可以重用的區(qū)塊或者定義。注意：不要濫用ID和Class。錯(cuò)誤的命名和正確的命名 塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽塊級(jí)標(biāo)簽需要折行，display默認(rèn)屬性為block，典型如div，h1，ul等；可以設(shè)置寬，高；內(nèi)聯(lián)標(biāo)簽不會(huì)折行，display默認(rèn)屬性為inline，典型如span，a，strong等；不能設(shè)置寬高，但是可以設(shè)置行高。瀏覽器模式和文檔類型聲明

3、兩種瀏覽器模式一種是標(biāo)準(zhǔn)模式（standard mode），另一種是怪異模式（quirks mode）；標(biāo)準(zhǔn)性文檔聲明有很多種，一般推薦使用過(guò)渡型（transitional）標(biāo)準(zhǔn)。CSS優(yōu)先級(jí)循序和繼承關(guān)系優(yōu)先級(jí)：p div p ment #comment div#content #container #content style=”繼承關(guān)系：子定義會(huì)繼承父定義，但會(huì)覆蓋父定義的內(nèi)容。三、CSS中的布局CSS中的盒模型IE和FF的盒模型解析差異三種定位機(jī)制：普通流、絕對(duì)定位和浮動(dòng)CSS中的盒模型* IE和FF的盒模型解析差異*IE5.x和怪異模式下的IE6.0與FF的差異#myBox widt

4、h:300px; height:200px; padding:10px; border: 10px solid blue; background-color: red;IE和FF的盒模型解析差異*IE5.x和怪異模式下的IE6.0與FF的差異IE和FF的盒模型解析差異IE5.x和怪異模式下的IE6.0與FF的差異結(jié)論：FF區(qū)塊實(shí)際寬度不是內(nèi)容的定義寬度(width)，而是內(nèi)容，填充和邊框的寬度總和；IE5.x和怪異模式下的IE6.0實(shí)際寬度就是內(nèi)容部分定義的寬度。解決方案：使用統(tǒng)一的標(biāo)準(zhǔn)文檔聲明，不要給區(qū)塊添加具有指定寬度的填充，而是嘗試將填充或空白邊添加到父標(biāo)簽或子標(biāo)簽。IE和FF的盒模型解

5、析差異*IE6.0和7.0與FF標(biāo)準(zhǔn)模式解析差異#myBox width:300px; height:200px; padding:10px; border: 10px solid blue; background-color: red;#myBox .subBox margin:20px;height:50px; background-color: black; IE和FF的盒模型解析差異*IE6.0和7.0與FF標(biāo)準(zhǔn)模式解析差異IE和FF的盒模型解析差異IE6.0和7.0與FF標(biāo)準(zhǔn)模式解析差異結(jié)論：當(dāng)父和子標(biāo)簽垂直疊加時(shí)，IE在垂直方向上不會(huì)做padding和margin疊加，而FF會(huì)；而

6、當(dāng)父標(biāo)簽padding為0時(shí)，F(xiàn)F會(huì)把子標(biāo)簽的margin疊加到父標(biāo)簽上面，子標(biāo)簽和父標(biāo)簽之間不在有間距。解決方案：使用統(tǒng)一的標(biāo)準(zhǔn)文檔聲明，不要在父、子標(biāo)簽重復(fù)定義padding和margin屬性。普通流、絕對(duì)定位、和浮動(dòng) 普通流默認(rèn)的定位。各標(biāo)簽在頁(yè)面上的位置是由標(biāo)簽在html代碼中的位置和自身的屬性（塊級(jí)標(biāo)簽或者內(nèi)聯(lián)標(biāo)簽）決定的。普通流、絕對(duì)定位、和浮動(dòng) 相對(duì)定位和絕對(duì)定位普通流、絕對(duì)定位、和浮動(dòng) 相對(duì)定位和絕對(duì)定位普通流、絕對(duì)定位、和浮動(dòng) 相對(duì)定位和絕對(duì)定位特點(diǎn)：相對(duì)定位無(wú)論是否移動(dòng)，元素仍然占據(jù)原來(lái)的空間；絕對(duì)定位不占據(jù)空間，絕對(duì)定位的標(biāo)簽位置相對(duì)于最近已定位的父標(biāo)簽，如果不存在，則相

7、對(duì)于body；IE中如果相對(duì)于右(right)和底部(bottom)設(shè)置絕對(duì)定位，需要確定相對(duì)定位的框設(shè)置了尺寸。普通流、絕對(duì)定位、和浮動(dòng)* 浮動(dòng)普通流、絕對(duì)定位、和浮動(dòng)* 浮動(dòng)普通流、絕對(duì)定位、和浮動(dòng)* 浮動(dòng)普通流、絕對(duì)定位、和浮動(dòng) 浮動(dòng)特點(diǎn)：當(dāng)元素浮動(dòng)時(shí)，它將不再處于文檔流中，相當(dāng)于浮在文檔之上，不占據(jù)空間，但是會(huì)縮短行框。-正文的圖文混排塊級(jí)元素float以后就沒有默認(rèn)的100%寬度。-非常漂亮的純CSS陰影效果因?yàn)楦?dòng)元素脫離了文檔流，所以包含圖片和文本的div不占據(jù)空間，所以要在這個(gè)div的某個(gè)地方清除浮動(dòng)*。四、實(shí)踐超鏈接樣式分頁(yè)圓角框?qū)Ш綏l滑動(dòng)門技術(shù)圖像陰影和圖像映射表格和表單圖

8、文混排超鏈接樣式*背景圖結(jié)合填充設(shè)置為塊級(jí)標(biāo)簽獲得寬高屬性用文本縮進(jìn)隱藏文字鏈接鏈接偽類實(shí)現(xiàn)背景替換分頁(yè)樣式*D分頁(yè)樣式圓角框簡(jiǎn)單的圓角框圓角框*高度自適應(yīng)的圓角框圓角框高度和寬度都自適應(yīng)的圓角框?qū)Ш綏l垂直導(dǎo)航條AutosFinanceGamesGeoCitiesGroups導(dǎo)航條*水平導(dǎo)航條生活休閑文化視線心理測(cè)試家居家飾飲食男女科技數(shù)碼視頻大賞寫真美圖導(dǎo)航條導(dǎo)航條變體滑動(dòng)門技術(shù)* 圖像陰影和圖像映射*最簡(jiǎn)單的圖像陰影原理：將一個(gè)大的陰影圖像作為一個(gè)容器div的背景，然后用負(fù)值的空白邊(margin)偏移圖像，從而顯示出陰影。圖像陰影和圖像映射*照片相框效果的圖像陰影原理：給圖像加上邊框(b

9、order)和填充(padding)。圖像陰影和圖像映射*純CSS的圖像陰影原理：分別給容器div，img，a設(shè)置邊框，然后設(shè)置相對(duì)定位，向上和向左各便宜一個(gè)像素。通過(guò)同一個(gè)邊框顏色的漸變形成陰影。圖像陰影和圖像映射*CSS的圖像映射原理：將包含圖像的容器div相對(duì)定位，然后設(shè)置a為塊級(jí)標(biāo)簽，并將其絕對(duì)定位，設(shè)置其定位的偏移量(例如top和left)到要包含熱點(diǎn)位置的圖像上。為了修正IE和Opera瀏覽器，設(shè)置背景顏色并把a(bǔ)標(biāo)簽的透明度設(shè)置為1。圖像陰影和圖像映射*有提示的CSS的圖像映射()原理：在a中增加兩個(gè)span，一個(gè)顯示黑邊框，一個(gè)顯示白邊框加上a的黃色邊框。當(dāng)鼠標(biāo)滑過(guò)(hover)

10、a時(shí)顯示a的內(nèi)容。表格和表單*數(shù)據(jù)表格表格的作用就是用來(lái)展現(xiàn)二維數(shù)據(jù)的。表格和表單數(shù)據(jù)表格captionthead,tbody,tfootth表格和表單*表單和表格table類似，一個(gè)展現(xiàn)二維數(shù)據(jù)，一個(gè)是收集二維的數(shù)據(jù)(鍵值對(duì))，推薦使用table來(lái)組織表單。當(dāng)然其他標(biāo)簽也可以，比如p和label的組合。圖文混排*浮動(dòng)的圖文混排優(yōu)點(diǎn)：簡(jiǎn)單，方便。缺點(diǎn)：需要清除浮動(dòng)。圖文混排*絕對(duì)定位的圖文混排優(yōu)點(diǎn)：定位準(zhǔn)確，重用性高。缺點(diǎn)：復(fù)雜，容易跟不上需求變化。實(shí)踐總結(jié)區(qū)塊之間應(yīng)該獨(dú)立*準(zhǔn)確的使用ID和Class使用div和span要賦給有意義的名稱不要過(guò)度使用沒有語(yǔ)義的div和span*先編寫html代碼，然后才是CSS五、編程規(guī)范*CSS命名規(guī)范Basic.css解析六、瀏覽器BUG和CSS調(diào)試常見的瀏覽