iframe的作用
iframe可以将多张 HTML 网页放到一个页面内,组成一个复合的 HTML页面,从实际效果来看相当于实现了一个有横幅标题,有左侧菜单栏,有右边大面积的空白处显示具体内容网页。
当然这些并不是固定的,具体复合多少个网页,怎样显示可以有你自己来决定。
一般来说大概会做成这样的样子。
其实和一般的开发工具的布局差不多,一般的后台管理系统也会做成这个样子。
来看看代码,同样写在Hbuilder中,方便调试大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<iframe src="top.html" width="100%" height="100px"></iframe>
<iframe src = "frame list.html" width="20%" height="500px"></iframe>
<!--连接到列表超链接网页-->
<!--可以设置一个空框架 设置好名字 将超链接的target连到这个框架中-->
<iframe src="右侧框.html" name="right" width="78%" height="500px"></iframe>
<!--宽高为框架的大小 -->
</body>
</html>
可以在top.html(当然也可以自己命名)设计你自己的标题页HTML,在list.html中设计左侧的菜单栏。
右侧当然是你想要展示的主要内容啦,难度不大,相当于写了四张页面,将三张的资源整合到一张中。
如果想去掉边边框加入
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
跳转到指定页面
<iframe src="demo_iframe.html" name="iframeTest"></iframe>
<p><a href="http://www.baidu.com" target="iframeTest">baidu</a></p>
上面的代码就写在第四张HTMl中