酷知百科網

位置:首頁 > 遊戲數碼 > IT技術

如何製作框架網頁?

IT技術1.28W

在學習web前端的時候,會學習到關於框架的內容,框架可以將同一個頁面分成不同的幾部分,每一部分加載不同的網頁,我教大家實現一個頁面分成兩部分,點擊左邊部分的連結在右邊部分顯示

操作方法

(01)新建一個網頁檔案frame.html,後綴名是html,用sublime Text開啟

如何製作框架網頁?

(02)然後寫上網頁的基本結構,內容如下<!DOCTYPE html><html><head><meta charset="utf-8"><title>1</title></head><body>您的瀏覽器不支援框架</body></html>

如何製作框架網頁? 第2張

(03)框架標籤必須卸載head標籤中,在head標籤中添加如下內容<frameset cols="20%,80%" border="1"><frame src="./left.html" name=""></frame><frame src="https://zhinan.sogou.com/" name="right"></frame></frameset>

如何製作框架網頁? 第3張

(04)在當前目錄下新建一個網頁檔案,名字必須和上面的框架原始碼中使用的名字想透過,這裏是left.html,然後寫上如下內容<!DOCTYPE html><html><head><meta charset="utf-8"><title>left</title></head><body><ul><li><a href="https://zhinan.sogou.com/" target="right">首頁</a></li><li><a href="https://wenwen.sogou.com/?pid=zn.wenwen&ch=zn.daohang.wenwen&src=zhinan" target="right">問問</a></li><li><a href="http://pic.sogou.com/" target="right">圖片</a></li></ul></body></html>

如何製作框架網頁? 第4張

(05)使用瀏覽器開啟frame.html檔案,結果如下

如何製作框架網頁? 第5張

(06)點擊左邊的檔案,右邊就會顯示結果

如何製作框架網頁? 第6張
標籤:網頁 框架