使用iframe引入公共模块
新建一个公共文件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 |
|
不赞成使用。请使用样式代替。 规定如何根据周围的元素来对齐此框架。 |
frameborder |
|
规定是否显示框架周围的边框。 |
height |
|
规定 iframe 的高度。 |
longdesc | URL | 规定一个页面,该页面包含了有关 iframe 的较长描述。 |
marginheight | pixels | 定义 iframe 的顶部和底部的边距。 |
marginwidth | pixels | 定义 iframe 的左侧和右侧的边距。 |
name | frame_name | 规定 iframe 的名称。 |
sandbox |
|
启用一系列对 <iframe> 中内容的额外限制。 |
scrolling |
|
规定是否在 iframe 中显示滚动条。 |
seamless | seamless | 规定 <iframe> 看上去像是包含文档的一部分。 |
src | URL | 规定在 iframe 中显示的文档的 URL。 |
srcdoc | HTML_code | 规定在 <iframe> 中显示的页面的 HTML 内容。 |
width |
|
定义 iframe 的宽度。 |
使用iframe引入公共模块的更多相关文章
- html引入公共模块
如果没有母版页,那么大量相同布局的页面会有很多相同的代码,那么这就提到了一个概念,叫重用性:可以将相同布局的代码放在一个单独的文件,里面写一些公共模块,那么在其他页面只需要在指定位置引入他们就可以了写 ...
- ThinkPHP5——引入公共部分head和foot(多种方法)
在项目中,header和footer重复使用的次数高,于是我们把header和footer作为公共部分,其他模板需要的话就引用.下面我教大家引用公共模板 1.使用include 首先在view下面新建 ...
- Python_selenium PO模式下 Tesecase 的相同执行代码做成selenium_base_case公共模块及调用
作用: PO模式下 Tesecase 的相同执行代码做成selenium_base_case公共模块及调用,提高代码简洁度,实现同样效果. 框架结构: 代码简单实践: common模块下 seleni ...
- 【前端开发】前端引入公共部分footer header的几种方法,及iframe自适应高度js
一.引入页面几种方法 1.IFrame引入,看看下面的代码 <iframe frameborder=0 border=0 width=300 height=300 ...
- 基于 Webpack 引入公共库的几种方式
以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...
- maven多module项目中千万不要引入其它模块的单元測试代码
本文出处:http://blog.csdn.net/chaijunkun/article/details/35796335,转载请注明. 因为本人不定期会整理相关博文,会对对应内容作出完好. 因此强烈 ...
- Ionic4.x 中自定义公共模块
1.创建公共模块以及组件 ionic g module module/slide ionic g component module/slide 2.公共模块 slide.module.ts 中暴露对应 ...
- Atitit 图像处理 公共模块 矩阵扫描器
Atitit 图像处理 公共模块 矩阵扫描器 1.1. 调用说明对矩阵像素遍历处理调用1 2. 矩阵扫描器主题结构1 2.1. 主要说明 从像素点开始填充矩阵1 2.2. 得到模板中心点所对应的图像坐 ...
- 谈谈CommonsChunkPlugin抽取公共模块
引言 webpack插件CommonsChunkPlugin的主要作用是抽取webpack项目入口chunk的公共部分,具体的用法就不做过多介绍,不太了解可以参考webpack官网介绍: 该插件是we ...
随机推荐
- Codeforces Round #422 (Div. 2) C. Hacker, pack your bags!(更新数组)
传送门 题意 给出n个区间[l,r]及花费\(cost_i\),找两个区间满足 1.区间和为指定值x 2.花费最小 分析 先用vector记录(l,r,cost)和(r,l,cost),按l排序,再设 ...
- 跟我一起玩Win32开发(25):监视剪贴板
自从郭大侠和蓉儿离开桃花岛后,最近岛比较寂静,有一种“门前冷落鞍马稀”的感觉.于是,老邪就拿出<九阴真经>认真阅读,同时用迅雷下载经典大剧<汉武大帝>晚上睡觉前看上几集,老邪一 ...
- 并查集 HDOJ 1232 畅通工程
题目传送门 /* 并查集(Union-Find)裸题 并查集三个函数:初始化Init,寻找根节点Find,连通Union 考察:连通边数问题 */ #include <cstdio> #i ...
- 对protected修饰符的范围用代码说明(同时说明用protected修饰的属性,在继承时,一定程度上破坏了封装)
目录结构: 本类: 本包: 子孙类: 其他包:
- mysql中迅速插入百万条测试数据的方法
对比一下,首先是用 mysql 的存储过程弄的: 复制代码代码如下: mysql>delimiter $ mysql>SET AUTOCOMMIT = 0$$ mysql> crea ...
- Node.Js的Module System 以及一些常用 Module
Node.Js学习就按照这本书的流程来. 在第7章结束与第10章结束时分别自己出一个小项目练练手.Node.Js的入门学习计划是这样. 目录:, QQ:1045642972 欢迎来索书以及讨论Node ...
- AJPFX实例集合嵌套之ArrayList嵌套ArrayList
案例:import java.util.ArrayList;import java.util.Iterator;import com.heima.bean.Person;public class De ...
- Android Platform Version 和 API Level对照
Platform Version API Level VERSION_CODE Notes Android 5.1 22 LOLLIPOP_MR1 Platform Highlights Androi ...
- js实现跨域的方法
由于同源策略的限制,XMLHttpRequest只允许请求当前源(包含域名.协议.端口)的资源. json与jsonp的区别: JSON是一种数据交换格式,而JSONP是一种依靠开发人员创造出的 ...
- NSString 与NSMutableString的区别
NSString 与NSMutableString的区别 Suppose You have a code like this NSString *s = [[NSString alloc] ...