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

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

鳳凰網(wǎng)技術(shù)中心應(yīng)用管理部

網(wǎng)站重構(gòu)和CSS編程進(jìn)階鳳凰網(wǎng)技術(shù)中心應(yīng)用管理部1一、網(wǎng)站重構(gòu)Web標(biāo)準(zhǔn)的定義為什么要使用Web標(biāo)準(zhǔn)結(jié)構(gòu)、表現(xiàn)和行為一、網(wǎng)站重構(gòu)Web標(biāo)準(zhǔn)的定義2Web標(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)的定義Web標(biāo)準(zhǔn)就是結(jié)構(gòu)化的語言(XHTML和XM3為什么要使用Web標(biāo)準(zhǔn)易于協(xié)同開發(fā)和維護(hù)代碼量減少，降低了帶寬成本提高網(wǎng)站易用性和用戶體驗(yàn)與未來瀏覽器和手持設(shè)備兼容搜索引擎優(yōu)化(SEO)為什么要使用Web標(biāo)準(zhǔn)易于協(xié)同開發(fā)和維護(hù)4結(jié)構(gòu)、表現(xiàn)和行為結(jié)構(gòu)、表現(xiàn)和行為5二、CSS基礎(chǔ)糟糕的代碼和優(yōu)秀的代碼什么時(shí)候使用ID，什么時(shí)候使用Class錯誤的命名和正確的命名塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽瀏覽器模式和文檔類型聲明CSS定義的優(yōu)先級順序和繼承關(guān)系二、CSS基礎(chǔ)糟糕的代碼和優(yōu)秀的代碼6糟糕的代碼和優(yōu)秀的代碼*糟糕的代碼：沒有意義的標(biāo)簽，結(jié)構(gòu)和表現(xiàn)部分混雜在一起，不可讀。優(yōu)秀的代碼：具有語義，結(jié)構(gòu)和表現(xiàn)相分離，可讀，優(yōu)雅。糟糕的代碼和優(yōu)秀的代碼*糟糕的代碼：沒有意義的標(biāo)簽，結(jié)構(gòu)和表7ID和Class*ID：用于標(biāo)識頁面唯一的區(qū)塊，比如說導(dǎo)航條，正文，版權(quán)。Class：用于可以重用的區(qū)塊或者定義。注意：不要濫用ID和Class。ID和Class*ID：用于標(biāo)識頁面唯一的區(qū)塊，比如說導(dǎo)航條8錯誤的命名和正確的命名

錯誤的命名和正確的命名9塊級標(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等；不能設(shè)置寬高，但是可以設(shè)置行高。塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽塊級標(biāo)簽需要折行，display默認(rèn)屬性為10瀏覽器模式和文檔類型聲明兩種瀏覽器模式一種是標(biāo)準(zhǔn)模式（standardmode），另一種是怪異模式（quirksmode）；標(biāo)準(zhǔn)性文檔聲明有很多種，一般推薦使用過渡型（transitional）標(biāo)準(zhǔn)。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="/1999/xhtml">瀏覽器模式和文檔類型聲明兩種瀏覽器模式一種是標(biāo)準(zhǔn)模式（sta11CSS優(yōu)先級循序和繼承關(guān)系優(yōu)先級：p{}<divp{}<ment{}<#comment{}<div#content<#container#content{}<style=””繼承關(guān)系：子定義會繼承父定義，但會覆蓋父定義的內(nèi)容。CSS優(yōu)先級循序和繼承關(guān)系優(yōu)先級：12三、CSS中的布局CSS中的盒模型IE和FF的盒模型解析差異三種定位機(jī)制：普通流、絕對定位和浮動三、CSS中的布局CSS中的盒模型13CSS中的盒模型*

CSS中的盒模型*14IE和FF的盒模型解析差異*IE5.x和怪異模式下的IE6.0與FF的差異#myBox{

width:300px;

height:200px; padding:10px;

border:10pxsolidblue;

background-color:red;}IE和FF的盒模型解析差異*IE5.x和怪異模式下的IE6.15IE和FF的盒模型解析差異*IE5.x和怪異模式下的IE6.0與FF的差異IE和FF的盒模型解析差異*IE5.x和怪異模式下的IE6.16IE和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的盒模型解析差異IE5.x和怪異模式下的IE6.017IE和FF的盒模型解析差異*IE6.0和7.0與FF標(biāo)準(zhǔn)模式解析差異#myBox{width:300px;height:200px;padding:10px;border:10pxsolidblue;background-color:red;}#myBox.subBox{margin:20px;height:50px;background-color:black;}IE和FF的盒模型解析差異*IE6.0和7.0與FF標(biāo)準(zhǔn)模式18IE和FF的盒模型解析差異*IE6.0和7.0與FF標(biāo)準(zhǔn)模式解析差異IE和FF的盒模型解析差異*IE6.0和7.0與FF標(biāo)準(zhǔn)模式19IE和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屬性。IE和FF的盒模型解析差異IE6.0和7.0與FF標(biāo)準(zhǔn)模式解20普通流、絕對定位、和浮動

普通流默認(rèn)的定位。各標(biāo)簽在頁面上的位置是由標(biāo)簽在html代碼中的位置和自身的屬性（塊級標(biāo)簽或者內(nèi)聯(lián)標(biāo)簽）決定的。普通流、絕對定位、和浮動普通流21普通流、絕對定位、和浮動

相對定位和絕對定位普通流、絕對定位、和浮動相對定位和絕對定位22普通流、絕對定位、和浮動

相對定位和絕對定位普通流、絕對定位、和浮動相對定位和絕對定位23普通流、絕對定位、和浮動

相對定位和絕對定位特點(diǎn)：相對定位無論是否移動，元素仍然占據(jù)原來的空間；絕對定位不占據(jù)空間，絕對定位的標(biāo)簽位置相對于最近已定位的父標(biāo)簽，如果不存在，則相對于body；IE中如果相對于右(right)和底部(bottom)設(shè)置絕對定位，需要確定相對定位的框設(shè)置了尺寸。普通流、絕對定位、和浮動相對定位和絕對定位24普通流、絕對定位、和浮動*

浮動普通流、絕對定位、和浮動*浮動25普通流、絕對定位、和浮動*

浮動普通流、絕對定位、和浮動*浮動26普通流、絕對定位、和浮動*

浮動普通流、絕對定位、和浮動*浮動27普通流、絕對定位、和浮動

浮動特點(diǎn)：當(dāng)元素浮動時(shí)，它將不再處于文檔流中，相當(dāng)于浮在文檔之上，不占據(jù)空間，但是會縮短行框。-》正文的圖文混排塊級元素float以后就沒有默認(rèn)的100%寬度。-》非常漂亮的純CSS陰影效果因?yàn)楦釉孛撾x了文檔流，所以包含圖片和文本的div不占據(jù)空間，所以要在這個div的某個地方清除浮動*。普通流、絕對定位、和浮動浮動28四、實(shí)踐超鏈接樣式分頁圓角框?qū)Ш綏l滑動門技術(shù)圖像陰影和圖像映射表格和表單圖文混排四、實(shí)踐超鏈接樣式29超鏈接樣式*背景圖結(jié)合填充設(shè)置為塊級標(biāo)簽獲得寬高屬性用文本縮進(jìn)隱藏文字鏈接鏈接偽類實(shí)現(xiàn)背景替換超鏈接樣式*背景圖結(jié)合填充30分頁樣式*D分頁樣式分頁樣式*D分頁樣式31圓角框簡單的圓角框圓角框簡單的圓角框32圓角框*高度自適應(yīng)的圓角框圓角框*高度自適應(yīng)的圓角框33圓角框高度和寬度都自適應(yīng)的圓角框圓角框高度和寬度都自適應(yīng)的圓角框34導(dǎo)航條垂直導(dǎo)航條<ul> <li>Autos</li> <li>Finance</li> <li>Games</li> <li>GeoCities</li> <li>Groups</li></ul>導(dǎo)航條垂直導(dǎo)航條35導(dǎo)航條*水平導(dǎo)航條<ul> <li><ahref="#"target="_blank">生活休閑</a></li> <li><ahref="#"target="_blank">文化視線</a></li> <li><ahref="#"target="_blank">心理測試</a></li> <li><ahref="#"target="_blank">家居家飾</a></li> <li><ahref="#"target="_blank">飲食男女</a></li> <li><ahref="#"target="_blank">科技數(shù)碼</a></li> <li><ahref="#"target="_blank">視頻大賞</a></li> <li><ahref="#"target="_blank">寫真美圖</a></li></ul>導(dǎo)航條*水平導(dǎo)航條36導(dǎo)航條導(dǎo)航條變體導(dǎo)航條導(dǎo)航條變體37滑動門技術(shù)*

