大家好,又见面了,我是全栈君。
使用frameset进行窗体分帧。构建简易的后台页面。这篇博客就作为一个简易后台管理页面的实战演练。
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文件。就能够看到例如以下效果:
点击头部第二项后:
好了。一个后台最主要的功能也就实现了。
若编写出现bug。请耐心调试。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115841.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...