静态页面的公共头部和底部使用

有一些网站的头部和底部都是一样的，把公共头部和底部分离，使用时引用比重复写在每个页面好的多。实现方法如下：

第一步：把公共的头部和底部分别写在header.html和footer.htmlr中，公共js中写

$(".header").load("header.html");
$(".footer").load("footer.html");

第二步：每个页面整体布局，页面引入公共的js文件

<div class="box">
    <div class="header"></div>
    <div class="cont"></div>
    <div class="footer"></div>
</div>

这样就完成了静态页面公共头部和底部的引用。

注意：也是在使用中遇到的问题，在header.html中不免引用到图片（比如logo)，这时候logo的引用地址不能是header.html对应的相对路径，而应该是哪个页面用到对应此页面的相对路径。

 

转载于:https://www.cnblogs.com/wanan-01/p/9295517.html