使用iframe实现html简单的上中下布局

来源：互联网发布：剑网三捏脸数据图编辑：程序博客网时间：2024/04/30 03:28

iframe就是我们常用的iframe标签：<iframe>。iframe标签是框架的一种形式，也比较常用到，iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站或者本站其他页面的内容。iframe标签的最大作用就是让页面变得美观。iframe标签的用法有很多，今天就讲一讲如何用iframe实现html简单的上中下布局。

下面新建一个头部页面 a.html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>头部</title><style type="text/css">.title{width:800px;height:180px;margin:0px auto;border:1px solid red;font-size:50px;text-align:center;   line-height:200px;}</style></head><body><div class="title">头部</div></body></html>

在新建一个底部页面 b.html

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>底部</title><style type="text/css">.title{width:800px;height:180px;margin:0px auto;border:1px solid red;font-size:50px;text-align:center;   line-height:200px;}</style></head><body><div class="title">底部</div></body></html>

头部页面和底部页面创建好之后在新建一个c.html，c.html主要是用来布局

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>main</title><style type="text/css">.div{width:900px;height:200px;margin:0px auto;font-size:50px;text-align:center;   line-height:200px;}</style></head><body><div class="div"><iframe frameborder=0 width=850 height=200 marginheight=0 marginwidth=0 scrolling=no src="a.html"></iframe></div><div class="div">中间内容</div><div class="div"><iframe frameborder=0 width=850 height=200 marginheight=0 marginwidth=0 scrolling=no src="b.html"></iframe></div></body></html>

这样就可以使用iframe标签把a.html 和 b.html 嵌入的主页面中了，是不是很省事？创建多个页面的时候再也不用把头部和尾部的html代码粘来粘去了。到时候如果要修改头部和底部的内容，只需要修改a.html 和 b.html就行了维护起来也比较方便。

0 0