问：

很多时候，我们在设计网站时会发现，站内每一个页面的header跟footer其实都是一样的，如果每个页面都写header跟footer就会显示代码冗余而且维护也不方便，

这时候最好的做法就是把相同的头部跟底部做成共享模块，每个页面直接引入该模块，既简介又方便维护

方法1：

JQuery   首先引入jquery包，然后创建两个div，用来放置header跟footer；然后利用jquery的load（）事件把公用部分加载进来

 

方法2：

将footer写一个新的html文件。
如：

<div class="footer">

<iframe src="footer.html" frameborder="0"  scrolling="no"></iframe>

</div>

方法3：

直接写一个js文件    取名footer.js    动态加载~~把footer写进js里，用document.writeln 即可解决你的问题

方法4：

如果你是用php  写的话就更简单了    直接   include引入footer页面就可以了

怎么把html页面中共用的底部代码做成共享模块的更多相关文章

  1. 分页技巧_改进JSP页面中的公共分页代码_实现分页时可以有自定义的过滤与排序条件

    分页技巧__改进JSP页面中的公共分页代码 自定义过滤条件问题 只有一个url地址不一样写了很多行代码 public>>pageView.jspf添加 分页技巧__实现分页时可以有自定义的 ...

  2. 如何在PHP页面中原样输出HTML代码（是该找本php的数来看了）

    如何在PHP页面中原样输出HTML代码(是该找本php的数来看了) 一.总结 一句话总结:字符串与HTML之间的相互转换主要应用htmlentities()函数来完成. 1.php中的html标签如何 ...

  3. 2017.11.4 JavaWeb-----基于JavaBean+JSP求任意两数代数和(改进的在JSP页面中无JSP脚本代码的)+网页计数器JavaBean的设计与使用

    修改后的JSP中不含有JSP脚本代码这使得JSP程序的清晰性.简单 1.设计JavaBean 的Add.java 类 package beans; public class Add { private ...

  4. PHP如何在页面中原样输出HTML代码

    字符串与HTML之间的相互转换主要应用htmlentities()函数来完成. header("Content-Type: text/html; charset=utf-8"); ...

  5. SharePoint 页面中添加.Net代码

    今天整理资料,看到一个非常有意思的截图,可以在SharePoint页面库里的页面中,添加.Net代码,只需修改一下相应应用程序的web.config文件,即可: 在web.config里面的<P ...

  6. HTML页面中JavaScript能获取到的各种屏幕大小信息

    在HTML页面中,通过JavaScript代码访问 window 对象,能够获取到很多表征屏幕大小的信息,下面列举并加以区分. window 对象中的屏幕信息 window.innerheight. ...

  7. HTML页面中显示HTML标签<xmp>

    最近做东西遇到一个HTML页面中显示HTML标签的需求,比如要显示</span> 解决方法如下 HTML页面中显示HTML标签代码,可以使用<xmp>html标签内容</ ...

  8. JavaScript在页面中的引用方法

    现在前端开发越来越流行,框架也越来越多,像ExtJs.JQuery.Bootstrap等.虽然入行这么多年,但是感觉自己在前端方面还是存在基础不牢的地方,特别是CSS和JS.因此最近打算重新阅读这方面 ...

  9. 如何在HTML不同的页面中，共用头部与尾部？

    一.asp语言和PHP语言 首先制作一个头部文件head.asp,或者一个底部文件foot.asp.如主页是index.asp,调用头部代码是在index.asp文件代码的开始位置(第一个标记后面,& ...

随机推荐

  1. sqlserver2008r2数据库关联孤立账号的方法

    重新安装mssql数据库后可能有这样的问题,     在数据还原到其他服务器时,登录名会丢失,重建非常麻烦     特別是数据库用户较多的的情况,其实这个问题解决非常简单,     sql serve ...

  2. js 将图片连接转换称base64格式

    我们把图像文件的内容直接写在了HTML 文件中,这样做的好处是,节省了一个HTTP 请求.坏处呢,就是浏览器不会缓存这种图像.现在我们提供一个js: function convertImgToBase ...

  3. 无法下载apk等格式的文件的解决方案---ASP .NET Core 2.0 MVC 发布到IIS上以后无法下载apk等格式的文件的解决方案

    ASP .NET Core MVC 发布到  IIS 上以后 无法下载apk等格式的文件 使用.NET Core MVC创建了一个站点,其他文件可以下载,但是后来又需求,就把手机端的apk合适的文件上 ...

  4. LeetCode（45）： 跳跃游戏 II

    Hard! 题目描述: 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 你的目标是使用最少的跳跃次数到达数组的最后一个位置. 示例: 输入: [ ...

  5. python接口自动化测试六：时间戳，防重复处理

    对于不可重复参数,可以用时间戳,防重复 import time title = '这是我的标题:%s'%str(int(time.time())) print(title) 转化成时间格式 t = t ...

  6. Jmeter录制浏览器并回放

    确认证书 1.查看证书 进入Jmeter安装目录下的bin,找到ApacheJMeterTemporaryRootCA.crt 证书文件(如jmeter在安装目录中未找到,可尝试先执行下面的开始录制步 ...

  7. MySQL重复数据处理

    最近工作很忙,很久没写博客,嘻嘻!今天写一遍关于MySQL重复数据处理的博客!前不久有个开发问我,能不能把重复的数据去除,留下唯一的数据.然后我问他为什么有这么重复的数据呢,他说写了程序去爬数据,爬到 ...

  8. 《剑指offer》-二叉搜索树与双向链表

    输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 题目的描述不是很习惯.题目的意思是把二叉树从左到右遍历,相当于双向链表的遍历. 其实 ...

  9. Asp.Net Core WebAPI入门整理（三）跨域处理

    一.Core  WebAPI中的跨域处理  1.在使用WebAPI项目的时候基本上都会用到跨域处理 2.Core WebAPI的项目中自带了跨域Cors的处理,不需要单独添加程序包 3.使用方法简单 ...

  10. [转] webpack3.0踩坑：postcss-loader的使用

    解决方案: 只是换了一种引入方式,解决了 1,创建postcss.config.js文件,添加如下代码:(引入autoprefixer插件)   1 2 3 4 module.exports = {  ...