3.4 浮动框架iframe_HTML5+CSS3+jQuery Mobile+Bootstrap开发APP从入门到精通（视频教学版）-QQ阅读男生中文都市网

3.4 浮动框架iframe

HTML5中已经不支持frameset框架，但是它仍然支持iframe浮动框架的使用。浮动框架可以自由控制窗口大小，可以配合表格随意地在网页的任何位置插入窗口。实际上就是在窗口中再创建一个窗口。

使用iframe创建浮动框架的格式如下：

<iframe src="链接对象" >

其中，src表示浮动框架中显示对象的路径，可以是绝对路径，也可以是相对路径。例如，下面的代码是在浮动框架中显示到百度网站。

【例3.6】（实例文件：ch03\3.6.html）

<!DOCTYPE html>
<html>
<head>
<title>浮动框架中显示百度网站</title>
</head>
<body>
<iframe src="http://www.baidu.com"></iframe>
</body>
</html>

在IE 11.0中预览网页效果如图3-9所示。

图3-9 浮动框架效果

从预览结果可见，浮动框架在页面中又创建了一个窗口。默认情况下，浮动框架的宽度和高度为220×120像素，如果需要调整浮动框架尺寸，请使用CSS样式。修改上述浮动框架尺寸，需在<head></head>标记中间增加如下CSS代码。

在IE 11.0中预览网页效果如图3-10所示。

图3-10 修改宽度和高度的浮动框架

技巧提示

在HTML5中，iframe仅支持src属性，再无其他属性。