html之frameset页面布局

使用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>




发布了37 篇原创文章 · 获赞 22 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/stormkai/article/details/52245881