書名: 精通HTML5+CSS3+JavaScript網頁設計(視頻教學版)(第2版)作者名: 王英英本章字數: 345字更新時間: 2019-12-09 14:23:54
3.4 浮動框架iframe
HTML5中已經不支持frameset框架,但是它仍然支持iframe浮動框架的使用。浮動框架可以自由控制窗口大小,可以配合表格隨意地在網頁中的任何位置插入窗口。實際上就是在窗口中再創建一個窗口。
使用iframe創建浮動框架的格式如下:
<iframe src="鏈接對象" >
其中,src表示浮動框架中顯示對象的路徑,可以是絕對路徑,也可以是相對路徑。例如,下面的代碼是在浮動框架中顯示到百度網站。
【例3.6】(實例文件:ch03\3.6.html)

在IE 11.0中預覽網頁效果,如圖3-9所示。

圖3-9 浮動框架效果
從預覽結果可見,浮動框架在頁面中又創建了一個窗口,默認情況下浮動框架的寬度和高度為220×120像素。如果需要調整浮動框架尺寸,請使用CSS樣式。修改上述浮動框架尺寸,需在<head></head>標記中間增加如下CSS代碼。

在IE 11.0中預覽網頁效果,如圖3-10所示。

圖3-10 修改寬度和高度的浮動框架
技巧提示
在HTML5中,iframe僅支持src屬性,再無其他屬性。
推薦閱讀
- After Effects CS6從入門到精通
- 眾妙之門:自由網站設計師成功之道
- jQuery網頁特效設計基礎教程(慕課版·第2版)
- Web前端開發精品課 HTML與CSS進階教程
- 網頁制作與網站建設寶典
- Dreamweaver CC中文版網頁設計與制作從新手到高手
- 全能網頁設計師精煉手冊
- 網頁設計與制作(Dreamweaver CS6)
- 網頁制作實用教程(第3版)
- 網頁設計與制作Dreamweaver CS6標準教程(第2版)
- Illustrator平面設計180例五步通
- 社交網站界面設計(原書第2版)
- CSS圖鑒
- 人人都玩開心網:Ext JS+Android+SSH整合開發Web與移動SNS
- 淘寶店鋪頁面設計與裝修實戰教程