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. C#委托

    1.什么是委托: 委托是一个类型安全的对象,它指向程序中另一个以后会被调用的方法(或多个方法).它类似C语言里的函数指针,但它是类型安全的. 委托类型包含3个重要的信息: 它所调用的方法的名称 该方法 ...

  2. 1 python大数据挖掘系列之基础知识入门

    preface Python在大数据行业非常火爆近两年,as a pythonic,所以也得涉足下大数据分析,下面就聊聊它们. Python数据分析与挖掘技术概述 所谓数据分析,即对已知的数据进行分析 ...

  3. Neural Network Toolbox使用笔记1：数据拟合

    http://blog.csdn.net/ljp1919/article/details/42556261 Neural Network Toolbox为各种复杂的非线性系统的建模提供多种函数和应用程 ...

  4. MVC CheckBoxList的实现

    using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; us ...

  5. phpmyadmin #1045 - Access denied for user 'root'@'localhost' (using password: NO)

    phpmyadmin访问遇到1045问题 #1045 - Access denied for user 'root'@'localhost' (using password: NO) 解决办法 找到p ...

  6. 用JMeter测试monggodb的请求

    JMeter测试MongoDB性能有两种方式,一种是利用JMeter直接测试MongoDB[即通过MongoDB协议测试],另一种是写Java代码方式测试MongoDB[即通过java请求测试] 注: ...

  7. 一道Apple公司（中国）的面试题目

    Apple在中国(上海)有公司业务,但是感觉主要是做测试工作的部门,主要是保障Apple的产品质量QE.面试的时候,面试官出了一道题目,我貌似曾今开过类似的题目,但是由于当场发挥不佳没有答出来.题目大 ...

  8. MyEclipse安装插件的几种方法

    本文讲解MyEclipse(MyEclipse10)的三种方法,以SVN为例 Eclipse update site URL: http://subclipse.tigris.org/update_1 ...

  9. vtkPlane和vtkPlaneSource

    1.vtkPlane vtkPlane provides methods for various plane computations. These include projecting points ...

  10. linux sed命令详解

    简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后,把缓冲区的 ...