Html公共页面的引用

1.首先要将公共部分单独放在一个html页面中。这个页面必须是一个完整的页面，包含head,body等标签，引入的css,js等都需要在这个页面中引入。 
也就是说，这个页面单独打开的情况下， 也是一个可以正常显示的页面。注意，在这个页面中其他文件引用位置最好使用绝对路径，要不然到你引入公共页面的页面有可能会找不到文件

如下两张图，单独的页面并且此页面可以单独访问：

2.使用ifram标签引用公共页面；

<iframe src="./commonhtm/head.html" width="100%"; height="700px" frameborder="0" scrolling="no" name="headFrame"></iframe>

3.有可能出现的问题：

当你引入此文件后，会影响原来的布局：比如我的这种情况，顶部的菜单包含了下拉的菜单，这个菜单是在鼠标移动上去触发的，这时iframe如何设置了700px的高度，这样会影响下面的div，会造成一大段的空白，该如何解决此问题呢？解决办法是：在用一个div将iframe套起来，这样就不会有问题了，像下面这样：

<div id="root_first" style="display: block;height: 268px;z-index:9999;">
				<iframe src="./commonhtm/head.html" width="100%"; height="700px" frameborder="0" scrolling="no" name="headFrame"
					style="position: absolute;z-index:9999;"></iframe>
			</div>

同时注意：iframe需要设置为position: absolute;时，他的z-index:9999才会生效，不然总是被主页面挡住，最终的效果如下图：