滑動門技術(shù)*38圖像陰影和圖像映射*最簡單的圖像陰影原理：將一個大的陰影圖像作為一個容器div的背景，然后用負(fù)值的空白邊(margin)偏移圖像，從而顯示出陰影。圖像陰影和圖像映射*最簡單的圖像陰影39圖像陰影和圖像映射*照片相框效果的圖像陰影原理：給圖像加上邊框(border)和填充(padding)。圖像陰影和圖像映射*照片相框效果的圖像陰影40圖像陰影和圖像映射*純CSS的圖像陰影原理：分別給容器div，img，a設(shè)置邊框，然后設(shè)置相對定位，向上和向左各便宜一個像素。通過同一個邊框顏色的漸變形成陰影。圖像陰影和圖像映射*純CSS的圖像陰影41圖像陰影和圖像映射*CSS的圖像映射原理：將包含圖像的容器div相對定位，然后設(shè)置a為塊級標(biāo)簽，并將其絕對定位，設(shè)置其定位的偏移量(例如top和left)到要包含熱點(diǎn)位置的圖像上。為了修正IE和Opera瀏覽器，設(shè)置背景顏色并把a(bǔ)標(biāo)簽的透明度設(shè)置為1。圖像陰影和圖像映射*CSS的圖像映射42圖像陰影和圖像映射*有提示的CSS的圖像映射()原理：在a中增加兩個span，一個顯示黑邊框，一個顯示白邊框加上a的黃色邊框。當(dāng)鼠標(biāo)滑過(hover)a時(shí)顯示a的內(nèi)容。<ahref="#"target="_blank"class="ent"> <spanclass="outer"> <spanclass="inner"> </span> </span></a>圖像陰影和圖像映射*有提示的CSS的圖像映射(flickr.43表格和表單*數(shù)據(jù)表格表格的作用就是用來展現(xiàn)二維數(shù)據(jù)的。表格和表單*數(shù)據(jù)表格44表格和表單數(shù)據(jù)表格captionthead,tbody,tfootth表格和表單數(shù)據(jù)表格45表格和表單*表單和表格table類似，一個展現(xiàn)二維數(shù)據(jù)，一個是收集二維的數(shù)據(jù)(鍵值對)，推薦使用table來組織表單。當(dāng)然其他標(biāo)簽也可以，比如p和label的組合。表格和表單*表單46圖文混排*浮動的圖文混排優(yōu)點(diǎn)：簡單，方便。缺點(diǎn)：需要清除浮動。圖文混排*浮動的圖文混排47圖文混排*絕對定位的圖文混排優(yōu)點(diǎn)：定位準(zhǔn)確，重用性高。缺點(diǎn)：復(fù)雜，容易跟不上需求變化。圖文混排*絕對定位的圖文混排48實(shí)踐總結(jié)區(qū)塊之間應(yīng)該獨(dú)立*準(zhǔn)確的使用ID和Class使用div和span要賦給有意義的名稱不要過度使用沒有語義的div和span*先編寫html代碼，然后才是CSS實(shí)踐總結(jié)區(qū)塊之間應(yīng)該獨(dú)立*49五、編程規(guī)范*CSS命名規(guī)范Basic.css解析五、編程規(guī)范*CSS命名規(guī)范50六、瀏覽器BUG和CSS調(diào)試常見的瀏覽器bug

CSS調(diào)試技巧六、瀏覽器BUG和CSS調(diào)試常見的瀏覽器bug51常見的瀏覽器bug*

雙空白邊(Double-margin)浮動bugIE6重復(fù)字符bug常見的瀏覽器bug*雙空白邊(Double-margin52CSS調(diào)試技巧增加border增加帶顏色的背景(background)CSS調(diào)試技巧增加border53七、更深入的話題CSSFrameworkCSSFilterCSS2七、更深入的話題CSSFramework54TheEnd參考書目：《網(wǎng)站重構(gòu)》《精通CSS-高級Web解決方案》TheEnd參考書目：55網(wǎng)站重構(gòu)和CSS編程進(jìn)階

鳳凰網(wǎng)技術(shù)中心應(yīng)用管理部

網(wǎng)站重構(gòu)和CSS編程進(jìn)階鳳凰網(wǎng)技術(shù)中心應(yīng)用管理部56一、網(wǎng)站重構(gòu)Web標(biāo)準(zhǔn)的定義為什么要使用Web標(biāo)準(zhǔn)結(jié)構(gòu)、表現(xiàn)和行為一、網(wǎng)站重構(gòu)Web標(biāo)準(zhǔn)的定義57Web標(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)的定義Web標(biāo)準(zhǔn)就是結(jié)構(gòu)化的語言(XHTML和XM58為什么要使用Web標(biāo)準(zhǔn)易于協(xié)同開發(fā)和維護(hù)代碼量減少，降低了帶寬成本提高網(wǎng)站易用性和用戶體驗(yàn)與未來瀏覽器和手持設(shè)備兼容搜索引擎優(yōu)化(SEO)為什么要使用Web標(biāo)準(zhǔn)易于協(xié)同開發(fā)和維護(hù)59結(jié)構(gòu)、表現(xiàn)和行為結(jié)構(gòu)、表現(xiàn)和行為60二、CSS基礎(chǔ)糟糕的代碼和優(yōu)秀的代碼什么時(shí)候使用ID，什么時(shí)候使用Class錯誤的命名和正確的命名塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽瀏覽器模式和文檔類型聲明CSS定義的優(yōu)先級順序和繼承關(guān)系二、CSS基礎(chǔ)糟糕的代碼和優(yōu)秀的代碼61糟糕的代碼和優(yōu)秀的代碼*糟糕的代碼：沒有意義的標(biāo)簽，結(jié)構(gòu)和表現(xiàn)部分混雜在一起，不可讀。優(yōu)秀的代碼：具有語義，結(jié)構(gòu)和表現(xiàn)相分離，可讀，優(yōu)雅。糟糕的代碼和優(yōu)秀的代碼*糟糕的代碼：沒有意義的標(biāo)簽，結(jié)構(gòu)和表62ID和Class*ID：用于標(biāo)識頁面唯一的區(qū)塊，比如說導(dǎo)航條，正文，版權(quán)。Class：用于可以重用的區(qū)塊或者定義。注意：不要濫用ID和Class。ID和Class*ID：用于標(biāo)識頁面唯一的區(qū)塊，比如說導(dǎo)航條63錯誤的命名和正確的命名

錯誤的命名和正確的命名64塊級標(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等；不能設(shè)置寬高，但是可以設(shè)置行高。塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽塊級標(biāo)簽需要折行，display默認(rèn)屬性為65瀏覽器模式和文檔類型聲明兩種瀏覽器模式一種是標(biāo)準(zhǔn)模式（standardmode），另一種是怪異模式（quirksmode）；標(biāo)準(zhǔn)性文檔聲明有很多種，一般推薦使用過渡型（transitional）標(biāo)準(zhǔn)。<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="/1999/xhtml">瀏覽器模式和文檔類型聲明兩種瀏覽器模式一種是標(biāo)準(zhǔn)模式（sta66CSS優(yōu)先級循序和繼承關(guān)系優(yōu)先級：p{}<divp{}<ment{}<#comment{}<div#content<#container#content{}<style=””繼承關(guān)系：子定義會繼承父定義，但會覆蓋父定義的內(nèi)容。CSS優(yōu)先級循序和繼承關(guān)系優(yōu)先級：67三、CSS中的布局CSS中的盒模型IE和FF的盒模型解析差異三種定位機(jī)制：普通流、絕對定位和浮動三、CSS中的布局CSS中的盒模型68CSS中的盒模型*

CSS中的盒模型*69IE和FF的盒模型解析差異*IE5.x和怪異模式下的IE6.0與FF的差異#myBox{

width:300px;

height:200px; padding:10px;

border:10pxsolidblue;

background-color:red;}IE和FF的盒模型解析差異*IE5.x和怪異模式下的IE6.70IE和FF的盒模型解析差異*IE5.x和怪異模式下的IE6.0與FF的差異IE和FF的盒模型解析差異*IE5.x和怪異模式下的IE6.71IE和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的盒模型解析差異IE5.x和怪異模式下的IE6.072IE和FF的盒模型解析差異*IE6.0和7.0與FF標(biāo)準(zhǔn)模式解析差異#myBox{width:300px;height:200px;padding:10px;border:10pxsolidblue;background-color:red;}#myBox.subBox{margin:20px;height:50px;background-color:black;}IE和FF的盒模型解析差異*IE6.0和7.0與FF標(biāo)準(zhǔn)模式73IE和FF的盒模型解析差異*IE6.0和7.0與FF標(biāo)準(zhǔn)模式解析差異IE和FF的盒模型解析差異*IE6.0和7.0與FF標(biāo)準(zhǔn)模式74IE和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屬性。IE和FF的盒模型解析差異IE6.0和7.0與FF標(biāo)準(zhǔn)模式解75普通流、絕對定位、和浮動

普通流默認(rèn)的定位。各標(biāo)簽在頁面上的位置是由標(biāo)簽在html代碼中的位置和自身的屬性（塊級標(biāo)簽或者內(nèi)聯(lián)標(biāo)簽）決定的。普通流、絕對定位、和浮動普通流76普通流、絕對定位、和浮動

相對定位和絕對定位普通流、絕對定位、和浮動相對定位和絕對定位77普通流、絕對定位、和浮動

相對定位和絕對定位普通流、絕對定位、和浮動相對定位和絕對定位78普通流、絕對定位、和浮動

相對定位和絕對定位特點(diǎn)：相對定位無論是否移動，元素仍然占據(jù)原來的空間；絕對定位不占據(jù)空間，絕對定位的標(biāo)簽位置相對于最近已定位的父標(biāo)簽，如果不存在，則相對于body；IE中如果相對于右(right)和底部(bottom)設(shè)置絕對定位，需要確定相對定位的框設(shè)置了尺寸。普通流、絕對定位、和浮動相對定位和絕對定位79普通流、絕對定位、和浮動*

浮動普通流、絕對定位、和浮動*浮動80普通流、絕對定位、和浮動*

浮動普通流、絕對定位、和浮動*浮動81普通流、絕對定位、和浮動*

浮動普通流、絕對定位、和浮動*浮動82普通流、絕對定位、和浮動

浮動特點(diǎn)：當(dāng)元素浮動時(shí)，它將不再處于文檔流中，相當(dāng)于浮在文檔之上，不占據(jù)空間，但是會縮短行框。-》正文的圖文混排塊級元素float以后就沒有默認(rèn)的100%寬度。-》非常漂亮的純CSS陰影效果因?yàn)楦釉孛撾x了文檔流，所以包含圖片和文本的div不占據(jù)空間，所以要在這個div的某個地方清除浮動*。普通流、絕對定位、和浮動浮動83四、實(shí)踐超鏈接樣式分頁圓角框?qū)Ш綏l滑動門技術(shù)圖像陰影和圖像映射表格和表單圖文混排四、實(shí)踐超鏈接樣式84超鏈接樣式*背景圖結(jié)合填充設(shè)置為塊級標(biāo)簽獲得寬高屬性用文本縮進(jìn)隱藏文字鏈接鏈接偽類實(shí)現(xiàn)背景替換超鏈接樣式*背景圖結(jié)合填充85分頁樣式*D分頁樣式分頁樣式*D分頁樣式86圓角框簡單的圓角框圓角框簡單的圓角框87圓角框*高度自適應(yīng)的圓角框圓角框*高度自適應(yīng)的圓角框88圓角框高度和寬度都自適應(yīng)的圓角框圓角框高度和寬度都自適應(yīng)的圓角框89導(dǎo)航條垂直導(dǎo)航條<ul> <li>Autos</li> <li>Finance</li> <li>Games</li> <li>GeoCities</li> <li>Groups</li></ul>導(dǎo)航條垂直導(dǎo)航條90導(dǎo)航條*水平導(dǎo)航條<ul> <li><ahref="#"target="_blank">生活休閑</a></li> <li><ahref="#"target="_blank">文化視線</a></li> <li><ahref="#"target="_blank">心理測試</a></li> <li><ahref="#"target="_blank">家居家飾</a></li> <li><ahref="#"target="_blank">飲食男女</a></li> <li><ahref="#"target="_blank">科技數(shù)碼</a></li> <li><ahref="#"target="_blank">視頻大賞</a></li> <li><ahref="#"target="_blank">寫真美圖</a></li></ul>導(dǎo)航條*水平導(dǎo)航條91導(dǎo)航條導(dǎo)航條變體導(dǎo)航條導(dǎo)航條變體92滑動門技術(shù)*

滑動門技術(shù)*93圖像陰影和圖像映射*最簡單的圖像陰影原理：將一個大的陰影圖像作為一個容器div的背景，然后用負(fù)值的空白邊(margin)偏移圖像，從而顯示出陰影。圖像陰影和圖像映射*最簡單的圖像陰影94圖像陰影和圖像映射*照片相框效果的圖像陰影原理：給圖像加上邊框(border)和填充(padding)。圖像陰影和圖像映射*照片相框效果的圖像陰影95圖像陰影和圖像映射*純CSS的圖像陰影原理：分別給容器div，img，a設(shè)置邊框，然后設(shè)置相對定位，向上和向左各便宜一個像素。通過同一個邊框顏色的漸變形成陰影。圖像陰影和圖像映射*純CSS的圖像陰影96圖像陰影和圖像映射*CSS的圖像映射原理：將包含圖像的容器div相對定位，然后設(shè)置a為塊級標(biāo)簽，并將其絕對定位，設(shè)置其定位的偏移量(例如top和left)到要包含熱點(diǎn)位置的圖像上。為了修正IE和Ope