Div CSS布局实例：详解建立Flash上面浮动层 -

chengxuetao

浏览: 1650959 次
性别:

最近访客更多访客>>

whzresponse

u012363178

wangyy

zhangdongl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Div CSS布局实例：详解建立Flash上面浮动层

博客分类：

WEB前端

最近群里有很多朋友在讨论，如何在Flash上面建立一个层，这个层位于Flash之上而不被Flash覆盖。这是一个比较常见的案例，在现实工作中有着很大的意义。
　　例如，我们在页面顶端设置一个Flash动画，但想在这个动画上面浮动一层，可以放置链接或说明文字等。这样的编码更加易于修改，也更容易被搜索引擎收录；更重要的是，如果用户屏蔽了Flash，依然可以看到浮动层上的文字。
　　废话不多说，看这个实例的最终效果。

　　红色的区域即是浮于Flash之上的层。层内放了一个文字链接。
　　看下面的XHTML编码：

Example Source Code [www.52css.com]

<divid="flash">
<objectclassid="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">
<paramname="movie"value="hehe.swf"/>
<paramname="quality"value="high"/>
</object>
<divid="nav"><ahref="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: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#fff;
}
#nava{
color:#fff;
}
#nava: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">

</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]

<paramname="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">

</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]

<embedsrc="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">

</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标签引用。

分享到：

Javascript压缩工具(Javascript compressed ... | 解决弹出层被Flash挡住的问题

2009-09-27 13:59
浏览 667
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Div CSS布局实例：详解建立Flash上面浮动层

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Div CSS布局实例：详解建立Flash上面浮动层

评论

发表评论

相关推荐

15款基于浏览器扩展的WEB开发工具

WEB 服务器调试利器 -- Tamper Data(转)

图片和文字放一起，不能居中的解决方法

深入浅出URL编码

【CSS布局.2】绝对定位和相对定位

【CSS布局.1】盒子模型

【CSS布局.4】五种CSS布局类型

【CSS布局.3】列表样式定义法

区别不同浏览器，CSS hack写法

常用CSS缩写语法总结

CSS颜色代码大全

CSS @import at规则

彻底弄懂CSS盒子模式之一

彻底弄懂CSS盒子模式之一

彻底弄懂CSS盒子模式之二

彻底弄懂CSS盒子模式之三

彻底弄懂CSS盒子模式之五

彻底弄懂CSS盒子模式之四

CSS 盒模型

DOM标准与IE的html元素事件模型区别

最近访客更多访客>>