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。请耐心调试。

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

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • python表白代码,照片隐藏表白话语

    python表白代码,照片隐藏表白话语最近天气好冷,感觉整个人都是冰冰的!程序员如何用python“表白”自己的女神呢?一、具体过程1、代码思路先用cv2中的imread方法读取冰冰的照片,再用PIL的Image方法创建一个相同大小的图像(初始填充白色),最后在图片上每一个块加字。2、python完整代码#-*-coding:utf-8-*-fromPILimportImage,ImageDraw,ImageFontimp

    2022年5月5日
    93
  • process information unavailable

    process information unavailable今天在虚拟机kill进程的时候出现了processinformationunavailable出现这个问题的原因呢?其实很简单,就是你用A用户创建了一个进程,然后你用B用户把他干掉了,虽然是干掉了,但是查看的时候会出现这个该怎么解决呢?首先我们进入到tmp目录下,用ls查看,你会发现有几个以hsperfdata_开头的文件然后你点进去看的时候就知道那个进程是哪个用…

    2025年12月3日
    4
  • 邮箱正则表达式

    邮箱正则表达式正则提取国内外所有的邮箱经过测试准确率100%python代码块res=re.search(r’\b[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,8}\b’,description)ifres:emailAddress=res.group()else:emailAddr…

    2022年6月15日
    31
  • java生成exe可执行文件的条件_不能运行exe文件

    java生成exe可执行文件的条件_不能运行exe文件一、软件准备1.下载将jar包转化为EXE的工具EXE4J,下载地址为:https://www.ej-technologies.com/download/exe4j/files2.下载完成之后,按照如下步骤安装EXE4J。二、生产jar文件在将写好的Java程序转换为EXE程序前,需要先将Java程序导出为jar包,然后才能通过EXE4J生成想要的EXE程序。在这里,笔者使用的工具为eclip……

    2025年11月19日
    8
  • Windows 10出现0xc0000225错误代码如何解决?「建议收藏」

    Windows 10出现0xc0000225错误代码如何解决?「建议收藏」在使用Windows10系统的过程中,有的用户启动电脑时可能会遇到黑屏或蓝屏的0xc0000225错误提示。当出现0xc0000225错误代码时,要如何解决呢?本文提供多种解决方法。

    2022年4月19日
    72

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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