使用框架切分网页
效果:
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
frame_a
</body>
</html>
frame_a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
frame_2
</body>
</html>
frame_2.html
<html>
<frameset rows="25%,75%">
<frame src="frame_a.html" name="framea" />
<frame src="frame_2.html" name="frame2" />
</frameset>
</html>
框架分页.html
<frameset></frameset>中的rows="25%,75%"可以同时加载上下两个页面，上面的那个页面占整个页面的1/4，下面的那个页面占3/4.，也可以分为多个页面。
框架的多种切分方法
效果:
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body> frame3
</body>
</html>
fram_3.html
<html>
<frameset rows="25%,*">
<frame src="frame_a.html" name="framea" />
<frameset cols="25%,*">
<frame src="frame_2.html" name="frame2" />
<frame src="frame_3.html" name="frame3" />
</frameset>
</frameset>
</html>
多种框架切分方法.html
在代码中的rows="25%,*",cols="25%,*"中的*表示剩余的比例。cols表示垂直分页，rows表示上下分页。
使用框架实现后台管理系统的布局
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body > <div align="center">
<br />
欢迎来到perfect*的博客园
</div>
</body>
</html>
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="apart.html" target="right">新的文章</a><!--这里的right来自于框架中frame定义的name属性值-->
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div align="center">
perfect*又有新的博客发布了，欢迎浏览!!！
</div> </body>
</html>
right.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
使用框架实现后台管理系统的布局
</body>
</html>
apart.html
<html>
<frameset rows="10%,*">
<frame src="top.html" name="top" />
<frameset cols="10%,*">
<frame src="left.html" name="left" />
<frame src="right.html" name="right" />
</frameset>
</frameset>
</html>
使用框架实现后台管理系统的布局.html
使用框架实现后台管理系统的布局.html中的target属性实现了在其它网页显示另一个网页的内容。