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,点击“发件箱”