框架无疑网页开发里运用很广,本实例运用框架嵌套知识构建基础网页。
要求: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》