问:

很多时候,我们在设计网站时会发现,站内每一个页面的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. svn使用openldap验证apache访问方式

    启用svn服务器的sasl验证机制 1.安装cyrus-sasl认证包 # yum install -y *sasl* # rpm -qa|grep sasl cyrus-sasl-2.1.23-15 ...

  2. PYTHON-函数的定义与调用,返回值,和参数-练习

    # day10函数的定义调用和参数作业# 1.写函数,用户传入修改的文件名.与要修改的内容,执行函数,完成批量修改操作# def modify_file(filename,old,new):# imp ...

  3. javascript 类型比较方法

    不要使用new Number().new Boolean().new String()创建包装对象: 用parseInt()或parseFloat()来转换任意类型到number: 用String() ...

  4. 京东在html5页面中打开本地app的解决方案

    转:https://blog.csdn.net/CameloHuang/article/details/64476385 从html5打开本地的app–如果本地没有app就跳转到下载页面,大家都会认为 ...

  5. STM32应用实例六:与MS5837压力传感器的I2C通讯

    MS5837压力传感器是一种可用于电路板上,适用于检测10-1200mbar压力范围的传感器,灵敏度非常高,理论上能够检测到0.01mbar的压力变化,实际使用过程中测试并无明显的变化. MS5837 ...

  6. 采用busybox 代替android 自带的shell

    折腾了几天,被Android那点儿少得可怜的shell命令折磨的死去活来,终于下定了革命的决心.看一下怎么把渺小的toolbox替换成伟大的busybox吧.先大致描述一下Android系统中的she ...

  7. eclipse 更换主题

    更换系统自带主题 依次点击 window->preferences->General->Appearance->Theme 选择主题 下载eclipse marketplace ...

  8. python接口自动化测试八:更新Cookies、session保持会话

    s = requests.session() # 此方法只适用于网站是cookies这种,网站是token的没用 # 这样做的好处就是可以保存cookies并保持会话,不用每次都去获取.传参 Toke ...

  9. 单一职责原则(Simple responsibility pinciple, SRP)

    一个类只负责一个功能领域中的相应职责 未完待续

  10. VS2010发布、打包安装程序(超全超详细)

    1. 在vs2010 选择“新建项目”→“ 其他项目类型”→“ Visual Studio Installer→“安装项目”: 命名为:Setup1 . 这是在VS2010中将有三个文件夹, 1.“应 ...