案例五:网站后台系统页面
知识笔记—框架集标签、框架子标签
案例五:网站后台系统页面
框架集标签:
<frameset rows="" cols="">
<frame src=""/>
<frame name=""/>
</frameset>
需求:
一个网站需要有后台页面,后台页面设计:
技术分析:
【HTML的框架标签】
框架标签:<frameset >,标签与body标签是冲突,有frameset就可以没有body.
* 属性:
* rows
* cols
使用<frame>标签,frame代表切分的每个部分.
步骤分析:
【步骤一】创建一个html的页面
【步骤二】将整个页面分成上下两个部分.
【步骤三】将页面的下半部分分成左右两个部分.
【步骤四】在左侧页面中添加一些链接.
【步骤五】点击左侧链接,将页面的内容显示到右侧.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>框架集标签</title>
</head>
<frameset cols="25%,*">
<frame src="left.html"/>
<frame src="right.html" />
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font size="7">欢迎XXXX进入后台管理系统</font>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左侧内容</title>
</head>
<body>
<a href="right.html" target="right">会员管理</a><br /><br />
<a href="#">品牌管理</a><br /><br />
<a href="#">商品管理</a><br /><br />
<a href="#">分类管理</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>右侧内容</title>
</head>
<body>
所有用户信息
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站的后台页面的显示</title>
</head>
<frameset rows="20%,*">
<frame src="top.html">
<frameset cols="20%,*">
<frame src="left.html" />
<frame name="right" />
</frameset>
</frameset>
</html>
特殊字符的标签:
空格 :
< :<
> :>
注意
这个标签不放在body里