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)化的語言(XHTML和XML),解釋性語言(CSS)，對象模型(DOM)和腳本語言(ECMAScript)。更形象的理解就是結(jié)構(gòu)，表現(xiàn)和行為相分離。,為什么要使用Web標(biāo)準(zhǔn),易于協(xié)同開發(fā)和維護(hù) 代碼量減少，降低了帶寬成本 提高網(wǎng)站易用性和用戶體驗(yàn) 與未來瀏覽器和手持設(shè)備兼容 搜索引擎優(yōu)化(SEO),結(jié)構(gòu)、表現(xiàn)和行為,二、CSS基礎(chǔ),糟糕的代碼和優(yōu)秀的代碼 什么時(shí)候使用ID，什么時(shí)候使用Class 錯(cuò)誤的命名和正確的命名 塊級標(biāo)簽和內(nèi)

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

3、；不能設(shè)置寬高，但是可以設(shè)置行高。,瀏覽器模式和文檔類型聲明,兩種瀏覽器模式一種是標(biāo)準(zhǔn)模式（standard mode），另一種是怪異模式（quirks mode）； 標(biāo)準(zhǔn)性文檔聲明有很多種，一般推薦使用過渡型（transitional）標(biāo)準(zhǔn)。 ,CSS優(yōu)先級循序和繼承關(guān)系,優(yōu)先級： p div p ment #comment div#content #container #content style=” 繼承關(guān)系：子定義會繼承父定義，但會覆蓋父定義的內(nèi)容。,三、CSS中的布局,CSS中的盒模型 IE和FF的盒模型解析差異 三種定位機(jī)制：普通流、絕對定位和浮動,CSS中的盒模型*,IE和FF的

4、盒模型解析差異*,IE5.x和怪異模式下的IE6.0與FF的差異 #myBox width: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)文檔聲

5、明，不要給區(qū)塊添加具有指定寬度的填充，而是嘗試將填充或空白邊添加到父標(biāo)簽或子標(biāo)簽。,IE和FF的盒模型解析差異*,IE6.0和7.0與FF標(biāo)準(zhǔn)模式解析差異,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在垂直方向上不會做padding和margin疊加，而FF會；而當(dāng)父標(biāo)簽padding為0時(shí)，F(xiàn)F會把子標(biāo)簽的margin疊加到父標(biāo)簽上面，子標(biāo)簽和父標(biāo)簽之間不在有間距。 解決方案：使用統(tǒng)一的標(biāo)準(zhǔn)文檔聲明，不要在父、子標(biāo)簽重復(fù)定義padding和margin屬性。,普

6、通流、絕對定位、和浮動,普通流 默認(rèn)的定位。各標(biāo)簽在頁面上的位置是由標(biāo)簽在html代碼中的位置和自身的屬性（塊級標(biāo)簽或者內(nèi)聯(lián)標(biāo)簽）決定的。,普通流、絕對定位、和浮動,相對定位和絕對定位,普通流、絕對定位、和浮動,相對定位和絕對定位,普通流、絕對定位、和浮動,相對定位和絕對定位 特點(diǎn)： 相對定位無論是否移動，元素仍然占據(jù)原來的空間； 絕對定位不占據(jù)空間，絕對定位的標(biāo)簽位置相對于最近已定位的父標(biāo)簽，如果不存在，則相對于body； IE中如果相對于右(right)和底部(bottom)設(shè)置絕對定位，需要確定相對定位的框設(shè)置了尺寸。,普通流、絕對定位、和浮動*,浮動,普通流、絕對定位、和浮動*,浮動,

7、普通流、絕對定位、和浮動*,浮動,普通流、絕對定位、和浮動,浮動 特點(diǎn)： 當(dāng)元素浮動時(shí)，它將不再處于文檔流中，相當(dāng)于浮在文檔之上，不占據(jù)空間，但是會縮短行框。-正文的圖文混排 塊級元素float以后就沒有默認(rèn)的100%寬度。-非常漂亮的純CSS陰影效果 因?yàn)楦釉孛撾x了文檔流，所以包含圖片和文本的div不占據(jù)空間，所以要在這個(gè)div的某個(gè)地方清除浮動*。,四、實(shí)踐,超鏈接樣式 分頁 圓角框 導(dǎo)航條 滑動門技術(shù) 圖像陰影和圖像映射 表格和表單 圖文混排,超鏈接樣式*,背景圖結(jié)合填充 設(shè)置為塊級標(biāo)簽獲得寬高屬性 用文本縮進(jìn)隱藏文字鏈接 鏈接偽類實(shí)現(xiàn)背景替換,分頁樣式*,D分頁樣式,圓角框,簡單的

8、圓角框,圓角框*,高度自適應(yīng)的圓角框,圓角框,高度和寬度都自適應(yīng)的圓角框,導(dǎo)航條,垂直導(dǎo)航條 Autos Finance Games GeoCities Groups ,導(dǎo)航條*,水平導(dǎo)航條 生活休閑 文化視線 心理測試 家居家飾 飲食男女 科技數(shù)碼 視頻大賞 寫真美圖 ,導(dǎo)航條,導(dǎo)航條變體,滑動門技術(shù)*,圖像陰影和圖像映射*,最簡單的圖像陰影 原理：將一個(gè)大的陰影圖像作為一個(gè)容器div的背景，然后用負(fù)值的空白邊(margin)偏移圖像，從而顯示出陰影。,圖像陰影和圖像映射*,照片相框效果的圖像陰影 原理：給圖像加上邊框(border)和填充(padding)。,圖像陰影和圖像映射*,純CSS

9、的圖像陰影 原理：分別給容器div，img，a設(shè)置邊框，然后設(shè)置相對定位，向上和向左各便宜一個(gè)像素。通過同一個(gè)邊框顏色的漸變形成陰影。,圖像陰影和圖像映射*,CSS的圖像映射 原理：將包含圖像的容器div相對定位，然后設(shè)置a為塊級標(biāo)簽，并將其絕對定位，設(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)滑過(hover)a時(shí)顯示a的內(nèi)容。 ,表格和表單*,數(shù)據(jù)表格 表格的

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