iframe简单用法

iframe一般用于一个网页嵌套另外一个网页

比如我这里有两个html文件

在1.html文件写上

<body><iframe style="width: 100%; height: 100%" src="./2.html" frameborder="1"></iframe>
</body>

body {margin: 0;padding: 60px;height: 100vh;width: 100vw;box-sizing: border-box;
}

意思是把同级的2.html给嵌入进来 frameborder顾名思义就是是否要边框 0为不要1为要这里我添加了边框效果如下

这时我们在2.html写点动画效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {margin: 0;padding: 0;box-sizing: border-box;}@keyframes move{10% {transform: translate(400px, 200px) scale(1.4) rotate(720deg);background-color: aqua;}50% {transform: translate(200px, 400px) scale(2) rotate(1080deg);background-color: antiquewhite;}70% {transform: translate(100px, 100px) scale(1) rotate(1080deg);background-color: rgb(247, 201, 142);}}.movebox{width: 100px;height: 100px;border-radius: 4px;border: 1px solid #000;background-color: bisque;animation: move 4s infinite ;}</style>
</head>
<body><div class="movebox"></div>
</body>
</html>

效果如下

后面如果大家碰到要将一个项目引入到另一个项目里嵌套，可能会遇到权限问题，这个后期有时间在讲

iframe简单用法相关推荐

Iframe简单的嵌套用法
Iframe简单的嵌套用法最近学到了个页面嵌套的用法和大家分享一下:用可以嵌套个页面进入页面里面,主要存在于左右边有导航栏,不需要把重复的样式复制多遍,用配合使用达到减少代码的作用. 标签: 配合标 ...
反编译工具jad简单用法
反编译工具jad简单用法下载地址: [url]http://58.251.57.206/down1?cid=B99584EFA6154A13E5C0B273C3876BD4CC8CE672& ...
QCustomPlot的简单用法总结
QCustomPlot的简单用法总结第一部分:QCustomPlot的下载与安装第二部分:QCustomPlot在VS2013+QT下的使用 QCustomPlot的简单用法总结写在前面, ...
python matplotlib 简单用法
python matplotlib 简单用法具体内容请参考官网代码 import matplotlib.pyplot as plt import numpy as np # 支持中文 plt.rc ...
Windump网络命令的简单用法
Windump网络命令的简单用法大家都知道,unix系统下有个tcpdump的抓包工具,非常好用,是做troubleshooting的好帮手.其实在windows下也有一个类似的工作,叫windum ...
Android TabLayout(选项卡布局)简单用法实例分析
本文实例讲述了Android TabLayout(选项卡布局)简单用法.分享给大家供大家参考,具体如下: 我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合.达到 ...
shell expect的简单用法
为什么需要expect? 我们通过Shell可以实现简单的控制流功能,如:循环.判断等.但是对于需要交互的场合则必须通过人工来干预,有时候我们可能会需要实现和交互程序如 telnet服务器等进 ...
Shellz中awk的简单用法
其实shell脚本的功能常常被低估.在实际应用中awk sed 等用法可以为shell提供更为强大的功能.下面我们将一下awk调用的简单方法进行了总结.方便同学们学习: awk的简单用法: 第一种调用 ...
python装饰器实例-Python装饰器原理与简单用法实例分析
本文实例讲述了Python装饰器原理与简单用法.分享给大家供大家参考,具体如下: 今天整理装饰器,内嵌的装饰器.让装饰器带参数等多种形式,非常复杂,让人头疼不已.但是突然间发现了装饰器的奥秘,原来如此 ...

iframe简单用法

iframe简单用法相关推荐

最新文章

热门文章