版權聲明：本文為博主原創文章，未經博主允許不得轉載。
分幀
HTML 框架是划分窗口的技術 就是把一個窗口分隔成多個窗口 每個窗口顯示不同的網頁內容多用於后台 也叫做分幀
1.Frameset
注意 如果你在頁面上寫frameset 了那么就不能出現body 因為他們兩個見面就打仗
<frameset></frameset>
常用屬性:
Cols 分列單位可以寫像素也可以寫百分比 之后除上面內容外還可以寫*(*代表剩余所有)
Rows 分行單位可以寫像素也可以寫百分比 之后除上面內容外還可以寫*(*代表剩余所有)
Frameborder 分幀邊框 0/1
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就實現了框架內部跳轉了，多用於網站后台