iframe--浮动窗口

2017-09-13 08:20:43来源:CSDN作者:wangruihong8人点击

分享

在上一篇文章中我们说到,frameset框架在使用时,该页面不允许出现body和body体。但有时我们需要在一个含有<body>体的页面嵌入另外一个页面,形成画中画的效果,怎么处理?这时我们就用到iframe元素(浮动窗口)

接下来我们就以一个案例为例,介绍iframe是怎样使用的。

首先先看一下最后的效果图:

从这个图中我们可以看出:网页主体含有一行文字和一个嵌入的框架,并且在该嵌入的框架中显示百度的主页。那么这种效果是怎样做出来的呢,下面上代码。

观察代码我们可以得知:在body块内部,确实嵌入了另外一个页面,用了一个全新的元素--iframe.

<iframe src="你想要在框架中显示的页面" width="该框架的宽度" height="该框架的高度"/>

如果想要点击一个超链接后,超链接的页面替换该框架的页面,就用到了我们上一篇文章中写道的知识--用target

代码如下:

效果图:

点击前:

点击后:

这样,就可以实现在body内嵌入另一个页面了,并且可以利用超链接,在点击超链接后,可以将页面替换掉。当然一个网页中也可以实现多个框架共存,只要多写几个<iframe src="xxx">xxx</iframe>就可以了。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台