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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • toast弹窗教程_toast提示是什么

    toast弹窗教程_toast提示是什么2.3.1 反编译APK安装包首先,需要从网上下载样本安装包,这里使用的样本是哒哒文件助手,读者可以从安卓市场下载。在反编译APK之前,还需要从网上下载第三方模拟器,如夜神、雷电等模拟器。安装下载好的样本,运行看一下效果,大概了解一下该APK实现的相关功能,如图2.6所示,该界面就是程序入口界面。                   图2.6…

    2022年9月15日
    0
  • .ziw文件是什么?如何打开.ziw文件?[通俗易懂]

    .ziw文件是什么?如何打开.ziw文件?[通俗易懂].ziw文件是为知笔记的一种文档格式打开方式:找到为知笔记的官网,下载它的windows安装包即可[缺点:该软件会有一个使用的有效期]打开.ziw文件时,右击选择发送到“为知笔记”,选择相应的文件夹保存即可…

    2022年10月12日
    0
  • 什么叫侧面指纹识别_新科技?侧面指纹解锁有什么不同?

    什么叫侧面指纹识别_新科技?侧面指纹解锁有什么不同?原标题:新科技?侧面指纹解锁有什么不同?手机的时代更新的太快,以前诺基亚的密码解锁,到后来安卓苹果的指纹解锁,虹膜解锁,面部识别解锁,各式各样的解锁方式。不过今天说的主题也是指纹解锁,不过不是以往的正面home键,也不是背面指纹解锁器,而是侧面指纹解锁。不得不承认,智能交互时代不断刷新人们的生活,智能手机行业也发展得如火如荼。各智能手机厂商凭借在手机里边加入各种“黑科技”,用自己独特的风格来吸引消…

    2022年6月15日
    62
  • Macromedia flash制作落叶飘下动画

    Macromedia flash制作落叶飘下动画flash制作落叶动画打开MacromediaFlash软件,新建一个flash文档将所需所有素材导入到库中设置背景并将拖入到舞台的图片转换为图片元件设置落叶图层为图层2添加引导层,自定义枫叶下落路线轨迹。打开MacromediaFlash软件,新建一个flash文档将所需所有素材导入到库中使用“文件-导入-导入到库”命令将所有素材导入到库中。导入结果如下图设置背景并将拖入到舞台的图片转换为图片元件将库中的图片拖入到舞台中间,自动创建图层1,选中左侧工具栏中的“任意变形工具”,拖动过

    2022年5月2日
    51
  • 易玩卡盟怎么样_支付接口集成平台

    易玩卡盟怎么样_支付接口集成平台支持一键装修主站,一键对接货源,自定义后台登录背景,前台风格自定义背景等,已集成易支付接口对接易支付充值接口,修复BUG等服务器系统可以:Windows64/Linux64/cenos6.864位安装宝塔环境:apache2.4+mysql5.5+php5.6cenos6.8系统安装宝塔命令:yuminstall-ywgetamp;amp;wget-Oinstall.shhttp://downlo…

    2022年8月13日
    2
  • 暴力破解(一)——python脚本暴力破解 加密的zip压缩文件

    暴力破解(一)——python脚本暴力破解 加密的zip压缩文件简介:zip格式是常见的压缩文件格式,它支持压缩时设置解压密码;有两种加密方式:1传统加密方式和普通的加密方式。传统加密方式是一种比较简单的加密方式,现在一般很少有人使用,而且压缩时系统默认选择的是普通的加密方式。因此网上很多破解zip的软件和脚本都是针对传统加密方式开发的,所以我们拿来使用时,无法对zip进行破解,所以博主使用python搞了一个针对所有压缩加密方式通用的pytho…

    2022年4月29日
    285

发表回复

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

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