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)
上一篇 2022年1月29日 下午9:00
下一篇 2022年1月29日 下午9:00


相关推荐

  • FLASH水波纹效果动画制作教程图文自编「建议收藏」

    FLASH水波纹效果动画制作教程图文自编「建议收藏」这个教程很简单也好学,希望对初步认识FLASH的动画爱好者有帮助,废话少说,下面我们开始制作教程吧教程准备,准备一张带水的风景图片为例,其他没有什么需求一,首先打开FLASH软件8.0,这个版本比较好用,设置文档属性为宽550高400,也是软件默认的属性,背景颜色你可以改为自己喜欢的颜色,这个看由你自己选择,在制作时我比较喜欢用黑色,如图设置好文档属性后,我们点击确定,进入

    2022年5月24日
    47
  • cmd命令怎么切换盘符_cmd命令行怎么切换到d盘

    cmd命令怎么切换盘符_cmd命令行怎么切换到d盘用命令行,要从C盘切换到F盘,然后傻傻地输入了cdcd是在同一个盘下切换空间用的盘之间切换应该用:F:盘符名加一个冒号,大小写不限。

    2022年10月3日
    5
  • 禁止Ubuntu开机进入guest session

    禁止Ubuntu开机进入guest session禁止Ubuntu开机进入guest session

    2022年4月23日
    60
  • navicat15永久激活码-激活码分享

    (navicat15永久激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~BI7JCUH1TG-eyJsaWNlbnNlSWQiOi…

    2022年3月22日
    510
  • iOS 获取本地图片尺寸_ios图片处理软件

    iOS 获取本地图片尺寸_ios图片处理软件有时候我们需要在代码中读取图片的URL,但是需要注意的是:在Assets中的图片,会经过编译无损压缩,无法通过Path读取,只能通过named方法读取,这种情况我们应该怎么获取图片URL了?

    2026年2月15日
    5
  • 版本号命名规则_文件版本号命名规则

    版本号命名规则_文件版本号命名规则版本号的格式为X.Y.Z(又称Major.Minor.Patch),递增的规则为:X表示主版本号,当API的兼容性变化时,X需递增。Y表示次版本号,当增加功能时(不影响API的兼容性),Y需递增。Z表示修订号,当做Bug修复时(不影响API的兼容性),Z需递增。详细的规则如下:X,Y,Z必须为非负整数,且不得包含前导零,必须按数值递增,如1….

    2025年10月25日
    7

发表回复

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

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