frameset怎麽框架內部跳轉
版權聲明:本文為博主原創文章,未經博主允許不得轉載。
分幀
HTML 框架是劃分窗口的技術 就是把一個窗口分隔成多個窗口 每個窗口顯示不同的網頁內容多用於後臺 也叫做分幀
1.Frameset
註意 如果你在頁面上寫frameset 了那麽就不能出現body 因為他們兩個見面就打仗
<frameset></frameset>
常用屬性:
Cols 分列單位可以寫像素也可以寫百分比 之後除上面內容外還可以寫*(*代表剩余所有)
Rows 分行單位可以寫像素也可以寫百分比 之後除上面內容外還可以寫*(*代表剩余所有)
Frameborder 分幀邊框
Border 邊框粗細
2.Frame
把窗口分成幾份就要有對應的幾個frame標簽出現
<frame />
常用屬性:
Name 給設置的區域一個名字 用作跳轉使用
Src 默認的顯示頁面鏈接
Noresize 不允許調整邊框
Scrolling 滾動條
Auto|yes 出現滾動條|no 不出現滾動條
列如,我們分三個頁面作為不同的區域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分幀</title>
</head>
<frameset rows="15%,*">
<frame name="top" src="http://www.baidu.com" noresize scrolling="yes"/>
<frameset cols="30%,*">
<frame name="left" src="http://www.iqiyi.com" noresize/>
<frame name="right" src="http://www.bilibili.com" noresize/>
</frameset>
</frameset>
</html>
那麽我們平時也用不到這些,更多的是對於後代界面的管理那麽我們就會用到src屬性列如
先搞一個後代頁面主頁
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1.HTML分偵(HTML框架)做一個後臺管理界面</title> </head> <frameset rows="15%,*" border="1px"> <frame noresize name="top" src="top.html"></frame> <frameset cols="20%,*"> <frame noresize name="laft" src="left.html"></frame> <frame noresize name="right1" src="right1.html"></frame> </frameset> </frameset> </html>
對應的鏈接文件top.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>top</title> <style type="text/css"> h1{ width: 200px; margin: 0 auto; font: 楷體,宋體} </style> </head> <body> <h1>學生管理系統</h1> </body> </html>
對應的鏈接文件left.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>left</title> <style type="text/css"> h1{ margin: 0 auto; font: 楷體,宋體} </style> </head> <body> <div>學生管理系統</div><br> <a href="right1.html" target="right1">用戶登錄</a><br><br> <a href="right.html" target="right1">瀏覽用戶</a> </body> </html>
對應的兩個right1.html 和 right.html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>right1</title> <style type="text/css"> body{ background: #CCECFF;} table{ width: 260px; margin: 0 auto;} tr{ height: 50px;} </style> </head> <body> <table border="0"> <form action="" method="post"> <caption><h1>用戶登錄界面</h1></caption> <tr> <td>賬號:</td> <td><input type="text" name="yhm"></td> </tr> <tr> <td>密碼:</td> <td><input type="password" name="mima"></td> </tr> <tr> <td colspan="2"> <input name="tijiao" type="submit" value="登錄"> <input name="chongxie" type="reset" value="重寫"></td> <!-- <td></td> --> </tr> </form> </table> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>right</title> <style type="text/css"> h1{ margin: 0 auto; font: 宋體} </style> </head> <body> <h1>用戶一</h1> <h1>用戶二</h1> <h1>用戶三</h1> </body> </html>
其實主要的就是我們的a標簽target的屬性值一定要對應我們鏈接跳轉 frame的
name="對應值" 就是 target="對應frame裏面的name值" 列如
<a href="right1.html" target="right1">用戶登錄</a> <a href="right.html" target="right1">瀏覽用戶</a>
frameset就實現了框架內部跳轉了,多用於網站後臺
frameset怎麽框架內部跳轉