请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

QQ登录

只需一步,快速开始

新浪微博登陆

只需一步, 快速开始

切换风格 注册 找回密码

html5源码-html5教程网


查看: 28363|回复: 15

HTML5 内联框架iFrame

[复制链接]

2

主题

0

听众

51

积分

注册会员

Rank: 2

贡献
0
金钱
2
发表于 2016-5-6 15:01:34 |显示全部楼层
由于现在frame和frameset很少使用,已经过时了,已经被div+CSS代替了,所以,这里只是举例说明一下,当下还在使用的内联框架iFrame
所谓的iFrame内联框架,我的理解就是在网页内部嵌套一个网页,并且可以一级一级地嵌套下去。

示例如下:
/*
示例由index.html和iframe1.html、iframe2.html、iframe3.html组成
*/
先上一张效果图,图片后面是完整代码。
点击后
完整代码如下
index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6. </head>
  7. <!--注意,这里没有body元素-->
  8. index
  9. <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>


  10. <iframe src="iframe1.html" frameborder="1" width="800px" height="800px"></iframe>
  11. </html>
复制代码
iframe1.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe1</title>
  6. </head>
  7. <body bgcolor="red">
  8. iFrame1
  9. <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>


  10. <iframe src="iframe2.html" frameborder="0" width="600px" height="600px"></iframe>
  11. </body>
  12. </html>
复制代码
iframe2.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe2</title>
  6. </head>
  7. <body bgcolor="green">
  8. iFrame2
  9. <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a>


  10. <iframe src="iframe3.html" frameborder="0" width="400px" height="400px"></iframe>
  11. </body>
  12. </html>
复制代码
iframe3.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>iframe3</title>
  6. </head>
  7. <body bgcolor="yellow">
  8. iFrame3
  9. <a href="http://www.cnblogs.com/czp2016/" frameborder="1">czp_2016のblog</a></body>
  10. </html>
复制代码
貌似各主流网站没有采用这种布局的,应用范围也比较少了。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册 新浪微博登陆

0

主题

0

听众

21

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-6 16:44:44 |显示全部楼层
发发呆,回回帖,工作结束~
回复

使用道具 举报

0

主题

0

听众

7

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-7 12:02:44 |显示全部楼层
LZ帖子不给力,勉强给回复下吧
回复

使用道具 举报

0

主题

0

听众

21

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-7 19:48:21 |显示全部楼层
我是个凑数的。。。
回复

使用道具 举报

0

主题

0

听众

8

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-7 19:52:46 |显示全部楼层
没人回帖。。。我来个吧
回复

使用道具 举报

2

主题

0

听众

51

积分

注册会员

Rank: 2

贡献
0
金钱
1
发表于 2016-5-7 19:54:34 |显示全部楼层
看起来不错
回复

使用道具 举报

0

主题

0

听众

21

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-7 20:17:51 |显示全部楼层
好东西,我支持。。刚好要这两个工具
回复

使用道具 举报

1

主题

0

听众

45

积分

新手上路

Rank: 1

贡献
0
金钱
1
发表于 2016-5-8 23:05:05 |显示全部楼层
不错哦 真 的很实用
回复

使用道具 举报

0

主题

0

听众

16

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-12 02:37:34 |显示全部楼层
珍爱生命,果断回帖。
回复

使用道具 举报

0

主题

0

听众

8

积分

新手上路

Rank: 1

贡献
0
金钱
0
发表于 2016-5-13 20:57:10 |显示全部楼层
大人,此事必有蹊跷!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆



Archiver|手机版|     

HTML5教程网 Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部