DIV CSS布局實(shí)例:建立Flash上面浮動(dòng)層
本節(jié)和大家重點(diǎn)討論一下如何在Flash上面建立浮動(dòng)層，我們?cè)陧?yè)面頂端設(shè)置一個(gè)Flash動(dòng)畫(huà)，但想在這個(gè)動(dòng)畫(huà)上面浮動(dòng)一層，可以放置鏈接或說(shuō)明文字等，這樣的編碼更加易于修改，也更容易被搜索引擎收錄，請(qǐng)看下文詳細(xì)介紹。
DIV CSS布局實(shí)例：詳解建立Flash上面浮動(dòng)層
如何在Flash上面建立一個(gè)層，這個(gè)層位于Flash之上而不被Flash覆蓋。這是一個(gè)比較常見(jiàn)的案例，在現(xiàn)實(shí)工作中有著很大的意義。
例如，我們?cè)陧?yè)面頂端設(shè)置一個(gè)Flash動(dòng)畫(huà)，但想在這個(gè)動(dòng)畫(huà)上面浮動(dòng)一層，可以放置鏈接或說(shuō)明文字等。這樣的編碼更加易于修改，也更容易被搜索引擎收錄；更重要的是，如果用戶(hù)屏蔽了Flash，依然可以看到浮動(dòng)層上的文字?？催@個(gè)實(shí)例的最終效果。
紅色的區(qū)域即是浮于Flash之上的層。層內(nèi)放了一個(gè)文字鏈接。
看下面的XHTML編碼：
- <div id="flash">
- <objectclassidobjectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-44553540000"
- codebase="http://download.macromedia.com/
- pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
- width="500"height="220">
- <paramnameparamname="movie"value="hehe.swf"/>
- <paramnameparamname="quality"value="high"/>
- </object>
- <dividdivid="nav">
- <ahrefahref="http://www.52css.com/css_websites_showcase/"
- title="CSS酷站欣賞">這是浮動(dòng)層</a></div>
- </div>
建立一個(gè)DIV，設(shè)置其ID為flash。插入一個(gè)flash動(dòng)畫(huà)hehe.swf。在這個(gè)DIV內(nèi)部，嵌套一個(gè)DIV，設(shè)置ID為nav。
CSS編碼：
- body{
- margin:0;
- padding:0;
- font-size:12px;
- }
- #flash{
- margin:20pxauto0auto;
- width:500px;
- height:220px;
- position:relative;
- }
- #nav{
- position:absolute;
- right:50px;
- top:30px;
- width:400px;
- line-height:30px;
- text-align:center;
- font-weight:bold;
- background:#f00;
- border:1pxsolid#Firefoxf;
- }
- #nava{
- color:#Firefoxf;
- }
- #nava:hover{
- color:#Firefox0;
- }
body是整體布局聲明。
ID為flash的層設(shè)置為，距離頂部20px并水平居中對(duì)齊，寬度與高度正好與FLASH文件相同，應(yīng)用相對(duì)定位。
ID為nav的層設(shè)置為，絕對(duì)定位，距離左側(cè)與頂部分別是50px、30px，寬度為400px，行高30px，文字居中對(duì)齊，文字加粗。層的背景色為#f00紅色。設(shè)置邊框?yàn)橐幌笏氐膶?shí)線(xiàn)并設(shè)置成白色。
對(duì)nav層的鏈接進(jìn)行設(shè)置，鏈接文字顏色為白色，懸停狀態(tài)為淺黃色。
至此我們初步編碼已經(jīng)完成?？纯词呛涡Ч?/p>
運(yùn)行后我們發(fā)現(xiàn)，并沒(méi)有出現(xiàn)想要的效果。nav層根本沒(méi)有出現(xiàn)，不知道這個(gè)家伙跑到哪里去了。我們?cè)贖TML代碼中增加一條語(yǔ)句：
- <paramnameparamname="wmode"value="transparent"/>
設(shè)置Flash為透明效果，看看運(yùn)行效果，在IE中，已經(jīng)達(dá)到了最終的效果，但是在Firefox中，我們發(fā)現(xiàn)動(dòng)畫(huà)不見(jiàn)了。
為了能兼容Firefox顯示，我們?cè)贖TML中增加下面的代碼：
- <embedsrcembedsrc="hehe.swf"quality="high"
- wmode="transparent"
- pluginspage="http://www.macromedia.com/go/getflashplayer"
- type="application/x-shockwave-flash"
- width="500"height="220"></embed>
一切正常，在IE與Firefox中均實(shí)現(xiàn)了在Flash上面建立浮動(dòng)層。
◆此案例最需要大家注意的有以下幾個(gè)地方：
1、Flash的容器層用相對(duì)定位position:relative;
2、浮動(dòng)在flash上面的層用絕對(duì)定位position:absolute;
3、Flash要設(shè)置成透明；
4、針對(duì)Firefox增加Flash的embed標(biāo)簽引用。
【編輯推薦】
- 跨瀏覽器兼容的四大CSS編碼準(zhǔn)則
- DIV+CSS與表格建站的差別
- CSS樣式表中屬性選擇器四種格式
- Div+CSS標(biāo)準(zhǔn)化的優(yōu)點(diǎn)
- DIV CSS解決不規(guī)則文字排版問(wèn)題
