框架嵌套实例

时间:2022-09-08 12:55:41

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

要求: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》