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

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

第一步:把公共的头部和底部分别写在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对应的相对路径,而应该是哪个页面用到对应此页面的相对路径。

 

posted @ 2018-07-11 17:01  wanan_01  阅读(1426)  评论(1编辑  收藏  举报