初次学习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 框架导航的更多相关文章

  1. 使用dtree构建框架导航

    前言: 该例子就是个框架导航 , 左边包含dtree的框架,点击上面的节点右边框架显示 说明步骤: 1. 首先获得dtree  http://www.destroydrop.com/javascrip ...

  2. bootstrap框架 导航条组件使用

    本文记载boot 导航条组件使用方法 导航条组件 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展 ...

  3. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  4. 使用Frame控件设计Silverlight的导航

    这里所说的导航其实就是在Silverlight的页面之间前进后退以及跳转.通过Frame控件配合后台NavigationService类可以很容易的做到页面之间的导航. 这就是工具箱中的Frame控件 ...

  5. Prism 4 文档 ---第8章 导航

        作为同用户具有丰富的交互的客户端应用程序,它的用户界面(UI)将会持续不断的更新来反映用户工作的当前的任务和数据.用户界面可以进行一段时间相当大的变化作为用户交互的应用程序中完成各种任务.通过 ...

  6. 企业IT管理员IE11升级指南【17】—— F12 开发者工具

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  7. L18 如何快速查找文档获得帮助

    原地址:http://www.howzhi.com/course/286/lesson/2121 查找文档快速 苹果提供了丰富的文档,以帮助您成功构建和部署你的应用程序,包括示例代码,常见问题解答,技 ...

  8. 基于Web的企业网和互联网的信息和应用( 1194.22 )

    基于Web的企业网和互联网的信息和应用( 1194.22 ) 原文更新日期: 2001年6月21日原文地址: http://www.access-board.gov/sec508/guide/1194 ...

  9. HTML 学习进度备忘

    书签:”HTML 高级教程“及后面的内容尚未学习,另外跳过的内容有待跟进 __________________ 学习资源:W3School. 开始时间:2013.11.20 简述:此网址做为学习教程相 ...

随机推荐

  1. Linux安装nfs共享文件

    简介nfs nfs网络文件系统常用于共享音视频,图片等静态资源.将需要共享的资源放到NFS里的共享目录,通过服务器挂载实现访问. 服务端安装: yum install -y nfs-utils rpc ...

  2. (三十)c#Winform自定义控件-文本框(三)

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  3. Django2.2中间件详解

    中间件是 Django 用来处理请求和响应的钩子框架.它是一个轻量级的.底层级的"插件"系统,用于全局性地控制Django 的输入或输出,可以理解为内置的app或者小框架. 在dj ...

  4. java中String,StringBuffer,StringBuilder的区别

    String: 1,是字符串常量,一旦创建就不能修改.对于已经存在了的String对象的修改都是重新创建一个新的对象,然后把新的值保存进去. 2,String也是final类,不能被继承. 3,而且S ...

  5. Jedis的配置和优化

    参数名:maxTotal 含义:资源池最大连接数 [默认值:8] 使用建议:需要考虑以下几点 1.业务希望的Redis并发量 2.客户端执行命令时间 3.Redis资源:例如应用个数(客户端)* ma ...

  6. Yii CGridView 之 SQL 语句

    在CGridView里,有时候需要用到复杂的查询时,可用 CSqlDataProvider替换CActiveDataProvider, CSqlDataProvider 可用复杂的查询语句,例子如下: ...

  7. 章节十六、2-TestNG注解和断言

    一.TestNG注解的testcease不是自上而下运行的,而是按照方法名的字母排序或数字的大小顺序运行的. 二.断言:判断返回的结果与我们的预期结果是否一致. 1.Assert.assertTrue ...

  8. html页面中关于按钮type的要求

    重要事项:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值.Internet Explorer 将提交 <button> 与 </button> 之 ...

  9. Python利用切片操作,实现一个trim()函数,去除字符串首尾的空格,注意不要调用str的strip()方法:

    这是一个最简单的自定义函数,自己调用自己,我的理解是这样的: 1.传一个s参数进行判断,如果有空字符它会切掉前后的空字符,返回一个新的s,这个新的s还有的话会继续执行这种重复的操作,类似于递归(博主不 ...

  10. asio kcp源码分析

    asio kcp代码走读 (1)kcp_client_wrap类 a 提供方法接口如下: send_msg kcp_client_.send_msg(msg); stop //等待工作线程退出 set ...