新建一个公共文件head.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>头部</title>
    <style>
        body {
            box-sizing: border-box;
            margin: 0;
        }
        .header {
            width: 100%;
            height: 90px;
            float: left;
            background-color: red;
        }
        .list {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .list li {
            width: 20%;
            height: 100%;
            list-style: none;
            float: left;
            line-height: 90px;
            text-align: center;
         }
    </style>
</head>
<body>
    <div class="header">
        <ul class="list">
            <li>导航一</li>
            <li>导航二</li>
            <li>导航三</li>
            <li>导航四</li>
            <li>导航五</li>
        </ul>
    </div>
</body>
</html>

新建一个index.html，使用iframe引入head.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入其他页面</title>
    <style>
        body {
            box-sizing: border-box;
            margin: 0;
        }
        .content {
            width: 100%;
            height: 300px;
            background-color: gray;
            border: 1px;
        }
        iframe {
            float: left;
        }
    </style>
</head>
<body>
    <iframe src="head.html" frameborder="0" width="100%" height="90px" scrolling="no"></iframe>
    <div class="content">
        <span>这是内容</span>
    </div>
</body>
</html>

备注：iframe的属性设置（摘自w3school）
align
  • left
  • right
  • top
  • middle
  • bottom

不赞成使用。请使用样式代替。

规定如何根据周围的元素来对齐此框架。
frameborder
  • 1
  • 0
 规定是否显示框架周围的边框。
height
  • pixels
  • %
 规定 iframe 的高度。
longdesc URL 规定一个页面，该页面包含了有关 iframe 的较长描述。
marginheight pixels 定义 iframe 的顶部和底部的边距。
marginwidth pixels 定义 iframe 的左侧和右侧的边距。
name frame_name 规定 iframe 的名称。
sandbox
  • ""
  • allow-forms
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
 启用一系列对 <iframe> 中内容的额外限制。
scrolling
  • yes
  • no
  • auto
 规定是否在 iframe 中显示滚动条。
seamless seamless 规定 <iframe> 看上去像是包含文档的一部分。
src URL 规定在 iframe 中显示的文档的 URL。
srcdoc HTML_code 规定在 <iframe> 中显示的页面的 HTML 内容。
width
  • pixels
  • %
 定义 iframe 的宽度。

使用iframe引入公共模块的更多相关文章

  1. html引入公共模块

    如果没有母版页,那么大量相同布局的页面会有很多相同的代码,那么这就提到了一个概念,叫重用性:可以将相同布局的代码放在一个单独的文件,里面写一些公共模块,那么在其他页面只需要在指定位置引入他们就可以了写 ...

  2. ThinkPHP5——引入公共部分head和foot(多种方法)

    在项目中,header和footer重复使用的次数高,于是我们把header和footer作为公共部分,其他模板需要的话就引用.下面我教大家引用公共模板 1.使用include 首先在view下面新建 ...

  3. Python_selenium PO模式下 Tesecase 的相同执行代码做成selenium_base_case公共模块及调用

    作用: PO模式下 Tesecase 的相同执行代码做成selenium_base_case公共模块及调用,提高代码简洁度,实现同样效果. 框架结构: 代码简单实践: common模块下 seleni ...

  4. 【前端开发】前端引入公共部分footer header的几种方法，及iframe自适应高度js

    一.引入页面几种方法   1.IFrame引入,看看下面的代码    <iframe   frameborder=0   border=0   width=300   height=300    ...

  5. 基于 Webpack 引入公共库的几种方式

    以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...

  6. maven多module项目中千万不要引入其它模块的单元測试代码

    本文出处:http://blog.csdn.net/chaijunkun/article/details/35796335,转载请注明. 因为本人不定期会整理相关博文,会对对应内容作出完好. 因此强烈 ...

  7. Ionic4.x 中自定义公共模块

    1.创建公共模块以及组件 ionic g module module/slide ionic g component module/slide 2.公共模块 slide.module.ts 中暴露对应 ...

  8. Atitit 图像处理 公共模块 矩阵扫描器

    Atitit 图像处理 公共模块 矩阵扫描器 1.1. 调用说明对矩阵像素遍历处理调用1 2. 矩阵扫描器主题结构1 2.1. 主要说明 从像素点开始填充矩阵1 2.2. 得到模板中心点所对应的图像坐 ...

  9. 谈谈CommonsChunkPlugin抽取公共模块

    引言 webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍: 该插件是we ...

随机推荐

  1. 深度解密Go语言之 map

    目录 什么是 map 为什么要用 map map 的底层如何实现 map 内存模型 创建 map 哈希函数 key 定位过程 map 的两种 get 操作 如何进行扩容 map 的遍历 map 的赋值 ...

  2. hdoj【1006】【未完待续】

    题意: 时钟的三个指针在两两之间至少D°的时候是开心的,求开心时间占一天的一个百分比. 思路: 我们看到这个百分比有三位小数,精度很高. 一天有24h,24*60min,24*60*60s,那么最小单 ...

  3. MyEclipse中安装SVN插件的最有效的方法

    (1)下载svn插件:http://subclipse.tigris.org/files/documents/906/49209/site-1.8.8.zip (2)解压svn包,找到其中的两个文件夹 ...

  4. 洛谷 P2759 奇怪的函数

    https://www.luogu.org/problemnew/show/P2759 #include<cstdio> #include<algorithm> #includ ...

  5. Secrets CodeForces - 333A

    Secrets CodeForces - 333A 题意:这个世界上只有这样面值的硬币:1,3,9,27,81,...有一个商人,某一天遇到了一个顾客,他购买了价值n的商品,发现用自己的硬币无法付给商 ...

  6. 阻止默认行为是配合passive使用

    在使用lighthouse检测pwa应用时,发现提示下面有下面的警告 默认使用passive:true提高滚动性能并减少崩溃,passive即顺从的,是指它顺从浏览器的默认行为.设置该属性的目的主要是 ...

  7. UVa OJ 494

     Kindergarten Counting Game  Everybody sit down in a circle. Ok. Listen to me carefully. ``Woooooo, ...

  8. spoj GCJ1C09C Bribe the Prisoners

    题目链接: http://www.spoj.com/problems/GCJ1C09C/ 题意: In a kingdom there are prison cells (numbered 1 to  ...

  9. vs 2017 下 千万不要装force utf8 这个插件

    千万不要装!!! 装了之后,传文件到linux系统下,各种xml和makefile报错(如下) Makefile:1: *** 遗漏分隔符 . 停止

  10. Ubuntu 创建docker 容器 系列一

    docker 官网安装地址:https://docs.docker.com/install/linux/docker-ce/ubuntu/ 1.Ubuntu的版本要在12.04 LTS 以上,使用un ...