HTML 框架导航
初次学习HTML，在www.w3school.com.cn看到了框架导航，上面的例子没有看懂所以搜了一下相应的问题，最后弄懂了怎么实现同一界面下的框架导航。
首先是www.w3school.com.cn上的代码：
<html> <frameset cols="120,*"> <frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe"> </frameset> </html>
实现的功能是下图的样子：
其中W3school中省略了很多代码，我在
1.http://blog.sina.com.cn/s/blog_6f6d07f80100oqlt.html
2.http://blog.163.com/yw0602@126/blog/static/165385907201181852256852/
两位总结的很齐全，我主要说说我的理解。
首先谈谈代码里面有的：
<frameset cols = "120,*"> 其中*指代的我的理解应该是整个界面除了120的单位之后剩下的部分。
在1中，博主告诉了我：
当点击导航条上的项目时，相应网页会在显示区域变换显示。首先准备一个主界面文件main.htm，将其划分成两块区域index和content. 在结合W3school上的代码就应该可以看懂content和index意思。
例1：
<html>
<frameset cols="120,*">
<frame name="index" src="index.htm" />
<frame name="content" src="frame_a.htm" />
</frameset>
</html>
name即文件的名字：index、content
其中index区域 主要是链接项目；content区域 负责显示相应的链接文件；那么出现了一个问题需要有框架导航，我们既要把index.htm中的链接输出到content区域显示。
此时需要用到链接中的target属性：
例2：
<html>
<head>
</head>
<body>
<a href="frame_a.htm" target="content">frame_a</a>
<a href="frame_b.htm" target="content">frame_b</a>
<a href="frame_c.htm" target="content">frame_c</a>
</body>
</html>
另外界面的颜色是在frame_a、frame_b、frame_c中添加背景颜色实现的。
最后我总结一下：
上述代码中例1相当于整个被分成两块儿（120、*）的大框架 在里面index代表左边的框架；content代表右边的框架；
在例2中在index中写入frame_a/b/c，并且吧三个文件设置背景颜色，最后链接到content代表的框架中显示出来frame_a/b/c的内容。（此处可以参考前面第二个链接的知识结合看，就可以看懂了）
最后我希望大家一起学习，有爱好的可以加个好友QQ：919334628;
邮件：shanpei2017@outlook.com
HTML 框架导航的更多相关文章
- 使用dtree构建框架导航
前言: 该例子就是个框架导航 , 左边包含dtree的框架,点击上面的节点右边框架显示 说明步骤: 1. 首先获得dtree http://www.destroydrop.com/javascrip ...
- bootstrap框架 导航条组件使用
本文记载boot 导航条组件使用方法 导航条组件 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展 ...
- 旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- 使用Frame控件设计Silverlight的导航
这里所说的导航其实就是在Silverlight的页面之间前进后退以及跳转.通过Frame控件配合后台NavigationService类可以很容易的做到页面之间的导航. 这就是工具箱中的Frame控件 ...
- Prism 4 文档 ---第8章 导航
作为同用户具有丰富的交互的客户端应用程序,它的用户界面(UI)将会持续不断的更新来反映用户工作的当前的任务和数据.用户界面可以进行一段时间相当大的变化作为用户交互的应用程序中完成各种任务.通过 ...
- 企业IT管理员IE11升级指南【17】—— F12 开发者工具
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- L18 如何快速查找文档获得帮助
原地址:http://www.howzhi.com/course/286/lesson/2121 查找文档快速 苹果提供了丰富的文档,以帮助您成功构建和部署你的应用程序,包括示例代码,常见问题解答,技 ...
- 基于Web的企业网和互联网的信息和应用（ 1194.22 ）
基于Web的企业网和互联网的信息和应用( 1194.22 ) 原文更新日期: 2001年6月21日原文地址: http://www.access-board.gov/sec508/guide/1194 ...
- HTML 学习进度备忘
书签:”HTML 高级教程“及后面的内容尚未学习,另外跳过的内容有待跟进 __________________ 学习资源:W3School. 开始时间:2013.11.20 简述:此网址做为学习教程相 ...
随机推荐
- JVM面试十问
1. JVM运行时划分哪几个区域?哪些区域是线程共享的?哪些区域是线程独占的? JVM运行时一共划分:程序计数器.虚拟机栈.堆.本地方法栈.方法区. 线程共享的数据区域:堆.方法区. 线程独享的数据区 ...
- 实测win10 efi启动及centos7双系统引导顺序修改
安装win10 安装win10过程中,系统自动建立esp分区,分区格式为FAT16,目录如下 1,EFI/Boot文件夹保持不动 删除 EFI/Microsoft/boot/ 文件夹下面除BCD文件外 ...
- 帝国CMS(EmpireCMS) v7.5配置文件写入漏洞分析
帝国CMS(EmpireCMS) v7.5配置文件写入漏洞分析 一.漏洞描述 该漏洞是由于安装程序时没有对用户的输入做严格过滤,导致用户输入的可控参数被写入配置文件,造成任意代码执行漏洞. 二.漏洞复 ...
- CEF避坑指南（一）——下载并编译第一个示例
CEF即Chromium Embedded Framework,Chrome浏览器嵌入式框架.它提供了接口供程序员们把Chrome放到自己的程序中.许多大型公司,如网易.腾讯都开始使用CEF进行前端开 ...
- 【资源共享】eBook分享大集合
传送门:[GitHub] 欢迎各位指点,要是能补充更是感激不尽. 主要以IT领域经典书籍收藏,以备不时之需,不一定都能看完,权且当做收藏好玩. [x] 表示文件大小超过100M(LFS). 服务器系统 ...
- 关于sparksql中设置自定义自增列的相关要点（工作共踩过的坑-1）
小白终于进入了职场,从事大数据方面的工作! 分到项目组了,搬砖的时候遇到了一个这样的问题. 要求:用spark实现oracle的存储过程中计算部分. 坑:由于报表中包含了一个ID字段,其要求是不同的区 ...
- mybatis对象的插入
或者: 传入JAVA对象 mapper接口代码: public int findUserList(User user); xml代码: <select id="findUserList ...
- ubuntu18.04安装docker
本文基于unbuntu18.04版本来安装docker,步骤如下: 1:右击桌面->打开终端(E). 2::输入以下命令: sudo snap install docker ,输入密码之后出下图 ...
- centos7不能连接外网
1. 首先保证虚拟机是NAT模式 2. 打开cmd窗口,输入ipconfig,查看vmnet8的ipv4地址是多少,DNS也需要记下,后面会用到 注意:vmnet8的ip要与虚拟机的网关IP在同一 ...
- js加密后台加密解密以及验证码
该文档为转载内容: 加密解密 1 前端js加密概述 2 前后端加密解密 21 引用的js加密库 22 js加密解密 23 Java端加密解密PKCS5Padding与js的Pkcs7一致 验证码 1 ...