一:提前創建好top.html left.html right.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<frameset rows="20%,80%">
<frame src="top.html">
<frameset cols="15%,85%">
<frame src="left.html">
<frame src="right.html">
</frameset>
</frameset><noframes></noframes>
</html>
頁面顯示:
二:添加頁面跳轉
2.設置target的名稱爲 main ,同時設定框架集中引入頁面的名字爲main
main.html 的代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<frameset rows="20%,80%">
<frame src="top.html">
<frameset cols="15%,85%">
<frame src="left.html">
<frame src="right.html" name="main"> //設置name
</frameset>
</frameset><noframes></noframes>
</html>
left.html的代碼如下:
注意:提前創建好要用到的 liebiao.html biaoge.html form.html dongtai.html 這些我用的都是之前寫的
form.html 代碼:https://blog.csdn.net/weixin_41167340/article/details/81316063
dongtai.html 代碼:https://blog.csdn.net/weixin_41167340/article/details/81325190
biaoge.html 代碼:https://blog.csdn.net/weixin_41167340/article/details/81304215
liebiao.html代碼:https://blog.csdn.net/weixin_41167340/article/details/81301039
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>left</title>
</head>
<body>
<h3>知識彙總</h3>
<p>
<a href="./show/liebiao.html" target="main">HTML列表</a><br/> //設置target
<a href="./show/biaoge.html" target="main">HTML表格標籤</a><br/>
<a href="./show/form.html" target="main">HTML表單標籤</a><br/>
<a href="./show/dongtai.html" target="main">HTML動態標記</a><br/>
</p>
</body>
</html>
right.html的代碼如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
right
</body>
</html>
顯示效果: