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. iOS静态库开发中对Bitcode的支持

    1.bitcode bitcode是LLVM编译器将C/C++/OC/Swift等前端变成语言编译成多种不同芯片上的机器指令过程中的中间代码.并且这个中间代码是CPU无关的. 原本我们的APP里要包含 ...

  2. zookeeper原理解析-服务器端处理流程

    1)处理器链 这部分内容我们主要讲解zookeeper请求在zookeeper server端的处理流程,对于不同角色的zookeeper具有不同的处理流程, ZookeepeerServer的sta ...

  3. bzoj2330: [SCOI2011]糖果

    2330: [SCOI2011]糖果 Time Limit: 10 Sec Memory Limit: 128 MB Description 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友 ...

  4. 接口测试 postman

    1.可以应用一些简单的测试点 2. api有多个域名,放进collection里面进行批量测试,点击左上角'runner'

  5. 个人作业——week2

    一.发现的功能性bug 1.这个手机客户端的拍照翻译功能虽然能够正确的识别图像,但是不能有效的识别出图像中的文字,给出的提示总是图像识别成功,没有识别到文字,导致这个功能几乎无法使用. 因为刚下载这个 ...

  6. Nodejs事件引擎libuv源码剖析之：请求(request)结构的设计剖析

    声明:本文为原创博文,转载请注明出处.         在libuv中,请求(request)代表一个用户向libuv发出的指令,比如uv_connect_s就表示一个tcp的连接请求.uv_work ...

  7. Java虚拟机及运行时数据区

    1.Java虚拟机的定义 Java虚拟机(Java Virtual Machine),简称JVM.当我们说起Java虚拟机时,可能指的是如下三种不同的东西: 抽象的虚拟机规范 规范的具体实现 一个运行 ...

  8. thinkphp缓存

    最简答的缓存 // 缓存设置 public function ff(){ S('); } // 缓存读取 public function aa(){ $value = S('name'); echo ...

  9. C语言基础(10)-数组

    一.数组的定义 数组就是在内存中连续的相同类型的变量空间. 二.数组在内存中的存储方式 同一个数组所有的成员都是相同的数据类型,同时所有的成员在内存中的地址是连续的,数组名是一个地址的常量,代表数组中 ...

  10. WdatePicker 使用

    限制范围为今年之后的3年 $("input[name='year']").attr("onClick","WdatePicker({dateFmt:' ...