HTML引用公共的页眉头部header.html文件和尾部footer.html文件HTML引用公共的页眉头部header.html文件和尾部footer.html文件

生命不息,
折腾不止!

HTML引用公共的页眉头部header.html文件和尾部footer.html文件

精华部分:

<body>
    <div id="page1"></div>
    <div id="page2"></div>
    <script>
          $("#page1").load("page/Page_1.html");
          $("#page2").load("page/Page_2.html");
    </script>
</body>
————————————————
版权声明:本文为CSDN博主「luckydie」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/luckydie/article/details/83383536

详细说明:

来源:https://blog.csdn.net/qq_35393869/article/details/79803190

文章目录

  • 如何实现多个.html静态页,引用同一个header.html和footer.html文件?
  • HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件?
  • 首先,先看一下代码与界面的划分,效果示意图如下:
  • 然后,看一下head.html文件,全部代码示下:
  • 其次,看一下footer.html文件,全部代码示下:
  • 最后,看一下index.html文件,全部代码示下:

 

如何实现多个.html静态页,引用同一个header.html和footer.html文件?

静态html文件,使用公共头部和尾部的解决办法之一

前端静态html页面,封装公共的头文件(header:顶部页眉,顶部导航栏等部分)和尾部文件(footer:CopyRight、友情链接等部分)

HTML如何引用公共的页眉头部header.html文件和尾部footer.html文件?

因保密等诸多因素,线上项目运行效果,暂不推荐大家观看,敬请谅解。

本次实例为临时花了几分钟手写的,下面就来讲一下常用的方法:

当前方法:通过load()函数,引入公共头部和尾部文件;

代码预览:

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

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

首先,先看一下代码与界面的划分,效果示意图如下:

 

这里写图片描述

 

然后,看一下head.html文件,全部代码示下:

  <!-- 页眉 共通 --> 
	   <div class="header">
	    <div class="htmargin">
	     <div class="fl">
	      <i class="htphone"></i>
	      <span class="htfont">咨询电话:</span>
	      <i class="telphone">0123-123456</i>
	      <span class="htfont">&nbsp;&nbsp;(工作日9:00-17:30)</span>
	      <span class="headerwx"><a class="htheader htwx"></a>
	       <div class="htwx">
	        <div class="httext">
	         <span>扫码关注官方公众号</span>
	         <i></i>
	        </div>
	       </div></span>
	      <span class="headerwb"><a class="htheader htwb"></a>
	       <div class="htwb">
	        <div class="httext">
	         <span>在线咨询QQ客服</span>
     <div class="htwb-link">
      <a href="" class="htwb-link-font">@在线客服</a>
	         </div>
	        </div>
	       </div><i></i></span>
	     </div>
	     <div class="fr item-list">
	      <ul class="htul">
	       <li class="htli" id="loginOut" style="display:none"><a onclick="javascript:doLogout();" class="httitle">退出</a></li>
	       <!--用户名-->
	       <li class="htli" id="htName-li" style="display:none"><a href="#" class="httitle " id="htName"></a></li>
	       <!--<li class="htli" id="htRegister"><a href="register.html" class="httitle loginout">注册</a></li>-->
	       <li class="htli" id="htLogin"><a href="#" class="httitle">登录</a></li>
	       <li class="htli"><a href="" class="httitle">关于我们</a></li>
	       <li class="htli"><a href="" class="httitle">帮助中心</a></li>
	       <li style="height: 36px;float: right;text-align: center;"><span class="httitle-top-txt">推荐有惊喜&nbsp;&nbsp;好礼拿不停</span></li>
	      </ul>
	     </div>
	    </div>
	   </div>
	   <div class="jpt-nav">
	    <input type="hidden" id="top_login" />
	    <div class="htmargin">
	     <div class="nav fl">
	      <a href="" style="overflow:hidden;display:block;"><i class="logo"></i><!--<i class="jpt-logo-right"></i>--></a>
	     </div>
	     <div class="nav-wrap fr" style="position:relative">
	      <ul class="group" id="example-one">
	       <li class="index"><a href="">首页</a></li>
	       <li class="product"><a href="">全部商品</a></li>
	       <li style="float:right;" class="self"><a style="cursor:pointer;" href="">我的账户</a></li>
	       <li class="mae" id="mae" style="width: 86px; left: 0px;"></li>
	      </ul>
	     </div>
	    </div>
	   </div> 
	   <!-- 页眉 共通 -->

<script src="js/public_share_code.js"></script>

