上一章学习了界面分帧, 这次再学习一下如何构建一个后台管理的界面.
三: 窗口分帧之后台管理页面
1.作用: 使用frameset进行窗口分帧, 构建一个简易的后台管理页面
2.各属性的作用
<frameset><frame src="head.html" name="top"></framest> <!–frameset: 不能放在body标签中, 用来frameset将界面分区–>
<a> href="menu1" target="left">第一项</a> <!–target="left" 指向命名为"left"标签的位置–>
3.代码示例及思路
首先使用frameset将界面分帧, 将界面分为了top, left, right三部分
<!DOCTYPE html><html> <head><title>窗口分帧-后台管理页面</title><meta charset="utf-8"><meta name="keywords" content="keyword1,keyword2,keyword3"><meta name="description" content="this is my page"><meta name="content-type" content="text/html; charset=UTF-8"><!–<link rel="stylesheet" type="text/css" href="./styles.css">–> </head> <frameset rows="100,*"> <!– frameset: 不能放在body标签中 , 这里用frameset将界面按比例分为3个区域–> <frame src="head.html" name="top"> <!– frame: 给此标签命名, 便于后面链接时target属性可以直接指向指定位置 –><frameset cols="180,*"><frame src="menu.html" name="left" noresize="noresize" scrolling="no"><frame src="main1.html" name="right"> </frameset> </frameset><body></body></html>然后需要分别编辑对应三部分的代码
top:
<center><h3>后台管理界面头部</h3></center><a href="menu1.html" target="left">第一项</a> <!– target: 指向命名为"left"标签的位置 –><a href="menu2.html" target="left">第二项</a><a href="menu3.html" target="left">第三项</a><a href="menu4.html" target="left">第四项</a><meta charset="utf-8">right有四个部分, 用来对应top部的4项
默认为:
<center><h2>菜单部分</h2></center><meta charset="utf-8">
right1:
<center><h2>菜单部分1</h2></center><a href="Main.html" target="right">主页</a><br><a href="" target="right">百度</a><br><a href="" target="right">第三页</a><br><a href="" target="right">第四页</a><br><a href="" target="right">第五页</a><br><a href="" target="right">第六页</a><br><a href="" target="right">第七页</a><br><a href="" target="right">第八页</a><br><a href="" target="right">第九页</a><br><meta charset="utf-8">
right2:
<center><h2>菜单部分2</h2></center><a href="" target="right">第一页</a><br><a href="" target="right">第二页</a><br><a href="" target="right">第三页</a><br><a href="" target="right">第四页</a><br><a href="" target="right">第五页</a><br><a href="" target="right">第六页</a><br><a href="" target="right">第七页</a><br><a href="" target="right">第八页</a><br><a href="" target="right">第九页</a><br><meta charset="utf-8">right3:
<center><h2>菜单部分3</h2></center><a href="" target="right">第一页</a><br><a href="" target="right">第二页</a><br><a href="" target="right">第三页</a><br><a href="" target="right">第四页</a><br><a href="" target="right">第五页</a><br><a href="" target="right">第六页</a><br><a href="" target="right">第七页</a><br><a href="" target="right">第八页</a><br><a href="" target="right">第九页</a><br><meta charset="utf-8">right4:
<center><h2>菜单部分1</h2></center><a href="" target="right">第一页</a><br><a href="" target="right">第二页</a><br><a href="" target="right">第三页</a><br><a href="" target="right">第四页</a><br><a href="" target="right">第五页</a><br><a href="" target="right">第六页</a><br><a href="" target="right">第七页</a><br><a href="" target="right">第八页</a><br><a href="" target="right">第九页</a><br><meta charset="utf-8">
主体内容部分:
<center><h1>主体内容部分</h1></center> </html><meta charset="utf-8">
4.运行结果
穿过紫堇，穿过木棉，穿过时影时现的悲喜和无常。
