一:提前创建好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>
显示效果: