HTML 导航框架 （使用 Frame ）
文章出处 ： http://blog.sina.com.cn/s/blog_6f6d07f80100oqlt.html （本文转自此博客）
在浏览网页时，我们经常会看到一个导航条，当点击导航条上的项目时，相应网页会在显示区域变换显示。首先准备一个主界面文件main.htm，将其划分成两块区域index和content. <html> <frameset cols="120,*"> <frame name="index" src="index.htm" />
<frame name="content" src="frame_a.htm" /> </frameset> </html> 其中index区域链接index.htm文件，主要是一些链接项目；content区域负责显示相应链接文件，初始显示链接为frame_a.htm.
name="index"是标明index区域的属性，name="content"是标明content区域的属性。 那么如何将index.htm中的链接输出到content区域显示呢？这里需要设置链接中的target属性。代码如下： <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>
效果图如下贴出：
文章出处 ： http://blog.sina.com.cn/s/blog_6f6d07f80100oqlt.html （本文转自此博客）
HTML 导航框架 （使用 Frame ）的更多相关文章
- 框架中的导航框架 & position定位
框架中,通过链接将一个页面显示在另一个框架中: 总框架: <frameset cols="15%,*"> <frame src="xx.html ...
- WPF简单导航框架（Window与Page互相调用）
相当多的WPF程序都有着丰富的页面和功能,如何使程序在不同页面间转换并降低资源占用,选择适合自己的导航框架就很重要了.最近花了一点时间做了一个简单的导航框架,并在这个过程中对Window.Page.U ...
- frameset导航框架
1.制作导航框架(注意"name='mainframe'") <html> <frameset cols="25%,75%"> < ...
- 背水一战 Windows 10 (41) - 控件（导航类）: Frame
[源码下载] 背水一战 Windows 10 (41) - 控件(导航类): Frame 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 示例Controls ...
- WPF中的导航框架（一）——概述
有的时候,我们需要一个支持页面跳转的UI,例如文件浏览器,开始向导等.对于这样的界面,简单的可以使用ContentControl + ContentTemplateSelector的方式来实现,但是有 ...
- HTML导航框架实现
导航栏界面(html_contents.html) <!DOCTYPE html> <html> <head> <meta charset=” utf-8” ...
- [转]WPF中的导航框架
有的时候,我们需要一个支持页面跳转的UI,例如文件浏览器,开始向导等.对于这样的界面,简单的可以使用ContentControl + ContentTemplateSelector的方式来实现,但是有 ...
- ModernUI教程：如何使用你自己的导航框架
Modern UI for WPF带有一个内置的页面导航框架,易于使用和可扩展的.但这并不是必须的,你也可以自己来自定义一个导航框架. 默认的ModernWindow控件模板包括标 ...
- 精品干货丨APP常用导航框架
文章目的:在整体上把握移动端App的导航框架,理解每种导航所具有的优点.局限性和其所适用的范围. 文章用心:典型APP案例(源码:http://www.jinhusns.com/Products/Do ...
- 背水一战 Windows 10 (42) - 控件（导航类）: Frame 动画
[源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 动画 示例An ...
随机推荐
- Linux top命令排序
在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 Linux 中,可以通过 top 命令来查看 CPU 使用状况.运行 top 命令后,CPU 使用状态会以 ...
- Raspberry pi之wifi设置-3
1.配件套装里最好有wifi网卡,非常小如下图 插入Raspberry pi的USB口,用lsusb来查看USB设备列表如下 pi@raspberrypi~/Desktop $ lsusb Bus 0 ...
- qt 工具下的dump工具导出文档出现异常解决方案
今天一直认为qt环境下的dumpcpp 和dumpdoc两个导出工具很好用,可以今天在导出MSChart组件的类方法文档时,虽然导出成功了,但是导出的结果却是令人失望.自己也不知道如何能够正确导出,就 ...
- 学习总结——Selenium元素定位
读一本好书,不能读读就算了,做一下总结,变成自己的,以备查阅. 1. driver.findElement(By.id(<element ID>)) ID是独一无二的,使用 ...
- LVS+keepalived负载均衡实战
1 首先安装虚拟机 安装系统 这里 配置两台虚拟机 1:192.168.137.102 2:192.168.137.103 分别安装tomcat 默认80端口,同时都是开启状态 配置192.168 ...
- How secure FB Messenger is?
It's reported that FB Messenge is the most secure App for instant messaging service. Let's see if FB ...
- Mysql字符类型比较
一. binary和char比较: binary 字节为单位,char字符为单位,字符占几个字节取决于字符集 binary 比较规则基于字节值,char基于字符,即使是_bin的比较规则 范围都0- ...
- template.js遍历对象的写法
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>菜鸟 ...
- Hex string convert to Binary String and Vise-Versa（16进制和2进制字符串的相互转换）
这个转换在我们日常的编码中还是很有机会遇到的,这里贴出来和大家分享探讨. void pu_hex_to_binary(std::string strHex, std::string &strB ...
- Windows下Eclipse+Scala+Spark开发环境搭建
1.安装JDK及配置java环境变量 本文使用版本为jdk1.7.0_79,过程略 2.安装scala 本文使用版本为2.11.8,过程略 3.安装spark 本文使用版本为spark-2.0.1-b ...