初次学习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. 源码解读 Spring Boot Profiles

    前言 上文<一文掌握 Spring Boot Profiles> 是对 Spring Boot Profiles 的介绍和使用,因此本文将从源码角度探究 Spring Boot Profi ...

  2. Lasso估计学习笔记(二)

    先看Lasso估计学习笔记(一),这篇是续的上一篇

  3. Java Socket：飞鸽传书的网络套接字

    在古代,由于通信不便利,一些聪明的人就利用鸽子会飞且飞得比较快.会辨认方向的优点,对其进行了驯化,用来进行消息的传递——也就是所谓的“飞鸽传书”.而在 Java 中,网络套接字(Socket)扮演了同 ...

  4. Mysql优化（出自官方文档） - 第八篇（索引优化系列）

    目录 Mysql优化(出自官方文档) - 第八篇(索引优化系列) Optimization and Indexes 1 Foreign Key Optimization 2 Column Indexe ...

  5. 从 Python 之父的对话聊起，关于知识产权、知识共享与文章翻译

    一.缘起 前不久,我在翻译 Guido van Rossum(Python之父)的文章时,给他留言,申请非商业用途的翻译授权. 过程中起了点小误会,略去不表,最终的结果是:他的文章以CC BY-NC- ...

  6. Mongodb最基础入门教程

      Mongodb最基础入门教程 如果想了解一下redis的入门教程,可以去看一下我的上一篇博客 Mongodb的安装大家可以参考一下其他博主的博客,这里我就不做介绍了.不过值得注意的是,在Linux ...

  7. nginx之location详解

    location有定位的意思,根据uri来进行不同的定位,在虚拟主机中是必不可少的,location可以定位网站的不同部分,定位到不同的处理方式上. location匹配分类 精准匹配 一般匹配 正则 ...

  8. Python之流程控制——if...else...

    Python之流程控制--if...else... 一.流程控制 假如把程序比做走路,那我们到现在为止,一直走的都是直路,还没遇到过分岔口.当遇到分岔口时,你得判断哪条岔路是你要走的路,如果我们想让程 ...

  9. .net core api服务端跨域配置

    第1步:添加包引用(.net core 2.2 已自带此包,可跳过此步骤) Install-Package Microsoft.AspNetCore.Cors 第2步:在Startup.cs文件的Co ...

  10. 安装python的第三方库pillow

    参考:http://jingyan.baidu.com/article/ff42efa929e6c8c19f220254.html 用Python做图像处理时,需要用到PIL(图像处理库).但是PIL ...