原来写一个页面。
比如有头部。和底部。我们都是定义一个div
只不过头部有一个class=header 尾部的div是class=footer
现在html5出现以后。主张语义化标签。
现在我们写样式的时候。选择器直接就写header就可以了。
不需要这么写 divheader
这样的好处是使得文档结构层次清晰。利于代码编写和开发。
还有搜索引擎优化等等的好处。
position:fixed 可以固定。
position:absolute也行。相对于fixed -》absolute不能随着页面的拉伸而定义在头部或你想定义的地方（即浏览器最大最小化固定的位置会不一样）
而fixed如果是定义紧贴头部的化，浏览器最大最小化都是在头部不会变形。
HTML复用，不需要任何模板就可以复用相同的内容
条件：控制页面布局显示就可以完成
示例：
主页
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>HTML调试</title>
<script type='text/javascript' src='js/jquery-180minjs'></script>
<script src='js/zuiminjs' type='text/javascript' charset='utf-8'></script>
<script src='js/jquery-barcodejs' type='text/javascript' charset='utf-8'></script>
<link rel='stylesheet' type='text/css' href='css/zuicss' />
<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: absolute;left: 0px;top: 0px;height: 70px;width: 100%;border-bottom: 1px solid #F1F1F1;">
<iframe align="center" width="100%" height="70px" src="html/page_headerhtml" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</div>
<div id="contents" style="position: absolute;left: 0px;top: 70px;width: 100px;">
<!--不相同内容容器-->
</div>
<!--复用页面容器2-->
<div style="position: absolute;left: 0px;top: 585px;height: 70px;width: 100%;border-top: 1px solid #F1F1F1;">
<iframe align="center" width="100%" height="70px" src="html/page_footerhtml" 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-180minjs" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="/css/bootstrapmincss" />
<title>复用头部</title>
</head>
<body>
<div style="position: absolute;left: 0px;top: 0px;height: 70px;width:100%;background: #ff0;font-size: 30px;text-align: center;line-height: 70px;">
复用头部
</div>
</body>
</html>
复用页面2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="/js/jquery-180minjs" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="/css/bootstrapmincss" />
<title>复用底部</title>
</head>
<body>
<div style="position: absolute;left: 0px;top: 0px;height: 70px;width:100%;background: #ff0;font-size: 30px;text-align: center;line-height: 70px;">
复用底部
</div>
</body>
</html>
项目结构
实现结果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）