其次,看一下footer.html文件,全部代码示下:

 <!-- S 页脚共通 -->
    <div class="btmpage" style="margin-top: 48px;"> 
	   <div class="div-btm "> 
	    <div class="pro-tolo"> 
	     <div class="div-btm-left"> 
	      <a href="" target="_blank" class="btm">关于我们</a> 
	      <a href="" target="_blank" class="btm">全部商品</a> 
	      <a href="" target="_blank" class="btm">帮助中心</a> 
	      <a href="" target="_blank" class="btm">加入我们</a> 
	      <a href="" target="_blank" class="btm">联系我们</a> 
	      <a href="" target="_blank" class="btm">意见反馈</a> 
	      <span class="divpc-contact">中国北京市&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系方式 <br />电话:+86-0551-65522006&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邮箱:123456@123.mail<br />地址:中国北京新城区XX写字楼1楼101~106</span> 
	     </div> 
	     <div class="div-btm-center"> 
	      <div class="div-btm-reph"> 
	       <span class="divpc-contact-top">客服热线1:0123-87654321 <i class="btm-time">&nbsp;&nbsp;工作日9:00-17:30</i><br />客服热线2:0123-12345678 <i class="btm-time">&nbsp;&nbsp;工作日9:00-17:30</i><br />QQ客服:123456789</span> 
	       <i class="div-right-qq"><a href="" class="divpc-online onlineChat">在线客服</a></i> 
	       <div class="c"></div>
	      </div> 
	     </div> 
	     <div class="div-btm-right"> 
	      <span class="gz"><i class="khd"></i><span class="ph-gzh">微信学习群</span></span> 
	      <span class="gz"><i class="gzh"></i><span class="ph-gzh">官方公众号</span></span> 
	     </div>
	     <div class="c"></div> 
	    </div> 
	    <div class="div-btm-info"> 
	     <div class="div-btm-gg" style="display: none;"> 
	      <a target="_blank" class="div-btm-pic"><i class="wangxin"></i></a> 
	      <a target="_blank" class="div-btm-pic"><i class="kx"></i></a> 
	      <a target="_blank" class="div-btm-pic"><i class="gt"></i></a> 
	      <a target="_blank" class="div-btm-pic"><i class="360"></i></a> 
	      <a target="_blank" class="div-btm-pic"><i class="icp"></i></a> 
	      <a target="_blank" class="div-btm-pic"><i class="djcp"></i></a> 
	      
	      <a target="_blank"><img src="images/ebsIcon.png" title="" alt="" width="32" height="45" border="0" style="border-width:0px;border:hidden; border:none;" /></a>
	      
	      <a class="c"></a> 
	     </div>
	     <div class="c"></div> 
	     <div class="copyright">
	      Copyright &copy; 2012-2018 www.123456.com All Rights Reserved&nbsp;&nbsp;|&nbsp;&nbsp;生态家装公司
	      <span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a style="color:#4e5158;" href="" target="_blank">京ICP备123456789号</a></span>
	     </div> 
	    </div> 
	   </div>
	  </div>

最后,看一下index.html文件,全部代码示下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>demo演示</title>
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- 顶部导航 -->
<div class="headerpage"></div>
<!--顶部导航 over-->	

<!--中部主体-->	
	<p>···代码省略···</p>
<!--中部主体 over-->  

<!--footer-->  
<div class="footerpage"></div>
<!--footer over-->

<script src="js/jquery.min.js"></script>
<script>
	$(function(){
		/*公共部分
		 * 导航栏
		 * footer CopyRight
		 */
		$(".headerpage").load("header.html");
		$(".footerpage").load("footer.html");
	});
</script>
</body>
</html>

通过上面的描述,可以发现:

header.htmlfooter.html文件中,并非是标准的html文档格式!

与此同时,通过index.html中的jQuery函数 load()将上述的两个公共文件引入进来,从而形成一个完整的页面;

并且,不会影响到其他页面对于公共文件的引用和使用;

赞() 打赏
未经允许不得转载:我的博客 » HTML引用公共的页眉头部header.html文件和尾部footer.html文件
分享到: 更多 (0)

评论 4

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    这是评论测试

    DUX主题小秘7个月前 (09-17)回复
    • 飞歌导航东方红烦得很

      themebetter主题小秘3周前 (04-08)回复
  2. #2

    这是新的一条评论

    DUX主题小秘7个月前 (09-17)回复
  3. #3

    未来一年,中国的移动支付市场会是什么样?

    DUX主题小秘7个月前 (09-17)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

大前端WP主题 更专业 更方便

联系我们 联系我们