精华内容
下载资源
问答
  • 如何实现多个.html静态页,引用同一个header.htmlfooter.html文件? 前端静态html页面,封装公共的头文件(header:顶部页眉,顶部导航栏等部分)和尾部文件(footer:CopyRight、友情链接等部分) 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()将上述的两个公共文件引入进来,从而形成一个完整的页面;
    并且,不会影响到其他页面对于公共文件的引用和使用;


    值得注意的是:

    在静态文件:header.html的页眉代码中,有一段代码:
    <script src="js/public_share_code.js"></script>
    这段代码,必须在header.html中引入!
    否则,关于导航栏最顶部的页眉中mousehover()微信图标,JS悬浮显示微信二维码的效果,将会失效!


    其他方法,不再具体赘述。


    以上就是关于“静态html文件,使用公共头部和尾部的解决办法之一”的全部内容。

    展开全文
  • HTML5 footer元素

    千次阅读 2018-03-31 16:41:30
    footer元素footer元素代表整个页面、文章或区域的页脚(或脚注),常常位于页面或内容块的结尾,通常包含页面或内容块的脚注信息,如作者、版权、相关文档的链接、联系信息等。如果 footer元素是 body 元素的子元素...

    footer元素

    footer元素代表整个页面、文章或区域的页脚(或脚注),常常位于页面或内容块的结尾,通常包含页面或内容块的脚注信息,如作者、版权、相关文档的链接、联系信息等。

    如果 footer元素是 body 元素的子元素,它就成为整个文档的页脚,通常出现在页面的结尾,并包含一组链接、版权、许可协议等信息。如:

    1. <body>
    2. <footer>
    3. <p>
    4.     <a href="">关于我们</a> |
    5.     <a href="">联系我们</a> |
    6.     <a href="">网站地图</a> |
    7.     <a href="">诚聘英才</a> |
    8.     <a href="">商务合作</a>
    9. </p>
    10. <p>Copyright © 2016</p>
    11. </body>

    运行结果如图 2‑3 所示:

    网站页脚图2-3 网站页脚

    如果 footer元素是 article 或 section 元素的子元素,它就成为文章或内容块的脚注,其中可以包含相关文章的链接、文章的发布日期、分类等。如,可以用来显示“上一篇”、“下一篇”的链接:

    1. <article>
    2.     ...
    3.     <footer>
    4.         <a href="#">上一篇</a> | <a href="#">下一篇</a>
    5.     </footer>
    6. </article>

    当然,footer元素并不一定总是在页面、文章或区域的结尾,但是它通常是在那个位置。并且,一个页面里可以有多个 footer元素,出现次数也没有限制。版权声明:本文出自 歪脖网 的《HTML5 宝典》,欢迎在线阅读, 并提出宝贵意见。

    展开全文
  • HTML引用公共页面(header.htmlfooter.html) 我们做项目时,会发现许多页面有相同的部分,重复写会花费大量不必要的时间,复制的话修改不方便。只要我们把公共部分提取出来,单独写,在需要用的时候引入就可以。 ...

    HTML引用公共页面(header.html和footer.html)

    我们做项目时,会发现许多页面有相同的部分,重复写会花费大量不必要的时间,复制的话修改不方便。只要我们把公共部分提取出来,单独写,在需要用的时候引入就可以。

    <body>
    <div class="headerpage"></div>
    <div>...中间部分...</div>
    <div class="footerpage"></div>
    <script src="js/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(function(){
            $(".headerpage").load("header.html");
            $(".footerpage").load("footer.html");
        });
    </script>
    </body>
    
    展开全文
  • 完美解决HTMLfooter保持在页面底部问题

    万次阅读 多人点赞 2017-05-10 22:42:49
    完美解决HTMLfooter保持在页面底部问题

    很多人认为页面页脚部分不就是用footer主义化标签包起来嘛,然而不然;如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况:
    这里写图片描述
    导致这一问题的原因是页面内容太少,无法将内容区域撑开,从而在 footer 下面留下一大块空白;但是我们又希望footer能在窗口最底端。今天给大家介绍两种方法来完美解决这个问题:

    方法一:footer高度固定+绝对定位
    思路:footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:0),父层内要预留(padding-bottom)footer的高度。
    HTML代码:

    <div id="container">
        <header>HEADER</header>
        <section class="main">MAIN</section >
        <footer>FOOTER</footer>
    </div>

    CSS代码:

    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    #container{
        /*保证footer是相对于container位置绝对定位*/
        position:relative;  
        width:100%;
        min-height:100%; 
        /*设置padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;*/  
        padding-bottom: 100px;  
        box-sizing: border-box;
    }
    header{
        width: 100%;
        height: 200px;
        background: #999;
    }
    .main{
        width: 100%;
        height: 200px;
        background: orange;
    }
    footer{
        width: 100%;
        height:100px;   /* footer的高度一定要是固定值*/ 
        position:absolute;
        bottom:0px;
        left:0px;
        background: #333;
    }

    如果在main区域设置了浮动啥的你会发现footer固定在页面可视区的底部,且覆盖在内容上,这时候只要在footer的父元素样式上增加(overflow : hidden;)即可;

    方法二:采用 flexbox布局模型
    思路:我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, (默认是行,也就是横向布局);同时,将html 和 body 元素的高度设置为100%,使其充满整个屏幕。
    HTML代码:

    <div id="container">
        <header>HEADER</header>
        <section class="main">MAIN</section>
        <footer>FOOTER</footer>
    </div>

    CSS代码:
    我们需要调整各个区域占用的页面空间,我们将通过flex 属性来达到这一目的,该属性实际包含了三个属性,分别是:
    (1)flex-grow:元素在同一容器中对可分配空间的分配比率,及扩展比率;
    (2)flex-shrink:如果空间不足,元素的收缩比率;
    (3)flex-basis:元素的伸缩基准值;

    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        height: 100%;
    }
    #container{
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    header{
        background: #999;
        flex: 0 0 auto;
    }
    .main{
        background: orange;
        flex: 1 0 auto;
    }
    footer{
        background: #333;
        flex: 0 0 auto;
    }
    展开全文
  • 我们在做项目的时候经常会遇到一样的头部和底部,如果每个页面都复制一遍,不仅工作量大而且万一需要修改一下文章就更麻烦了,这时候就需要...因为一个html页面只允许存在一个body,去掉所有的<html>标签。 切记!!!
  • html如何引入公共布局header、footer

    千次阅读 2020-06-12 12:00:41
    如何实现多个.html静态页,引用同一个header.htmlfooter.html 文件 公共头文件 当前方法:通过load()函数,引入公共头部和尾部文件; .
  • 现在想把header和footer单独分开。可以加载到 每个页面中,便于维护。 尝试的方法有: 1,iframe效果不好,会多出奇怪的框框 2 , jquery.load(header.html)只有火狐浏览器可以显示出来 有别的什么好用的方法吗?...
  • HTML5 固定底部的footer功能栏

    万次阅读 2015-10-30 09:26:41
    最近学习了一下html5,感觉学到不少知识,特来跟大家分享下,自定义footer实现固定底部的功能栏,效果如图: html代码: <a href="#"><span><img src="images/ni4.jpg" height="20"></sp
  • 目录 1、问题描述 2、解决方案 3、示例代码 ...那么如何实现多个.html静态页,引用同一个header.htmlfooter.html文件呢? 前端静态html页面,封装公共的头文件(header:顶部页眉,顶部导航栏等部...
  • HTML+CSS底部footer两种固定方式

    千次阅读 2020-06-20 11:06:58
    网页常见的底部栏(footer)目前有两种: 一、永久固定,不管页面的内容有多高,footer一直位于浏览器最底部,适合做移动端底部菜单,这个比较好实现; 二、相对固定,当页面内容高度不沾满浏览器高度,footer显示...
  • 使用JQuery的load方法吧!  ...$(document).ready(function(){  ...$(".top").load("top.html");...$(".footer").load("footer.html");  });  把他写入到js文件里,在需要的页面导入就可以
  • HTMLfooter置于页面最底部的方法

    千次阅读 2015-02-14 09:24:22
    需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望footer能在窗口最低端。   思路:footer的父层的最小高度是100%,footer设置成相对于父层位置绝对(absolute)置底(bottom:...Html代码      CSS如
  • html布局让footer始终处在底部

    千次阅读 2015-05-06 13:04:08
    style文件 // // Footer沉底 ...html,body{ height:100%; } .container{ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; } footer{ height:4em; } .pb-80{
  • HTML抽组件:对header和footer抽取

    千次阅读 2019-03-08 10:55:43
    把header和footer的内容用站长之家工具,从html转为JS形式,保存为footer.js。例如: &lt;footer class="footer-dark"&gt; &lt;/footer&gt; document.writeln("&lt;footer...
  • html中引用公共header footer

    千次阅读 2019-06-28 11:04:15
    --新建一个放公共header.htmlfooter.html两个文件--> <!--新建的文件里面"只写入"公共的代码部分 不要其他的代码片段或标签 比如:body html标签等--> <!-- header.html--> <div class="header...
  • 公所周知,大部分的pc项目中有很多个页面,而每个页面几乎都有重复的部分,今天分享得是如何将这些公共布局样式封装起来,在其他的页面中直接调用。...如何实现多个.html静态页,引用同一个header.html和f...
  • html5中的header,nav,footer

    千次阅读 2018-05-27 12:14:16
    html5中的header,nav,footerheader标签在新的标准中header标签定义如下:"A group of introductory or navigational aids.”基本意思是“一组介绍性的护着导航相关的辅助内容”。字面上理解header标签不单单...
  • 大家可能都知道HTML5中出现了很多以前没有的标签,例如,header,nav,和footer,在这之前我们如果开发相关的页面布局的时候,往往都是使用CSS来定义相关的头部,导航及其页底部分,如下: #nav{ padding: 10px .....
  • 文章目录HTML基础——header, nav,footer, article,section, asideHTML5界面结构<header><footer><nav><article><section> HTML基础——header, nav,footer, article,section, aside ...
  • footer.html中中文乱码的解决

    千次阅读 2011-12-14 13:08:04
    在有的时候我们为了网站的风格统一,于是就把网站的header和footer给独立出来了,其他的页面的头和脚都来引用它就行了,但是实际上这样做的时候,因为footer我们经常喜欢使用的是html的格式,这样的话,我们就会经常...
  • 以前一直用iframe,但是很不灵活,占的地方是死的,比如header,如果想要有...header.html <div class="header"> <div class="container"> <a class="navbar-branda" href="index.html"> ...
  • article标签 ...​ 一般来说,article会有标题部分,通常包含在header内,有时也会包含footer。 下面例子中就用了article+header <!-- edu_13_2_3.html --> <!doctype html> <html lang..
  • Sticky Footer , fixed footer, pinned footer

    千次阅读 2013-05-21 13:27:00
    1. through css #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; background:#999; } 2. jQuery Easy Pinned Footer http://jack-fx.com/net/2013...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 129,996
精华内容 51,998
关键字:

如何删除html的footer