在html页面引入另一个html页面

最新推荐文章于 2023-06-26 16:46:04 发布

小熊DVD

最新推荐文章于 2023-06-26 16:46:04 发布

阅读量1k

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_48240707/article/details/129375244

版权

需求：需要把我做过的页面，拆分成可拆卸的模块，且要给一个示例展示。

html拆分页面，只需要把每个模块单独出来，宽度不能写死。

在html页面引入另一个html页面

贴一段代码：

	<body style="background-color: #FFFFFF;">
		<div style="margin: 0 20px;">
			<div id="header"></div>
			<!-- 第二块 -->
			<div style="display: flex;flex-direction: row;align-items: center;">
				<div id="dbLine" style="width: 70%;"></div>
				<div id="bin1" style="width: 30%;"></div>
			</div>
			<!-- 图标 -->
			<div id="icon"></div>
			<!-- 第三块 -->
			<div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
				<div id="wxtable" style="width: 60%;" ></div>
				<div id="zhu1" style="width: 40%;"></div>
			</div> 
			<!-- 第四块 -->
			<div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
				<div id="line1" style="width: 30%;"></div>
				<div id="line2" style="width: 30%;"></div>
				<div id="zhu2" style="width: 30%;"></div>
			</div>
			<!-- 第五块 -->
			<div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
				<div id="table2" style="width: 60%;"></div>
				<div id="bin2" style="width: 40%;"></div>
				
			</div>
		</div>
	</body>
<script>
	$('#header').load('mod-zctj.html')
	$('#dbLine').load('mod-dblc.html')
	$('#bin1').load('mod-bin1.html')
	$('#icon').load('mod-cygl.html')
	$('#wxtable').load('mod-tab1.html')
	$('#zhu1').load('mod-zhu1.html')
	$('#line1').load('mod-line1.html')
	$('#line2').load('mod-line2.html')
	$('#zhu2').load('mod-zhu2.html')
	$('#table2').load('mod-tab2.html')
	$('#bin2').load('mod-bin2.html')
</script>