章倒三角滑動(dòng)門(mén)及那些常見(jiàn)

BF-TECHWeb前端開(kāi)發(fā)工程師就業(yè)課程

課程三

Web前端設(shè)計(jì)師之內(nèi)功修煉-CSS高級(jí)及兼容Hack技術(shù)

講師：叮咚第1章倒三角滑動(dòng)門(mén)及IE6的那些常見(jiàn)bug課程內(nèi)容特殊符號(hào)制作倒三角滑動(dòng)門(mén)技術(shù)IE6雙邊距bugIE6中兼容png24背景透明IE的濾鏡用圖片背景。用border制作倒三角。特殊符號(hào)◆構(gòu)造倒三角。倒三角制作

所謂滑動(dòng)門(mén)技術(shù)，就是標(biāo)簽像一個(gè)滑動(dòng)門(mén)一樣，可以根據(jù)內(nèi)容的大小自由滑動(dòng)。下面通過(guò)一個(gè)實(shí)例來(lái)說(shuō)明其原理。HTML結(jié)構(gòu)： <ahref=“”><span>文字</span></a>使用背景：

網(wǎng)頁(yè)效果：滑動(dòng)門(mén)技術(shù)

滑動(dòng)門(mén)的原理：將圖片分為左右兩部分，左側(cè)圖片很窄，包含于a的background屬性中，是固定不變的，而右側(cè)圖片要做的盡可能寬一些。嵌套在span中的background屬性中，處于右上角，且距離左側(cè)留出左側(cè)圖片的寬度，以便左側(cè)圖片顯示，這樣，由于右側(cè)圖片足夠長(zhǎng)，隨著文本增長(zhǎng)，不會(huì)超過(guò)其長(zhǎng)度，就好像可以隨文本長(zhǎng)度變化而變化一樣。滑動(dòng)門(mén)技術(shù)

怎么產(chǎn)生：

當(dāng)父元素?zé)o浮動(dòng)，其子元素有浮動(dòng)且有左右方向的外邊距且與父元素相鄰，此時(shí)有可能產(chǎn)生。解決辦法： display：inline；IE6雙邊距bug

濾鏡解決方法：_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="logo.png");注意：濾鏡的圖片路徑是以頁(yè)面為基點(diǎn)，并非以CSS文件。用js插件解決：<!--[ifIE6]><scriptlanguage="javascript"type="text/javascript"src="js/DD_belatedPNG_0.0.8a-min.js"></script><scripttype="text/javascript"language="javascript">DD_belatedPNG.fix('background,img');</script><![endif]-->IE6中兼容png24背景透明

不透明度：opacity:0.5;filter:alpha(opacity=50);注意：此透明方法會(huì)將父元素中所有元素都進(jìn)行不透明度的變化。不透明度（不影響子元素）：相關(guān)代碼IE的濾鏡

總結(jié)三種倒三角優(yōu)缺點(diǎn)IE6雙邊距bug怎么產(chǎn)生的？課后作業(yè)作業(yè)：