![精通HTML5+CSS3+JavaScript网页设计(视频教学版)(第2版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/776/26846776/b_26846776.jpg)
上QQ阅读APP看书,第一时间看更新
3.4 浮动框架iframe
HTML5中已经不支持frameset框架,但是它仍然支持iframe浮动框架的使用。浮动框架可以自由控制窗口大小,可以配合表格随意地在网页中的任何位置插入窗口。实际上就是在窗口中再创建一个窗口。
使用iframe创建浮动框架的格式如下:
<iframe src="链接对象" >
其中,src表示浮动框架中显示对象的路径,可以是绝对路径,也可以是相对路径。例如,下面的代码是在浮动框架中显示到百度网站。
【例3.6】(实例文件:ch03\3.6.html)
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P59_129348.jpg?sign=1738873311-zRi9ABBqcyePT01NKvPfRcDPFbx1l7cx-0-447a2cd7175ce59f08045dc9397c1790)
在IE 11.0中预览网页效果,如图3-9所示。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P59_68842.jpg?sign=1738873311-X6HbDfsDGxCqqZ1ooKCI9pLyLhc7QQB6-0-b2e638b2d9810f281b574765b1b2c13b)
图3-9 浮动框架效果
从预览结果可见,浮动框架在页面中又创建了一个窗口,默认情况下浮动框架的宽度和高度为220×120像素。如果需要调整浮动框架尺寸,请使用CSS样式。修改上述浮动框架尺寸,需在<head></head>标记中间增加如下CSS代码。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P59_129349.jpg?sign=1738873311-uFckIKu82f1WGxc2BQLeJJ089kpnyf2f-0-b77ae69468989c8c6f633b1b893e8bc3)
在IE 11.0中预览网页效果,如图3-10所示。
![](https://epubservercos.yuewen.com/DBA090/15289821504504406/epubprivate/OEBPS/Images/Figure-P60_68915.jpg?sign=1738873311-31IR9qsG7H004M9m2KCvkgw5QRoR9MLd-0-d024d3c877b1ee1d1feb1bcadc6d63af)
图3-10 修改宽度和高度的浮动框架
技巧提示
在HTML5中,iframe仅支持src属性,再无其他属性。