案例五:网站后台系统页面

知识笔记—框架集标签、框架子标签

案例五:网站后台系统页面
框架集标签:

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

在这里插入图片描述
在这里插入图片描述

特殊字符的标签:

空格	:&nbsp;		
<	:&lt;
>	:&gt;

注意
这个标签不放在body里

没有更多推荐了,返回首页