怎么把html页面中共用的底部代码做成共享模块
问:
很多时候,我们在设计网站时会发现,站内每一个页面的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页面中共用的底部代码做成共享模块的更多相关文章
- 分页技巧_改进JSP页面中的公共分页代码_实现分页时可以有自定义的过滤与排序条件
分页技巧__改进JSP页面中的公共分页代码 自定义过滤条件问题 只有一个url地址不一样写了很多行代码 public>>pageView.jspf添加 分页技巧__实现分页时可以有自定义的 ...
- 如何在PHP页面中原样输出HTML代码(是该找本php的数来看了)
如何在PHP页面中原样输出HTML代码(是该找本php的数来看了) 一.总结 一句话总结:字符串与HTML之间的相互转换主要应用htmlentities()函数来完成. 1.php中的html标签如何 ...
- 2017.11.4 JavaWeb-----基于JavaBean+JSP求任意两数代数和(改进的在JSP页面中无JSP脚本代码的)+网页计数器JavaBean的设计与使用
修改后的JSP中不含有JSP脚本代码这使得JSP程序的清晰性.简单 1.设计JavaBean 的Add.java 类 package beans; public class Add { private ...
- PHP如何在页面中原样输出HTML代码
字符串与HTML之间的相互转换主要应用htmlentities()函数来完成. header("Content-Type: text/html; charset=utf-8"); ...
- SharePoint 页面中添加.Net代码
今天整理资料,看到一个非常有意思的截图,可以在SharePoint页面库里的页面中,添加.Net代码,只需修改一下相应应用程序的web.config文件,即可: 在web.config里面的<P ...
- HTML页面中JavaScript能获取到的各种屏幕大小信息
在HTML页面中,通过JavaScript代码访问 window 对象,能够获取到很多表征屏幕大小的信息,下面列举并加以区分. window 对象中的屏幕信息 window.innerheight. ...
- HTML页面中显示HTML标签<xmp>
最近做东西遇到一个HTML页面中显示HTML标签的需求,比如要显示</span> 解决方法如下 HTML页面中显示HTML标签代码,可以使用<xmp>html标签内容</ ...
- JavaScript在页面中的引用方法
现在前端开发越来越流行,框架也越来越多,像ExtJs.JQuery.Bootstrap等.虽然入行这么多年,但是感觉自己在前端方面还是存在基础不牢的地方,特别是CSS和JS.因此最近打算重新阅读这方面 ...
- 如何在HTML不同的页面中,共用头部与尾部?
一.asp语言和PHP语言 首先制作一个头部文件head.asp,或者一个底部文件foot.asp.如主页是index.asp,调用头部代码是在index.asp文件代码的开始位置(第一个标记后面,& ...
随机推荐
- [学习笔记]JS计数器,闭包和localStorage
1.前言 Javascript也算用了挺久了,为了得到一个变量,类似Java的静态变量的功能,我想到了很早以前学习JS的闭包,还有做俄罗斯方块的排行榜用到LocalStorage技术,所以想总结一下, ...
- 【前端】js截取or分割字符串的常见方法
1.截取字符串 分割字符串方法 1.charAt(): 没有一种有别于字符串类型的字符数据类型,所以返回的字符是长度为 1 的字符串 例如:var str="Hello world!&quo ...
- JFreeChart入门
JFreeChart主要用来各种各样的图表,这些图表包括:饼图.柱状图(普通柱状图以及堆栈柱状图).线图.区域图.分布图.混合图.甘特图以及一些仪表盘等等 (源代码下载) 示例程序运用的jar包: j ...
- vue2之对象属性的监听
对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...
- TensorFlow 框架
TensorFlow TensorFlow核心程序由2个独立部分组成: a:Building the computational graph构建计算图 b:Running the comput ...
- python+selenium三:鼠标事件与键盘事件
1.鼠标事件:# 每个模拟事件后需加.perform() 才会执行# context_click() 右击# double_click() 双击# drag_and_drop(source, targ ...
- ie7 下 float换行问题与vertical-align:middle; 失效问题
声明:web小白的笔记,欢迎大神指点!联系QQ:1522025433. ie7 下 float换行问题 请直接看代码中和代码中的注释: <!doctype html> <html&g ...
- poj 2031 给出每个结点的3维坐标 以及结点的半径 (MST)
3维空间中有N个圆球,给出x y z 以及圆球的半径 ,求最小生成树 边的权值为两个圆球间的距离 如果圆球相互接触 则权值为0 求最小的权值和 Sample Input 3 //n10.000 10. ...
- 【BZOJ4927】第一题 双指针+DP
题解: 虽然是过了,不过做的十分智障 首先是有 2根 2 1 1 , 3根 1 1 1 这两种方法 然后考虑2 2 1 1 two-point-two没啥好说的 3 1 1 1 我很智障的以为数据范围 ...
- Docker+Jenkins持续集成环境(1)使用Docker搭建Jenkins+Docker持续集成环境
本文介绍如何通过Jenkins的docker镜像从零开始构建一个基于docker镜像的持续集成环境,包含自动化构建.发布到仓库\并部署上线. 0. 前置条件 服务器安装docker,并启动docker ...