问：

很多时候，我们在设计网站时会发现，站内每一个页面的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. @Html.Action()

    背景 在这里主要想谈下mvc,最初几年都是用的webform,作为一个资深傻瓜程序员多年,后来到处听说mvc,终于在某天下定决心实验下mvc,其实关键还是在于easyui,因为它的请求数据方式和mvc ...

  2. 006_netstat中state详解

    TCP三次握手的过程如下: 主动连接端发送一个SYN包给被动连接端: 被动连接端收到SYN包后,发送一个带ACK和SYN标志的包给主动连接端: 主动连接端发送一个带ACK标志的包给被动连接端,握手动作 ...

  3. saltStack的event接口通过mysql数据库接收SaltStack批量管理日志

    event是一个本地的ZeroMQ PUB Interface,event是一个开放的系统,用于发送信息通知salt或其他的操作系统.每个event都有一个标签.事件标签允许快速制定过滤事件.除了标签 ...

  4. 经典SQL语句大全（转）

    SQL语句参考,包含Access.MySQL 以及 SQL Server 基础 创建数据库 CREATE DATABASE database-name 删除数据库 drop database dbna ...

  5. javascript 浮点数比较

    Js中两个浮点数比较,不能使用=== 必须用相减绝对值小于极小的一个数字来判断 Math.abs(1/3 - (1-2/3))<0.0001 这样的方式来判断.

  6. OneNET麒麟座应用开发之二：串口读取PM25传感器数据

    作为环境数据监测站首先要获取大气中可吸入颗粒物的数据.为了检测PM25数据,我们采用北京海联信为的HLPM025K3型号传感器,该传感器使用激光法测量PM25和PM10的数据. 该型传感器的检测对象如 ...

  7. Mac配置Java开发环境

    笔者从Window上转到Mac上做开发,一切配置都要重新开始,开发环境配置介绍如下: 1. 下载JDK 从下面链接选择合适版本的安装包进行下载...笔者下载的是jdk-9.0.1 链接:http:// ...

  8. ElasticSearch - How to search for a part of a word with ElasticSearch

    Search a part of word with ElasticSearch 来自stackoverflow https://stackoverflow.com/questions/6467067 ...

  9. mySQL 增量备份方案

    1.在 /etc/my.cnf 下面设置开启bin-log 编辑 vim /etc/my.cnf [mysqld] binlog_format       = MIXED                ...

  10. Linux 忘记了mysql 密码

    killall mysqld /usr/local/mysql/bin/mysqld_safe --skip-grant-tables & use mysql update user set ...