首页 > 代码库 > HTML高级标签（2）————窗口分帧（2）————后台管理页面

HTML高级标签（2）————窗口分帧（2）————后台管理页面

2024-07-11 17:38:16   212人阅读

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


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

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

给每一个<frame>进行命名，便于后面链接时target属性可以直接指向指定位置。

代码如下（文件名自定义，我写的是 frameset.html）：

<html>
	<head>
		<title>后台管理页面</title>
	</head>
	
	<frameset rows="100,*">
		<frame src=http://www.mamicode.com/"head.html" name="top">>
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=http://www.mamicode.com/"menu1.html" target="left">第一项>
menu.html:
九个选项，每个选项链接到不同的的内容，target指向主体位于的窗体。
由于所使用的方法与头部链接菜单时的完全相同，故URL就均为空，不一一编写了。
<center><h2>菜单部分</h2></center>


menu1.html:
<center><h2>菜单部分1</h2></center>
<a href=http://www.mamicode.com/"" target="right">第一页
>
menu2.html:
<center><h2>菜单部分2</h2></center>
<a href=http://www.mamicode.com/"" target="right">第一页
>
menu3.html:
<center><h2>菜单部分3</h2></center>
<a href=http://www.mamicode.com/"" target="right">第一页
>
menu4.html:
<center><h2>菜单部分1</h2></center>
<a href=http://www.mamicode.com/"" target="right">第一页
>
main.html:
<center><h1>主体内容部分</h1></center>

编写好所有文件之后，保存在相同的目录下面。打开frameset.html文件，就可以看到如下效果：

点击头部第二项后：

好了，一个后台最基本的功能也就实现了。若编写出现bug，请耐心调试。


联系
我们