HTML引用公共组件

最新推荐文章于 2024-05-23 14:01:48 发布

刺心疯

最新推荐文章于 2024-05-23 14:01:48 发布

阅读量2.3k

点赞数 1

分类专栏：前端 HTML5

本文链接：https://blog.csdn.net/qq_42363090/article/details/99413004

版权

HTML5 同时被 2 个专栏收录

201 篇文章 10 订阅

订阅专栏

前端

38 篇文章 1 订阅

订阅专栏

在test.html引用footer.html
效果图
在这里插入图片描述
代码

test.html

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8">
		<title>引用demo</title>
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	</head>
 
	<body>
		<div id="app">
			我是頁面
		</div>
 
		<!-- 底部 -->
		<div class="footer">
		</div>
 
		<!-- 引入头部和底部的代码 -->
		<script type="text/javascript">
			$(".footer").load('footer.html');
			$.nicenav(300, '216px');
		</script>
	</body>
 
</html>

footer.html

<div class="footerTop">
			<dd>深圳某某软件科技有限公司</dd>
	<div class="footerTopRight">
		<ul>
			<li><img src="https://avatar.csdn.net/5/5/7/3_qq_42363090.jpg" alt=""><span>****小程序</span></li>
			<li><img src="https://avatar.csdn.net/5/5/7/3_qq_42363090.jpg" alt=""><span>***公众号</span></li>
		</ul>
	</div>
</div>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

刺心疯

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML引用公共组件

在test.html引用footer.html效果图代码test.html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>引用demo</title> <script src="https://cdn.staticfile...
复制链接

扫一扫