HTML高级标签（2）————窗体分帧（2）————后台管理页面
使用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）————后台管理页面的更多相关文章
- HTML高级标签（2）————窗体分帧（1）————分帧演示
我们能够简单的编写一个多帧的窗体,而且能够随意的划分窗体区域. <frameset rows="*,*,*"> <frameset cols="*,*& ...
- 网页分帧操作<frameset>,<iframe>标签
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- HTML的窗口分帧
下面通过一个后台管理的部分设计来说明窗口分帧 frameset.html代码 <!-- <frameset>标签(常用来做后台管理界面) 属性:rows(行).cols(列).可以使 ...
- HTTP2.0的二进制分帧
1.帧的类型: 在二进制分帧的结构中,头部有8个字节(64Bit),其中有一个字节(8Bit)来标志帧的类型: HTTP2.0规定了如下帧类型: DATA: 用于传输HTTP消息体 HEADERS:用 ...
- PHP分帧后台模板页面css样式,js引入方法
一,首先把下载好的分帧后台模板放到对应的目录中,HTML显示页面放到View目录中,CSS和JS.img图片等公共资源放到include目录中 二.然后开始准备更改CSS和JS , img路径操作:( ...
- Laya 分帧加载优化
Laya 分帧加载优化 @author ixenos Flash中的EnterFrame事件在Laya中等同于Laya.timer.frameLoop(1,...) Laya.timer.frameL ...
- HTML高级标签之表格标签
前面学习了一下HTML的经常使用标签, 今天開始高级标签之路! 一.表格标签 1.作用: 创建一张表格 2.各属性作用: <table cellspacing="0" cel ...
- Laya 使list渲染支持分帧的思路
Laya 使list渲染支持分帧的思路 @author ixenos 2019-09-06 1.由于Laya的list渲染时没有做分帧处理,只做了延迟帧处理,所以当单页元素较多时,会有大量运算卡帧的情 ...
- CAN分帧接收实现
该版本程序实现了上电后先发送MACID检测功能,如果网络上有应答.则一直进行死循环,直到用户更改了本机的ID地址 才可以跳出循环体. 本单片机设置为双滤波 ,使目标地址为0X1F 实现了建立连接命令 ...
随机推荐
- DM6437 dsp系列之启动过程全析(2)—AIS文件解析
本文均属自己阅读源码的点滴总结,转账请注明出处谢谢. 欢迎和大家交流.qq:1037701636 email: gzzaigcn2009@163.com,gzzaigcn2012@gmail.com ...
- win下 git gui 使用教程
现在很多都有git来托管项目或者来查找资料,但是看起来操作不是很方便,现在由于win下可以直接使用git gui,让使用git变得方便,当然这只是针对日常简单的使用,如果想详细的使用,可以去参考廖学峰 ...
- Oracle中drop user和drop user cascade的区别
drop user : 仅仅是删除用户,drop user username cascade :会删除此用户名下的所有表和视图. userSpecify the user to be dropped. ...
- SQL 练习题
一. 设有一数据库,包括四个表:学生表(Student).课程表(Course).成绩表(Score)以及教师信息表(Teacher).四个表的结构分别如表1-1的表(一)~表( ...
- 利用PHP/MYSQL实现的简易微型博客(转)
数据库:ly_php_base 表:ly_micro_blog(仅仅有一个表)字段:id,title,date,content,hits 文件: 文件 描述 default.php 默认主页.显示博文 ...
- Log4net 列
配置 <configuration> <configSections> <section name="log4net" type="Syst ...
- sql server 删除所有表和存储过程
1.删除外键约束 DECLARE c1 cursor for select 'alter table ['+ object_name(parent_obj) + '] drop constraint ...
- SSH连接LINUX乱码解决方法
1.vi /etc/sysconfig/i18n 将内容改为 LANG="zh_CN.GB18030" LANGUAGE="zh_CN.GB18030:zh_CN.GB2 ...
- 调用[[UIDevice currentDevice] userInterfaceIdiom]==UIUserInterfaceIdiomPad判断设备
将模拟器改为Ipad时,调用[[UIDevice currentDevice] userInterfaceIdiom]==UIUserInterfaceIdiomPad判断设备是否为Ipad,但程序并 ...
- 进阶笔记(1)——JavaScript 语言精碎
调用:(调用一个函数将暂停当前函数的执行,传递控制权和参数给新函数) 每个函数接受连个附加参数:this (取决于调用的模式).argument. js的四种调用模式及this指向: 1.方法调用:( ...