Div+Css教程模板無憂>建站教程>Div+Css教程>DIV+CSS實(shí)例>

DivCSS布局實(shí)例：詳解建立Flash上面浮動(dòng)層_DIV+CSS實(shí)例

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　
　　版權(quán)聲明：本文由九扎、MrJin共同完成，如需轉(zhuǎn)載請聯(lián)系作者。

　　最近群里有很多朋友在討論，如何在Flash上面建立一個(gè)層，這個(gè)層位于Flash之上而不被Flash覆蓋。這是一個(gè)比較常見的案例，在現(xiàn)實(shí)工作中有著很大的意義。
　　例如，我們在頁面頂端設(shè)置一個(gè)Flash動(dòng)畫，但想在這個(gè)動(dòng)畫上面浮動(dòng)一層，可以放置鏈接或說明文字等。這樣的編碼更加易于修改，也更輕易被搜索引擎收錄；更重要的是，假如用戶屏蔽了Flash，依然可以看到浮動(dòng)層上的文字。
　　廢話不多說，看這個(gè)實(shí)例的最終效果。

　　紅色的區(qū)域即是浮于Flash之上的層。層內(nèi)放了一個(gè)文字鏈接。
　　看下面的XHTML編碼：

示例代碼 [www.zhaotila.cn]

　　建立一個(gè)DIV，設(shè)置其ID為flash。插入一個(gè)flash動(dòng)畫hehe.swf。
　　在這個(gè)DIV內(nèi)部，嵌套一個(gè)DIV，設(shè)置ID為nav。
　　下面我們開始CSS編碼：

示例代碼 [www.zhaotila.cn]

body {
margin:0;
padding:0;
font-size:12px;
}
#flash {
margin:20px auto 0 auto;
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:1px solid #fff;
}
#nav a {
color:#fff;
}
#nav a:hover {
color:#ff0;
}

　　body是整體布局聲明。
　　ID為flash的層設(shè)置為，距離頂部20px并水平居中對齊，寬度與高度正好與FLASH文件相同，應(yīng)用相對定位。
　　ID為nav的層設(shè)置為，絕對定位，距離左側(cè)與頂部分別是50px、30px，寬度為400px，行高30px，文字居中對齊，文字加粗。層的背景色為#f00紅色。設(shè)置邊框?yàn)橐幌笏氐膶?shí)線并設(shè)置成白色。
　　對nav層的鏈接進(jìn)行設(shè)置，鏈接文字顏色為白色，懸停狀態(tài)為淺黃色。
　　至此我們初步編碼已經(jīng)完成。看看是何效果：

代碼調(diào)試框 [www.zhaotila.cn]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Div CSS布局實(shí)例：詳解在Flash上面建立浮動(dòng)層</title>
<style type="text/css">

body {
	margin:0;
	padding:0;
	font-size:12px;
}
#flash {
	margin:20px auto 0 auto;
	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:1px solid #fff;
}
#nav a {
	color:#fff;
}
#nav a:hover {
	color:#ff0;
}

</style>
</head>

</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　運(yùn)行后我們發(fā)現(xiàn)，并沒有出現(xiàn)想要的效果。nav層根本沒有出現(xiàn)，不知道這個(gè)家伙跑到哪里去了。
　　我們在HTML代碼中增加一條語句：

示例代碼 [www.zhaotila.cn]

　　設(shè)置Flash為透明效果，看看運(yùn)行效果：

代碼調(diào)試框 [www.zhaotila.cn]

body {
	margin:0;
	padding:0;
	font-size:12px;
}
#flash {
	margin:20px auto 0 auto;
	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:1px solid #fff;
}
#nav a {
	color:#fff;
}
#nav a:hover {
	color:#ff0;
}

</style>
</head>

</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　在IE中，已經(jīng)達(dá)到了最終的效果，但是在FF中，我們發(fā)現(xiàn)動(dòng)畫不見了。
　　為了能兼容FF顯示，我們在HTML中增加下面的代碼：

示例代碼 [www.zhaotila.cn]

　　現(xiàn)在我們看看是什么運(yùn)行效果了：

代碼調(diào)試框 [www.zhaotila.cn]

body {
	margin:0;
	padding:0;
	font-size:12px;
}
#flash {
	margin:20px auto 0 auto;
	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:1px solid #fff;
}
#nav a {
	color:#fff;
}
#nav a:hover {
	color:#ff0;
}

</style>
</head>

</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　一切正常，在IE與FF中均實(shí)現(xiàn)了在Flash上面建立浮動(dòng)層。
　　此案例最需要大家注重的有以下幾個(gè)地方：

示例代碼 [www.zhaotila.cn]

　　1、Flash的容器層用相對定位position:relative;
　　2、浮動(dòng)在flash上面的層用絕對定位position:absolute;
　　3、Flash要設(shè)置成透明；
　　4、針對FF增加Flash的embed標(biāo)簽引用。

　　版權(quán)聲明：本文由九扎、MrJin共同完成，如需轉(zhuǎn)載請聯(lián)系作者。