首先我們要明白此框架集的作用:
實現在一個頁面中訪問多個html頁面的目的Frameset的用法:
//定義框架集
<frameset>
<frame src="demo.html" />
</frameset>
frame的屬性有:
src:鏈接的url
id:名稱
name:名稱
scrolling:是否滾動(yes/no/auto)
noresize:"noresize" 防止鼠標調整框架大小
Frameset的屬性有:
rows:"行數"
cols:"列數"
frameborder:"yes/no/0/1"
iframe的用法:
<iframe src="iframe.html" frameborder="0"></iframe>
其接受所有frame的屬性
實例:
下面我們設計一個頭部用iframe引入,左側是一個導航列表,右側是顯示內容的頁面
以下是關鍵實例代碼:
框架集頁面First.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>First</title> </head> <!--
作者：1107530849@qq.com
時間：2014-06-24
描述：注意此處body標簽是沒有的(noframes才顯示)
--> <frameset rows="10%,90%"> <frame src="Top.html" name="top"/> <frameset cols="15%,*"> <frame src="Home.html" name="home"/> <frame src="index1.html" name="index1"/> </frameset> <noframes> <body> 你的瀏覽器不支持frame </body> </noframes> </frameset> </html>
Top.html頁面已經iframe頁面
//top頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Top</title> </head> <body> <iframe src="iframe.html" border="0" frameborder="0"></iframe> </body> </html> //iframe頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Top</title> </head> <body> 我是通過iframe引入的top </body> </html>
左側導航頁面home.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Home</title> </head> <body> <ul> <!-- 作者：1107530849@qq.com 時間：2014-06-24 描述：關鍵點是target屬性,需要跟顯示頁面的name屬性一致 --> <li><a href="index1.html" target="index1">index1</a> </li> <li><a href="index2.html" target="index1">index2</a></li> <li><a href="index3.html" target="index1">index3</a></li> </ul> </body> </html>
導航鏈接頁面:
<!DOCTYPE html> <html> <head> <meta charset="" /> <title></title> </head> <body> index1 </body> </html>
最終效果:
