HTML（六）_(html6)-CSDN博客

本文链接：https://blog.csdn.net/qq_41819988/article/details/90758916

6.网站后台页面展示

6.1需求分析:

我们前面已经做完了首页商品展示, 那么我们需要一个页面用来编辑我们的商品信息, 还有商品分类, 用户购买之后,还得有订单管理页面，我们以邮箱页面为例：

6.2技术分析

框架标签: frameset

注意: 使用了frameset必须将body删掉,否则页面会有问题

frame 常用属性:

src: 引入的html文件路径 name: 指定框架的名称

6.4代码实现

1，网站后台页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网站后台</title>
	</head>
	<frameset rows="15%,*">
		<frame src="aaa.html" />
		<frameset cols="15%,*">
			<frame src="bbb.html" />
			<frame src="ccc.html"  name="rightFrame"/>
		</frameset>
	</frameset>
</html>

2，页面1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="yellow">
	</body>
</html>

3，页面2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="blue">
		<a href="data.html" target="rightFrame"><font color="white"><b>收件箱</b></font></a><br />
		<a href="ddd.html"  target="rightFrame"><font color="white"><b>发件箱</b></font></a><br />
		<a href="#"><font color="white"><b>垃圾箱</b></font></a><br />
	</body>
</html>

4，页面3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="red">
	</body>
</html>

5，页面4

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="deeppink">
		<p><b>内部数据</b></p>
	</body>
</html>

6，页面5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="green">
	</body>
</html>

扩展

框架中点击跳转

效果显示

1，未点击页面效果

2，点击“收件箱”

3，点击“发件箱”