章倒三角滑動門及那些常見_第1頁
章倒三角滑動門及那些常見_第2頁
章倒三角滑動門及那些常見_第3頁
章倒三角滑動門及那些常見_第4頁
章倒三角滑動門及那些常見_第5頁
已閱讀5頁，還剩7頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

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

課程三

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

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

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

網(wǎng)頁效果：滑動門技術(shù)

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

怎么產(chǎn)生：

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

濾鏡解決方法：_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="logo.png");注意：濾鏡的圖片路徑是以頁面為基點，并非以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);注意：此透明方法會將父元素中所有元素都進行不透明度的變化。不透明度（不影響子元素）：相關(guān)代碼IE的濾鏡

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論