新建一个公共文件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. 机器学习（2）：简单线性回归 | 一元回归 | 损失计算 | MSE

    前文再续书接上一回,机器学习的主要目的,是根据特征进行预测.预测到的信息,叫标签. 从特征映射出标签的诸多算法中,有一个简单的算法,叫简单线性回归.本文介绍简单线性回归的概念. (1)什么是简单线性回 ...

  2. SCUT - 249 - A piece of Cake - 组合数学

    https://scut.online/contest/25/I 由结论:d维物体切n刀分成的部分=sum(C(n,0)~C(n,d)),直接算就行了.

  3. 退出ACM？

    我不知道为什么我有这样的想法,纵观CCCC,太弱太弱,再不把自己埋起来,狠起来,就真的非常菜了,去刷难题吧!我不管老郭的数据,只管自己的实力,每天三道难题CF的C题+总结.以及刷水题!!!(刷CF的B ...

  4. 在IDEA中使用JSP中的out内置对象,out.println()——println红色解决方法

    今天在学习JSP的时候,在jsp中使用out内置对象,开发工具用的是IDEA,结果如下图所示 郁闷了半天找度娘,可能关键字输的不准确,乱七八糟的方法一大堆,什么加依赖啊啥的,反正都不管用,最后找到一篇 ...

  5. _bzoj1096 [ZJOI2007]仓库建设【斜率优化dp】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1096 又是一道经典斜率优化. #include <cstdio> const i ...

  6. 线段树/树状数组 POJ 2182 Lost Cows

    题目传送门 题意:n头牛,1~n的id给它们乱序编号,已知每头牛前面有多少头牛的编号是比它小的,求原来乱序的编号 分析:从后往前考虑,最后一头牛a[i] = 0,那么它的编号为第a[i] + 1编号: ...

  7. magento 开启 3D secure credit card validation

    因为国外盗刷严重,于是得开启验证. 首先可以去 https://developer.cardinalcommerce.com/try-it-now.shtml.这上面有测试账号,截图如下:

  8. hibernate Day1 案例代码

    1.创建Person类 package com.icss.pojo; public class Person { private int uid; private String uname; priv ...

  9. java 环境变量的设置，备忘

    新建系统变量JAVA_HOME 和CLASSPATH 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.7.0变量名:CLASSPATH 变量值:.;%JAVA ...

  10. [转]Android TCP长连接 心跳机制及实现

    背景知识 智能手机上的长连接心跳和在Internet上的长连接心跳有什么不同 Android系统的推送和iOS的推送有什么区别 几种推送的实现方式 协议 1XMPP简介 2 MQTT简介 3移动端消息 ...