条件：控制页面布局显示就可以完成
示例：
主页
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML调试</title>
<script type='text/javascript' src='js/jquery-1.8.0.min.js'></script>
<script src='js/zui.min.js' type='text/javascript' charset='utf-8'></script>
<script src='js/jquery-barcode.js' type='text/javascript' charset='utf-8'></script>
<link rel='stylesheet' type='text/css' href='css/zui.css' />
<style type='text/css'>
#container {
position: absolute
left: 0
top: 0
right: 0
bottom: 0
width: 100%
height: 100%
overflow: auto
font-family: '宋体'
}
</style>
</head>
<body>
<div id='container'>
<!--复用页面容器1-->
<div style="position: absoluteleft: 0pxtop: 0pxheight: 70pxwidth: 100%border-bottom: 1px solid #F1F1F1">
<iframe align="center" width="100%" height="70px" src="html/page_header.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div id="contents" style="position: absoluteleft: 0pxtop: 70pxwidth: 100px">
<!--不相同内容容器-->
</div>
<!--复用页面容器2-->
<div style="position: absoluteleft: 0pxtop: 585pxheight: 70pxwidth: 100%border-top: 1px solid #F1F1F1">
<iframe align="center" width="100%" height="70px" src="html/page_footer.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
</div>
</body>
</html>
复用页面1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<title>复用头部</title>
</head>
<body>
<div style="position: absoluteleft: 0pxtop: 0pxheight: 70pxwidth:100%background: #ff0font-size: 30pxtext-align: centerline-height: 70px">
复用头部
</div>
</body>
</html>
复用页面2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../js/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="../css/bootstrap.min.css" />
<title>复用底部</title>
</head>
<body>
<div style="position: absoluteleft: 0pxtop: 0pxheight: 70pxwidth:100%background: #ff0font-size: 30pxtext-align: centerline-height: 70px">
复用底部
</div>
</body>
</html>
项目结构
实现结果：
vΘde庭ly‖hnr甩〃цfūk三{dede:include＝调用模板 filename="head。htm"。这个w的意是是head。htm这个e模板。。就是头部的意思 ,合在一w起就是调用头部模板的意思1、安装Emmet
（原来叫zen
conding）插件
2、新建文档，右下角选择类型为html，然后编辑时，敲一个
!
(感叹号)，再敲一下
Tab
键。就会出现完整的html模板。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）