div替换iframe(div代替iframe)

http://www.itjxue.com  2023-02-26 04:48  来源:未知  点击次数: 

div里面怎么用iframe

Div被Select挡住,是一个比较常见的问题。

有的朋友通过把div的内容放入iframe或object里来解决。

可惜这样会破坏页面的结构,互动性不大好。

这里采用的方法是:

虽说div直接盖不住select

但是div可以盖iframe,而iframe可以盖select,

所以,把一个iframe来当作div的底,

这个div就可以盖住select了.

引用内容

1"iframe 做为层的载体"后,

层与主页面的互动是窗口间的互动

2“用一个iframe当div的底”后,

层与主页面的互动是窗口内的互动

另外,对于方法1,

层的大小变化就会要求iframe的大小随着变化

从主页面到这个层会导致window的blur.

对于方法2,

只是在原有的div前加上这一句

iframe style="position:absolute;z-index:9;width:e-xpression(this.nextSibling.offsetWidth);height:e-xpression(this.nextSibling.offsetHeight);top:e-xpression(this.nextSibling.offsetTop);left:e-xpression(this.nextSibling.offsetLeft);" frameborder="0" /iframe

试用大家的方法之后发现还是有一点小问题,出来的是白色浮动,而不是本来应该出来的绿色浮动层。

问题依然存在:

三、调试完成

最后发现应该稍作修改,一下代码是最终的方案:

1、在iframe的style里面一定要加上z-index而且要设为-1,这样它就不会把原来的div层也一起覆盖掉。

2、把iframe/iframe放在div层的上面就可以了。

程序代码

iframe style="position:absolute;z-index:-1;width:e-xpression(this.nextSibling.offsetWidth);height:e-xpression(this.nextSibling.offsetHeight);top:e-xpression(this.nextSibling.offsetTop);left:e-xpression(this.nextSibling.offsetLeft);" frameborder="0"

/iframe

div class="submenutvc" id="tvc"

dla href="#"汽车/a/dl

dla href="#"化妆品/a/dl

dla href="#"房地产/a/dl

dla href="#"日用品/a/dl

/div

Div+CSS如何实现iframe效果?

看了两遍,算是看懂了你的问题,frame是用来区域划分的,用div+css实现的话有两种方法一个是表格的形式,至于你想要多大一些要求都可以达到,合并单元格都可以。还可以直接CSS定义盒子,其实div+css你就可以理解是一个盒子 这个盒子多大 对齐方式 边距同样能调整到区块的效果,这两种方法都使用div+css实现的 ,当然是你的会div+css,我也不知道你要的什么效果的 也不可能给你把代码写出来 就这样吧

用div+css代替iframe

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title鼠标点击左侧,右侧显示内容/title

script type="text/javascript" src="jquery-1.7.2.min.js"/script

script type="text/javascript"

$(function (){

$("#newsTab a").each(function(index){//each变例,每一个a标签

$(this).click(function(){//鼠标滑过a的时候

$(".news").addClass("dis")//给news添加样式dis

$(".news:eq("+index+")").removeClass("dis")//给对应news的index索引值删除dis样式

$("#newsTab a").removeClass("hover")//先删除所有的a的样式hover

$(this).addClass("hover")//给对应的a添加样式hover

})

})

})

/script

style type="text/css"

*{padding:0;margin:0;}

li{ list-style-type:none;}

.box{ width:1000px; height:500px; border:1px solid #333; margin:0 auto;}

#newsTab{width:200px; height:500px; border-right:1px solid #333; float:left;}

#newsTab li{ width:200px;}

#newsTab a{ width:200px; height:28px; line-height:28px; text-decoration:none; color:#fff; background:#ccc; border-bottom:1px solid #777; display:inline-block; text-align:center;}

.news{width:799px;height:500px;background:#ccc; float:left}

.dis{display:none;}

#newsTab .hover{background:red;font-weight:600;}

/style

/head

body

div class="box"

ul id="newsTab"

lia href="#" class="hover"国内新闻/a/li

lia href="#"娱乐新闻/a/li

lia href="#"体育新闻/a/li

/ul

ul class="news"

li国内昨天下公交车的时候,捡到5块,回到家发现公交卡丢(刚充了100)/li

/ul

ul class="news dis"

li早上被雨淋了/li

/ul

ul class="news dis"

li北京3-1领先广东队/li

/ul

/div

/body

/html

iframe刷新有白色一闪而过 如何去掉或者替换iframe也可以

用DIV代替iframe,再用ajax调用PHP服务器端文件到div,这种方式非常好,不过要有点ajax方面的知识(掌握jQuery就行)

div覆盖iframe

Div1得放在iframe的上面

style

.main{width:60%;?margin:auto;?position:relative}

.div1{?width:100%;height:500px;?background-color:#CEECC1;?position:absolute;?left:0;?top:0}

/style?

div?class="main"

div?class="div1"/div

iframe?src="中文字.html"?width="100%"?height="500"/???????

/div

如何把这个iframe替换成div?

。。。看你引用的数据来源喽?

如果只是静态页,你用DIV的方式制作一下而已,那就是你的网站了。

如果有数据接口。也可以自己制作,然后请求接口。(ajax)

如果数据源于对方,对方又不提供接口的话。只能IFRAEM.那就没办法了

(责任编辑:IT教学网)

更多

推荐Mail服务器文章