框架嵌套实例

简介: <p><span style="white-space:pre"></span>框架无疑网页开发里运用很广,本实例运用框架嵌套知识构建基础网页。</p> <p>要求:1、将网页分为上中下三个大区域;</p> <p><span style="white-space:pre"></span>2、中间区域再分成左右区域;</p> <p><span style="white-space:pr

框架无疑网页开发里运用很广,本实例运用框架嵌套知识构建基础网页。

要求:1、将网页分为上中下三个大区域;

2、中间区域再分成左右区域;

3、在中间左侧区域添加代码,控制其他三个区域显示的内容。

效果图如下:

源码奉上:

Frame.html

<html>
<head>
<title>框架嵌套</title>
<frameset rows="150,*,180">
<frame name="topframe" src="topleft.html">
<frameset cols="20%,*">
	<frame name="midleftframe" src="midleft.html">
	<frame name="midrightframe" src="midright.html">
</frameset>
<frame name="bottomframe" src="bottomleft.html">
</frameset><noframes></noframes>
</head>
</html>

midleft.html

<html>
<head>
<title>框架嵌套midleft</title>
</head>
<body>
<li><a href="http://www.baidu.com" target="topframe">•连接到顶部框架</a></li>
<li><a href="http://hao.360.cn/" target="midrightframe">•连接到右部框架</a></li>
<li><a href="http://blog.csdn.net/u010887744" target="bottomframe">•连接到底部框架</a></li>
</body>
</html>

实例原型来源于书籍《零点起飞学JavaScript+jQuery》


目录
相关文章
|
8月前
|
存储 数据库连接 API
具有嵌套关系的可重用API资源——Laravel5.5
本文聚焦于利用 Laravel 中的 Resource::collection,并强调控制器对于处理数据关系包含的重要性。
82 1
|
7月前
如何实现嵌套路由
如何实现嵌套路由
36 1
|
8月前
|
存储 C++
函数嵌套调用:C++编程的核心技术
函数嵌套调用:C++编程的核心技术
114 1
|
7月前
|
程序员 C语言 C++
【C++语言】继承:类特性的扩展,重要的类复用!
【C++语言】继承:类特性的扩展,重要的类复用!
|
8月前
|
算法 Java
Java循环嵌套技术深入探索
Java循环嵌套技术深入探索
65 0
|
8月前
|
存储 小程序 程序员
嵌套的方式构建
嵌套的方式构建
36 0
|
8月前
|
前端开发 JavaScript 安全
对象属性值的黑魔法:ES8的简化语法让你的代码更简洁
对象属性值的黑魔法:ES8的简化语法让你的代码更简洁
简化对象和函数写法
简化对象和函数写法
45 1
|
前端开发
前端通用递归写法?
前端通用递归写法?
|
JavaScript 前端开发
js对象的创建对象模式和继承模式(上)---构建对象模式
js对象的创建对象模式和继承模式(上)---构建对象模式
136 0