1. iframe 包含法。
页头和页尾分别做成一个页面，然后通过iframe嵌入到调用的页面。这种方法在页头页尾高度固定的时候比较适用，因为当页头页尾高度不固定时，需要iframe根据页面内容自适应高度，比较麻烦。
简单代码结构示例：
<html> 
<head> 
<title>页面</title> 
<style type="text/css"> 
.page{width:950px;margin:0 auto;}  
</style> 
</head> 
<body> 
<div class="page"> 
    <iframe frameboder="0" scrolling="no" width="100%" height="80" src="head.html"></iframe> 
    <div>页面内容</div> 
    <iframe frameboder="0" scrolling="no" width="100%" height="80" src="foot.html"></iframe> 
</div> 
</body> 
</html> 
2. js包含法
页头和页尾改成外接js的形式，通过documen.write输出或其它js的输出的方法。这种方法在页头页尾需要修改时，不利于修改，也不好还原原先的html结构。
<html> 
<head> 
<title>页面</title> 
<style type="text/css"> 
.page{width:950px;margin:0 auto;}  
</style> 
</head> 
<body> 
<div class="page"> 
    <script type="text/javascript" href="head.js"></script> 
    <div>页面内容</div> 
    <script type="text/javascript" href="foot.js"></script> 
</div> 
</body> 
</html> 
3. shtml方法
运用服务端的包含方法，只需在页面中使用服务端包含命令<!--#  include file="文件名称" -->，在被调用的页面嵌入页头和页脚即可。但此方法需要服务端支持ssi（server side include 服务端包含）功能。
<html> 
<head> 
<title>页面</title> 
<style type="text/css"> 
.page{width:950px;margin:0 auto;}  
</style> 
</head> 
<body> 
<div class="page"> 
    <!--#include file="head.html" --> 
    <div>页面内容</div> 
    <!--#include file="foot.html" --> 
</div> 
</body> 
</html>

多个html怎么导入相同的头部导航的更多相关文章

  1. 用sticky.js实现头部导航栏固定

    在页面中,如果页面长度过大,滑动页面时,头部导航栏则会跟着划走. 我的头部导航栏代码为: <div class="headbar"> <center class= ...

  2. 微信小程序（18）-- 自定义头部导航栏

    最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSyst ...

  3. 微信小程序（8）--头部导航滑动

    项目需求:实现头部导航,可左右滑动. <view class="top-news"> <view class="self-box"> & ...

  4. 使用bootstrap建立响应式网页——头部导航栏

    1.要建立响应式网站的布局,这个时候bootstrap的高级就能体现出来了. 2.先来了解一下bootstrap提供了哪些响应式工具供我们使用: (1)屏幕宽度尺寸的概念: <768px     ...

  5. 微信小程序自定义头部导航栏

    <!--index.wxml--> <view> <navbar id='index_header' background='{{background}}' pageNa ...

  6. 夺命雷公狗ThinkPHP项目之----企业网站30之网站前台头部导航的高亮显示

    我们这个其实也是最简单的一个,首页高亮,那么我们需要先在中间层里面定义一个index = false: 然后在首页控制器里面定义一个 index = true 最后一步就是 在首页的模版上给一个判断: ...

  7. MVC的局部视图传参的小技巧--见人才网头部导航

    当我们设计一个局部视图时,当出现有类似导航的功能(如:选择左边的某个按钮跳到某个页,且顶部导航也作相印改变),如果我们选择把导航作为局部视图来处理,调用就可以做如下处理: @Html.RenderAc ...

  8. 头部导航悬浮，css

    .header{ position:fixed; z-index:100; left:; right:; } 如图.

  9. 微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle

    ​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题 ...

随机推荐

  1. css使absolute相对于父容器进行定位而不是以body（为什么绝对定位（absolute）的父级元素必须是相对定位（relative））

    借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...

  2. GStreamer 记录

    GStreamer 是一个新的多媒体框架,大大简化了多媒体工具的开发流程,比如,这里有一个 IBM 的文档,介绍了一个 MP3 播放器. http://www.ibm.com/developerwor ...

  3. JavaScript系列文章：从let和const谈起

    注册博客园账号也有好些年了,有事没事经常来逛逛,感觉博客园的同学们一直都很活跃,相比国内其他社区来讲,这里的技术氛围很浓,非常适合学习和交流,所以博主我也决定在这里驻扎了,在这里,博主希望能坚持写一些 ...

  4. Theano Graph Structure

    Graph Structure Graph Definition theano's symbolic mathematical computation, which is composed of: A ...

  5. File 类

    File 类:文件和目录(文件夹)路径名的抽象表现形式. 方法 1.创建功能 public boolean createNewFile():创建文件 public boolean mkdir():创建 ...

  6. HTML5 Drop API

    转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...

  7. APEX初步

    APEX是SFDC中用于开发的语言.语法上类似JAVA等面向对象的语言,运行起来类似数据库中的存储过程.可以在SFDC事件中添加业务逻辑,操作相关数据和用在Visual Force页面中. 保存,编译 ...

  8. Oracle 中 decode 函数用法

    Oracle 中 decode 函数用法 含义解释:decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值) 该函数的含义如下:IF 条件=值1 THEN RETURN(翻译 ...

  9. SQL Server启动的几种方法

    SQL Server 启动有以下几种方法: (1)在Control Panel——Administrative Tools——Services,找到SQL Server (XXX)进行启动. 其中XX ...

  10. ls目录内容

    ls:列出目录内容 1.常用参数: -a, –all 列出目录下的所有文件,包括以 . 开头的隐含文件(常用) -A 同-a,但不列出“.”(表示当前目录)和“..”(表示当前目录的父目录). -c  ...