使用frameset进行系统页面布局要生成的效果如下:
建立个主页面 index.html
frameborder:设置是否显示框架的边框 yes是显示,no是不显示
rows:横向分割页面 30%,30(或30px),*
cols:纵向分割页面
注意:frameset标签没在body标签里面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主页面</title>
</head>
<frameset rows="100,*" frameborder="yes">
<frame src="top.html" />
<frameset cols="150,*" frameborder="yes">
<frame src="left.html" />
<frame src="main.html" name="right" />
</frameset>
</frameset>
<body>
</body>
</html>
top.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>top页面</title>
</head>
<body>
<h2>top</h2>
</body>
</html>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left页面</title>
</head>
<body>
<ul>
<li><a href="a.html" target="right">查询类别</a></li>
<li>添加类别</li>
</ul>
</body>
</html>
注意:<a href="a.html" target="right">查询类别</a> 中 target="right" 对应的是 index.htm 中的<frame src="main.html" name="right" />。当点击查询类别时候,会把main.html替换为a.html
系统注意内容 main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主页面</title>
</head>
<body>
<h2>主页面</h2>
</body>
</html>
a.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>查询类别页面</title>
</head>
<body>
<h2>查询类别页面</h2>
</body>
</html>