在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>