使用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 ...
随机推荐
- 关于<?php exit;?>"的绕过问题
在Moctf中看到一道题目: <?php show_source(__FILE__); $c="<?php exit;?>"; @$c.=$_POST['c']; ...
- (12)用css设计电子相册 {下}
本篇学习资料讲解: 延续上一篇的学习资料,仍然介绍 使用css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 上篇学习资料介绍的“阵列模式电子相册”,如果也能 ...
- ubuntu 直接用软件的名字启动非apt安装的软件
方法一: 可以在.bashrc文件中加入 alias命令,把软件的名字就等于软件执行文件的绝对路径 方法二: 在/usr/bin 目录下为执行文件创建软链接(未尝试)不过应该可以 软件自启动的方法 在 ...
- Hexo瞎折腾系列(6) - 将博客同时部署到Github和Coding
前言 由于本人只是将Hexo博客同时部署到 Github 和 Coding.net ,所以这里只介绍怎么同时部署到这两个网站的pages. 之所以选择这两个网站,是因为国外用户可以访问 Github, ...
- Python入门小练习 003 利用cookielib模拟登录获取账户信息
为了方便, 使用chinaunix的账户获取账户主题. 有些网站可能需要验证码, 找一些不用验证码的网站 下面 ****** 很多个星号的均为私密信息, 所以用星号代替 #!/usr/bin/pyt ...
- LookupError: unknown encoding: idna 的处理方法
写了一个脚本,想把它打包成exe文件,在python编译器中运行正常,但是打包成.exe文件运行报错 LookupError: unknown encoding: idna 找遍资料终于找到了解决方法 ...
- 增强的for循环
- debug授权码
www.vfxcx.com 704835b5c54b56426257e0742568fe54
- java 替换字符串模板(模板渲染)
java渲染字符串模板,也就是说在java字符串模板中设置变量字符串,使用变量去渲染指定模板中设置好的变量字符串.下面介绍4种替换模板方式: 1.使用内置String.format String me ...
- T4312 最大出栈顺序
题目描述 给你一个栈和n个数,按照n个数的顺序入栈,你可以选择在任何时候将数 出栈,使得出栈的序列的字典序最大. 输入输出格式 输入格式: 输入共2行. 第一行个整数n,表示入栈序列长度. 第二行包含 ...