HTML高级标签(2)————窗体分帧(2)————后台管理页面

HTML高级标签(2)————窗体分帧(2)————后台管理页面

大家好,又见面了,我是全栈君。

使用frameset进行窗体分帧。构建简易的后台页面。这篇博客就作为一个简易后台管理页面的实战演练。

HTML高级标签(2)————窗体分帧(2)————后台管理页面

1  首先,须要一个页面,使用<frameset>按比例划分为适合的三个区域:头部。菜单。主体。

<frameset>不能放在<body>中编写。

给每个<frame>进行命名,便于后面链接时target属性能够直接指向指定位置。

代码例如以下(文件名称自己定义。我写的是 frameset.html):

<html>
	<head>
		<title>后台管理页面</title>
	</head>
	
	<frameset rows="100,*">
		<frame src="head.html" name="top">

		<frameset cols="180,*">
			<frame src="menu.html" name="left" noresize scrolling="no">
			<frame src="main.html" name="right">
		</frameset>
	</frameset>

</html>

2
我们须要在三个帧中指定不同的URL,须要编写几个html文件:head.html; menu.html; menu1.html; menu2.html; menu3.html; menu4.html; main.html

head.html:

四个选项,每一个选项链接到不同的菜单,target指向菜单位于的窗口。

<center><h3>后台管理页面头部</h3></center><br>
<a href="menu1.html" target="left">第一项</a>
<a href="menu2.html" target="left">第二项</a>
<a href="menu3.html" target="left">第三项</a>
<a href="menu4.html" target="left">第四项</a>

menu.html:

九个选项,每一个选项链接到不同的的内容,target指向主体位于的窗口。

因为所使用的方法与头部链接菜单时的全然同样,故URL就均为空,不一一编写了。

<center><h2>菜单部分</h2></center>

menu1.html:

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

menu2.html:

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

menu3.html:

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

menu4.html:

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

main.html:

<center><h1>主体内容部分</h1></center>

编写好全部文件之后。保存在同样的文件夹以下。打开frameset.html文件。就能够看到例如以下效果:

HTML高级标签(2)————窗体分帧(2)————后台管理页面

点击头部第二项后:

HTML高级标签(2)————窗体分帧(2)————后台管理页面

好了。一个后台最主要的功能也就实现了。

若编写出现bug。请耐心调试。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115841.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • docker端口映射后访问不了_docker暴露多个端口

    docker端口映射后访问不了_docker暴露多个端口docker端口映射突然无效1、查看防火墙状态(systemctlstatusfirewalld),防火墙是关闭的[root@VM-0-15-centos~]#systemctlstatusfirewalld●firewalld.service-firewalld-dynamicfirewalldaemonLoaded:loaded(/usr/lib/systemd/system/firewalld.service;disabled;vendorp

    2022年10月18日
  • simulink实现模糊PID控制[通俗易懂]

    simulink实现模糊PID控制[通俗易懂]simulink实现模糊PID控制模糊系统,建立simulink实现主程序设计。

  • 你的产品在强制用户按照你的意愿去操作吗「建议收藏」

    你的产品在强制用户按照你的意愿去操作吗「建议收藏」最近小编买了一台某品牌的洗衣机,在国内挺有名的品牌,因为相信这个品牌才买的。买完之后,小编自己在家洗衣服,发现老是滴滴响,然后终止运行了,本来简单的几件衣服,洗了一下午没洗完,自己甚是苦恼。自己看了一下机器上的告警编码,又看了一下说明书,发现是由于洗衣机为了防止漏水而发生告警。主要原理是这样的:洗衣机启动运行,开始进水,如果进水超过40分钟,还没有达到设定的水位,洗衣机就停止运转了,并发出滴滴的告…

  • kali制作安卓免杀木马_kali linux激活成功教程WiFi

    kali制作安卓免杀木马_kali linux激活成功教程WiFishellcode超级免杀作者声明:本文章属于作者原创,不能转载,违反网络安全法自己承担.这里只供学习使用.日期:2019-12-31我试过了电脑管家,火绒安全,McAfee,360,但只有360使用手动云查杀时木马才能查出来(目前所有软件都无法查杀!!!!!2020-1-2)从2019-12-29日早上起,我向我的PE-tools工具里写了一个功能,就是shellcode注入功能,写…

  • 2022 idea激活码(注册激活)

    (2022 idea激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • strtok理解[通俗易懂]

    strtok理解[通俗易懂]今天使用strtok遇到了一些困惑,

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号