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. UOJ79 一般图最大匹配

    题目描述 从前一个和谐的班级,所有人都是搞OI的.有 nn 个是男生,有 00 个是女生.男生编号分别为 1,-,n1,-,n. 现在老师想把他们分成若干个两人小组写动态仙人掌,一个人负责搬砖另一个人 ...

  2. 如何把家里的pc改装成linux服务器

    家里有一台pc笔记本闲置在家,最近想搭建一个ubuntu系统玩一下kvm. 这个方法能避免家里宽带每隔一段时间ip自动变换. 我用到了: 1.亚马逊的aws(ec2) 2.家里的路由器 3.aws里装 ...

  3. UVA1625Color Lenth(DP+LCS变形 未AC）

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=105116#problem/C 紫书P276 res[i][j]表示第一个序列移动i个,第 ...

  4. Python操作MySQL

    本篇对于Python操作MySQL主要使用两种方式: 原生模块 pymsql ORM框架 SQLAchemy pymsql pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb ...

  5. JQuery------分页插件下载地址

    转载GitHub: https://github.com/pgkk/kkpager

  6. Html中<font>标签的使用

    Html中<font>标签的使用 <!doctype html> <html lang="en"> <head> <meta ...

  7. ADO.NET--收藏整理别人的教程

    本文所有内容均从前辈的博客中收集整理而来,仅供自己学习参考的时候快速访问用. ADO.NET入门教程(一) 初识ADO.NET ADO.NET入门教程(二)了解.NET数据提供程序 ADO.NET入门 ...

  8. 聊一聊PV和并发

    最近和几个朋友,聊到并发和服务器的压力问题.很多朋友,不知道该怎么去计算并发?部署多少台服务器才合适? 所以,今天就来聊一聊PV和并发,还有计算web服务器的数量 的等方法.这些都是自己的想法加上一些 ...

  9. [转]MySQL日志——Undo | Redo

    本文是介绍MySQL数据库InnoDB存储引擎重做日志漫游 00 – Undo LogUndo Log 是为了实现事务的原子性,在MySQL数据库InnoDB存储引擎中,还用Undo Log来实现多版 ...

  10. MySQL主从复制原理及配置详细过程以及主从复制集群自动化部署的实现

    一.复制概述 Mysql内建的复制功能是构建大型,高性能应用程序的基础.将Mysql的数据分布到多个系统上去,这种分布的机制,是通过将Mysql的某一台主机的数据复制到其它主机(slaves)上,并重 ...