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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3pxbmxz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

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

HTML高级标签（2）————窗体分帧（2）————后台管理页面的更多相关文章

  1. HTML高级标签（2）————窗体分帧（1）————分帧演示

    我们能够简单的编写一个多帧的窗体,而且能够随意的划分窗体区域. <frameset rows="*,*,*"> <frameset cols="*,*& ...

  2. 网页分帧操作<frameset>,<iframe>标签

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  3. HTML的窗口分帧

    下面通过一个后台管理的部分设计来说明窗口分帧 frameset.html代码 <!-- <frameset>标签(常用来做后台管理界面) 属性:rows(行).cols(列).可以使 ...

  4. HTTP2.0的二进制分帧

    1.帧的类型: 在二进制分帧的结构中,头部有8个字节(64Bit),其中有一个字节(8Bit)来标志帧的类型: HTTP2.0规定了如下帧类型: DATA: 用于传输HTTP消息体 HEADERS:用 ...

  5. PHP分帧后台模板页面css样式,js引入方法

    一,首先把下载好的分帧后台模板放到对应的目录中,HTML显示页面放到View目录中,CSS和JS.img图片等公共资源放到include目录中 二.然后开始准备更改CSS和JS , img路径操作:( ...

  6. Laya 分帧加载优化

    Laya 分帧加载优化 @author ixenos Flash中的EnterFrame事件在Laya中等同于Laya.timer.frameLoop(1,...) Laya.timer.frameL ...

  7. HTML高级标签之表格标签

    前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...

  8. Laya 使list渲染支持分帧的思路

    Laya 使list渲染支持分帧的思路 @author ixenos 2019-09-06 1.由于Laya的list渲染时没有做分帧处理,只做了延迟帧处理,所以当单页元素较多时,会有大量运算卡帧的情 ...

  9. CAN分帧接收实现

    该版本程序实现了上电后先发送MACID检测功能,如果网络上有应答.则一直进行死循环,直到用户更改了本机的ID地址 才可以跳出循环体. 本单片机设置为双滤波 ,使目标地址为0X1F 实现了建立连接命令 ...

随机推荐

  1. MongoDB 数据库安装

    首先在官网上下载数据库:官网上提供了两种形式的数据库,一种是免安装版的,一种是安装版的.这点跟apache的tomcat类似,安装版的有可视化的界面对服务进行启动和关闭,可是还是比較喜欢免安装的.不解 ...

  2. iOS:UI系列之UINavigationController

    又到了总结的时间了,突然间感觉时间过得好快啊, 总觉的时间不够用,但是这也没办法啊, 只有自己挤时间了,虽然是零基础,但是这并不能代表什么啦,只要努力,收获总还是有的, 同时我也相信广大的博友肯定也有 ...

  3. 使用HttpClient发送GET请求

    HttpRequestMessage http_req_msg = new HttpRequestMessage(); http_req_msg.Method = HttpMethod.Get; ht ...

  4. pca图像识别

    代码下载:基于PCA(主成分分析)的人脸识别 人脸识别是一个有监督学习过程,首先利用训练集构造一个人脸模型,然后将测试集与训练集进行匹配,找到与之对应的训练集头像.最容易的方式是直接利用欧式距离计算测 ...

  5. ios禁用多按钮同时点下的效果

    只需要把那些不能同时点下的按钮或者视图设置一下即可. [view setExclusiveTouch:YES]; 避免view上多个button同时按下,则可设置每个button的setExclusi ...

  6. CSS 规划

    1)在拿到psd效果图后,我会将所有的效果图看一遍,然后开始打草稿,在纸上画,在PS中标注都可以.一般都是做个大概的统计,太详细不太现实,既费时间也费精力. 2)网站的浏览器兼容性要顾及到哪些,IE6 ...

  7. php的一些小笔记--数学函数

    通常我们使用的数学函数不多,经常出现的有 floor 地板->舍去 ceil   天花板->进一 round 四舍五入 rand 随机数 mt_rand 产生更好的随机数 pow 指数表达 ...

  8. Mysql MERGE 引擎在分表环境下得使用

    应用场景:当我们在做分表的时候,通常会把一个大表的数据拆分成若干个分表,这也是数据库优化中的分表概念.随着分表随之而来的问题就是多表查询. 现在有 t1,t2 两张数据表,需要满足不同的查询条件同时从 ...

  9. 快速制作规则及获取规则提取器API

    1. 引言 前面文章的测试案例都用到了集搜客Gooseeker提供的规则提取器,在网页抓取工作中,调试正则表达式或者XPath都是特别繁琐的,耗时耗力,工作枯燥,如果有一个工具可以快速生成规则,而且可 ...

  10. project euler 16：Power digit sum

    >>> sum([int(i) for i in str(2**1000)]) 1366 >>>