Div CSS布局实例:详解建立Flash上面浮动层
2009-09-27 13:59
561 查看
最近群里有很多朋友在讨论,如何在Flash上面建立一个层,这个层位于Flash之上而不被Flash覆盖。这是一个比较常见的案例,在现实工作中有着很大的意义。
例如,我们在页面顶端设置一个Flash动画,但想在这个动画上面浮动一层,可以放置链接或说明文字等。这样的编码更加易于修改,也更容易被搜索引擎收录;更重要的是,如果用户屏蔽了Flash,依然可以看到浮动层上的文字。
废话不多说,看这个实例的最终效果。
红色的区域即是浮于Flash之上的层。层内放了一个文字链接。
看下面的XHTML编码:
Example Source Code [www.52css.com]
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="220">
<param name="movie" value="hehe.swf" />
<param name="quality" value="high" />
</object>
<div id="nav"><a href="http://www.52css.com/css_websites_showcase/" title="CSS酷站欣赏">这是浮动层</a></div>
</div>
建立一个DIV,设置其ID为flash。插入一个flash动画hehe.swf。
在这个DIV内部,嵌套一个DIV,设置ID为nav。
下面我们开始CSS编码:
Example Source Code [www.52css.com]
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的层设置为,距离顶部20px并水平居中对齐,宽度与高度正好与FLASH文件相同,应用相对定位。
ID为nav的层设置为,绝对定位,距离左侧与顶部分别是50px、30px,宽度为400px,行高30px,文字居中对齐,文字加粗。层的背景色为#f00红色。设置边框为一象素的实线并设置成白色。
对nav层的链接进行设置,链接文字颜色为白色,悬停状态为浅黄色。
至此我们初步编码已经完成。看看是何效果:
Source Code to Run [www.52css.com]
<!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布局实例:详解在Flash上面建立浮动层</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>
<div id="flash"> <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="500" height="220"> <param name="movie"
value="attachments/month_0711/623/hehe.swf" /> <param
name="quality" value="high" /> </object> <div
id="nav"><a href="http://www.52css.com/css_websites_showcase/"
title="CSS酷站欣赏">这是浮动层</a></div>
</div>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
运行后我们发现,并没有出现想要的效果。nav层根本没有出现,不知道这个家伙跑到哪里去了。
我们在HTML代码中增加一条语句:
Example Source Code [www.52css.com]
<param name="wmode" value="transparent" />
设置Flash为透明效果,看看运行效果:
Source Code to Run [www.52css.com]
<!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布局实例:详解在Flash上面建立浮动层</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>
<div id="flash"> <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="500" height="220"> <param name="movie"
value="attachments/month_0711/623/hehe.swf" /> <param
name="quality" value="high" /> <param name="wmode"
value="transparent" /> </object> <div id="nav"><a
href="http://www.52css.com/css_websites_showcase/"
title="CSS酷站欣赏">这是浮动层</a></div>
</div>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
在IE中,已经达到了最终的效果,但是在FF中,我们发现动画不见了。
为了能兼容FF显示,我们在HTML中增加下面的代码:
Example Source Code [www.52css.com]
<embed src="hehe.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="220"></embed>
现在我们看看是什么运行效果了:
Source Code to Run [www.52css.com]
<!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布局实例:详解在Flash上面建立浮动层</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>
<div id="flash"> <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="500" height="220"> <param name="movie"
value="attachments/month_0711/623/hehe.swf" /> <param
name="quality" value="high" /> <param name="wmode"
value="transparent" /> <embed
src="attachments/month_0711/623/hehe.swf" quality="high"
wmode="transparent"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="500"
height="220"></embed> </object> <div
id="nav"><a href="http://www.52css.com/css_websites_showcase/"
title="CSS酷站欣赏">这是浮动层</a></div>
</div>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
一切正常,在IE与FF中均实现了在Flash上面建立浮动层。
此案例最需要大家注意的有以下几个地方:
Example Source Code [www.52css.com]
1、Flash的容器层用相对定位position:relative;
2、浮动在flash上面的层用绝对定位position:absolute;
3、Flash要设置成透明;
4、针对FF增加Flash的embed标签引用。
例如,我们在页面顶端设置一个Flash动画,但想在这个动画上面浮动一层,可以放置链接或说明文字等。这样的编码更加易于修改,也更容易被搜索引擎收录;更重要的是,如果用户屏蔽了Flash,依然可以看到浮动层上的文字。
废话不多说,看这个实例的最终效果。
红色的区域即是浮于Flash之上的层。层内放了一个文字链接。
看下面的XHTML编码:
Example Source Code [www.52css.com]
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="220">
<param name="movie" value="hehe.swf" />
<param name="quality" value="high" />
</object>
<div id="nav"><a href="http://www.52css.com/css_websites_showcase/" title="CSS酷站欣赏">这是浮动层</a></div>
</div>
建立一个DIV,设置其ID为flash。插入一个flash动画hehe.swf。
在这个DIV内部,嵌套一个DIV,设置ID为nav。
下面我们开始CSS编码:
Example Source Code [www.52css.com]
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的层设置为,距离顶部20px并水平居中对齐,宽度与高度正好与FLASH文件相同,应用相对定位。
ID为nav的层设置为,绝对定位,距离左侧与顶部分别是50px、30px,宽度为400px,行高30px,文字居中对齐,文字加粗。层的背景色为#f00红色。设置边框为一象素的实线并设置成白色。
对nav层的链接进行设置,链接文字颜色为白色,悬停状态为浅黄色。
至此我们初步编码已经完成。看看是何效果:
Source Code to Run [www.52css.com]
<!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布局实例:详解在Flash上面建立浮动层</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>
<div id="flash"> <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="500" height="220"> <param name="movie"
value="attachments/month_0711/623/hehe.swf" /> <param
name="quality" value="high" /> </object> <div
id="nav"><a href="http://www.52css.com/css_websites_showcase/"
title="CSS酷站欣赏">这是浮动层</a></div>
</div>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
运行后我们发现,并没有出现想要的效果。nav层根本没有出现,不知道这个家伙跑到哪里去了。
我们在HTML代码中增加一条语句:
Example Source Code [www.52css.com]
<param name="wmode" value="transparent" />
设置Flash为透明效果,看看运行效果:
Source Code to Run [www.52css.com]
<!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布局实例:详解在Flash上面建立浮动层</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>
<div id="flash"> <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="500" height="220"> <param name="movie"
value="attachments/month_0711/623/hehe.swf" /> <param
name="quality" value="high" /> <param name="wmode"
value="transparent" /> </object> <div id="nav"><a
href="http://www.52css.com/css_websites_showcase/"
title="CSS酷站欣赏">这是浮动层</a></div>
</div>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
在IE中,已经达到了最终的效果,但是在FF中,我们发现动画不见了。
为了能兼容FF显示,我们在HTML中增加下面的代码:
Example Source Code [www.52css.com]
<embed src="hehe.swf" quality="high" wmode="transparent" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="500" height="220"></embed>
现在我们看看是什么运行效果了:
Source Code to Run [www.52css.com]
<!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布局实例:详解在Flash上面建立浮动层</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>
<div id="flash"> <object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
width="500" height="220"> <param name="movie"
value="attachments/month_0711/623/hehe.swf" /> <param
name="quality" value="high" /> <param name="wmode"
value="transparent" /> <embed
src="attachments/month_0711/623/hehe.swf" quality="high"
wmode="transparent"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="500"
height="220"></embed> </object> <div
id="nav"><a href="http://www.52css.com/css_websites_showcase/"
title="CSS酷站欣赏">这是浮动层</a></div>
</div>
</body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
一切正常,在IE与FF中均实现了在Flash上面建立浮动层。
此案例最需要大家注意的有以下几个地方:
Example Source Code [www.52css.com]
1、Flash的容器层用相对定位position:relative;
2、浮动在flash上面的层用绝对定位position:absolute;
3、Flash要设置成透明;
4、针对FF增加Flash的embed标签引用。
相关文章推荐
- Div CSS布局实例:详解建立Flash上面浮动层
- DIV CSS 布局定位 实例 菜单导航 详解
- DIV CSS布局实例:用css网站布局之十步实录!(目录)
- Android 动态改变布局实例详解
- DIV CSS绝对定位布局案例 position布局实例
- Maven多模块布局实例详解
- Maven多模块布局实例详解
- 第七篇Bootstrap表单布局实例代码详解(三种表单布局)
- 靠左靠右实际布局DIV CSS实例模块
- DIV CSS网页布局实例:十步学会用CSS建站
- Android开发高仿课程表的布局实例详解
- Android编程之绝对布局AbsoluteLayout和相对布局RelativeLayout实例详解
- Flash游戏开发实例①打砖块-2-球的动作建立
- 第七篇Bootstrap表单布局实例代码详解(三种表单布局)
- Android Listview中显示不同的视图布局详解及实例代码
- DIV CSS布局实例:CSS标签切换代码
- 实例解说TCP连接建立及结束过程详解
- Android 百分比布局详解及实例代码
- CSS3 弹性布局弹性流(flex-flow)属性详解和实例
- Maven多模块布局实例详解