案例五:网站后台系统页面_后台网站案例-程序员宅基地

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

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

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_40807247/article/details/86499355

智能推荐

zoj Robbers-程序员宅基地

文章浏览阅读269次。N robbers have robbed the bank. As the result of their crime they chanced to get M golden coins. Before the robbery the band has made an agreement that after the robbery i-th gangster would get Xi=Y o

2-3-归并单链表(顺序表)-线性表-第2章-《数据结构》课本源码-严蔚敏吴伟民版...-程序员宅基地

文章浏览阅读89次。课本源码部分第2章 线性表 -归并单链表(顺序表)——《数据结构》-严蔚敏.吴伟民版 ★有疑问先阅读★  源码使用说明 链接☛☛☛ 《数据结构-C语言版》(严蔚敏,吴伟民版)课本源码+习题集解析使用说明  课本源码合辑 链接☛☛☛ 《数据结构》课本源码合辑 习题集全解析 链接☛☛☛ 《数据结构题集》习题解析合辑 本源码引..._mergesqlist.h

[JZOJ5456]【NOIP2017提高A组冲刺11.6】奇怪的队列-程序员宅基地

文章浏览阅读312次。Description nodgd的粉丝太多了,每天都会有很多人排队要签名。 今天有n个人排队,每个人的身高都是一个整数,且互不相同。很不巧,nodgd今天去忙别的事情去了,就只好让这些粉丝们明天再来。同时nodgd提出了一个要求,每个人都要记住自己前面与多少个比自己高的人,以便于明天恢复到今天的顺序。 但是,粉丝们或多或少都是有些失望的,失望使她们晕头转向、神魂颠倒,已经分不清楚哪

2-5暴力破解防范措施和防范误区-程序员宅基地

文章浏览阅读1.7k次。防暴力破解的措施总结目前首当其冲的就是使用验证码 设计安全的验证码(安全的流程+复杂而又可用的图形); 在后台启用一些安全的规则,对认证错误的提交进行计数并给出限制,比如连续5次密码错误,锁定2小时; 必要的情况下,使用双因素认证;聊一聊token对防暴力破解的意义(意外的问题)一个简单的token的实例一般的做法:1.将token以“type=‘hidden’”的形式输出在表单中;2.在提交认证的时候一起提交,并在后台对其进行校验;但,由于其token值输出在了前端源码中,容易

经典数据库备份与还原处理(转邹建)-程序员宅基地

文章浏览阅读58次。经典数据库备份与还原处理(转邹建) 利用T-SQL语句,实现数据库的备份与还原的功能体现了SQL Server中的四个知识点:1. 获取SQL Server服务器上的默认目录2. 备份SQL语句的使用3. 恢复SQL语句的使用,同时考虑了强制恢复时关闭其他用户进程的处理4. 作业创建SQL语句的使用 /*1.--得到数据库的文件目录 @...

css transform属性-程序员宅基地

文章浏览阅读2.1k次。1.旋转的方向3D transform中有下面这三个方法:rotateX( angle )rotateY( angle )rotateZ( angle )rotate旋转的意思是:rotateX旋转X轴,rotateY旋转Y轴,rotateZ旋转Z轴,angle为角度,单位为beg,如360beg表示旋转360度。2.perspectiv

随便推点

火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版...-程序员宅基地

文章浏览阅读111次。转自:https://www.cnblogs.com/fwc1994/p/5884115.html火星坐标、百度坐标、WGS-84坐标相互转换及墨卡托投影坐标转经纬度JavaScript版火星坐标  火星坐标是国家测绘局为了国家安全在原始坐标的基础上进行偏移得到的坐标,基本国内的电子地图、导航设备都是采用的这一坐标系或在这一坐标的基础上进行二次加密得到的。火星坐标的真实名称应该是GCJ-0..._wgs94坐标系 投影

PreScan 教程:0. PreScan与Matlab连接_prescan关联matlab-程序员宅基地

文章浏览阅读5.9k次,点赞4次,收藏26次。PreScan 教程:0. PreScan与Matlab连接建议安装2016及以上版本的Matlab,可直接在Matlab中的 附加功能 中添加C语言编译环境,在附件功能中搜索 mingw ,点选后直接在matalb中安装。(前提:需注册Mathwork账号密码,用邮箱注册即可,很简单)安装成功后,在Matlab命令行窗口中输入 mex -setup ,点选 mex -setup C++ ..._prescan关联matlab

程序员必备网站-程序员宅基地

文章浏览阅读533次。https://leetcode.com/海量编程题包含数据库和shell试题,支持 C, C++, Java, Python, C#, JavaScript......http://www.geeksforgeeks.org/算法学习以及各类面试题。http://lintcode.com/zh-cn/编程面试题在线训练平台。http://codef

js判断当前运行环境_js 判断当前环境-程序员宅基地

文章浏览阅读1.6k次。var u = navigator.userAgent; var app = navigator.appVersion; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+..._js 判断当前环境

C++ explicit关键字:禁止隐式转换_防止隐式类型转换 c++-程序员宅基地

文章浏览阅读4.7k次。explicit关键字是用来防止由构造函数定义的隐式转换。要明白这个关键字的含义,首先我们要知道class类型的对象的隐式转换:可以用单个实参来调用的构造函数定义了从形参类型到该类类型的一个隐式转换。比如:class SomeBody{public: SomeBody(const std::string&amp; name =""): m_name(nam..._防止隐式类型转换 c++

js 事件冒泡-程序员宅基地

文章浏览阅读53次。&lt;a href="javascript:void(0);" onclick="delTask(event,${ROLE_ID},8,${page},${pageSize});return false;" title="取消"&gt;&lt;em class="t_quxiao"&gt;&lt;/em&gt;&lt;/a&gt;//删除方法functi