20-iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 1200px;
height: 700px;
margin: 10px auto;
border: 10px solid blue;
}
.box ul{
position: absolute;
top: 0;
bottom: 0;
left: 10px;
height: 520px;
margin: auto;
list-style-type: none;
}
.box ul li{
width: 150px;
margin: 10px 0;
line-height: 30px;
text-align: center;
box-shadow: 0 0 20px 0 green inset;
}
.box iframe{
position: absolute;
right: 10px;
top: 0;
bottom: 0;
margin: auto;
width: 1000px;
height: 600px;
border: 5px solid purple;
}
</style>
</head>
<body>
<!--<iframe src="https://www.baidu.com/" name="咸鱼" frameborder="1"></iframe>-->
<div class="box">
<ul>
<li><a href="作业/1.html" target="咸鱼">第1次作业</a></li>
<li><a href="作业/2.html" target="咸鱼">第2次作业</a></li>
<li><a href="作业/3.html" target="咸鱼">第3次作业</a></li>
<li><a href="作业/4.html" target="咸鱼">第4次作业</a></li>
<li><a href="作业/5.html" target="咸鱼">第5次作业</a></li>
<li><a href="作业/6.html" target="咸鱼">第6次作业</a></li>
<li><a href="作业/7.html" target="咸鱼">第7次作业</a></li>
<li><a href="作业/8.html" target="咸鱼">第8次作业</a></li>
<li><a href="作业/9.html" target="咸鱼">第9次作业</a></li>
<li><a href="作业/10.html" target="咸鱼">第10次作业</a></li>
<li><a href="作业/11.html" target="咸鱼">第11次作业</a></li>
<li><a href="作业/3.html" target="咸鱼">第12次作业</a></li>
<li><a href="作业/4.html" target="咸鱼">第13次作业</a></li>
</ul>
<iframe src="https://www.baidu.com/" name="咸鱼" frameborder="0"></iframe>
</div>
<!--
iframe (和行内块属性一样)
src 网址的路径
name 框架的名字
frameborder 框架的边框 行内块 -->
</body>
</html>
20-iframe的更多相关文章
- 教你利用iframe在网页中显示天气
来源:http://www.ido321.com/921.html css: 1: *{margin:0;padding:0;list-style-type:none;} 2: a,img{borde ...
- jquery库实现iframe自适应内容高度和宽度
javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! <iframe src="index.php" id=&qu ...
- 你必须收藏的Github技巧
一秒钟把Github项目变成前端网站 GitHub Pages大家可能都知道,常用的做法,是建立一个gh-pages的分支,通过setting里的设置的GitHub Pages模块可以自动创建该项目的 ...
- <bgsound>和<embed></embed>标签 頁面插入音樂
■ <BGSOUND> 是用以插入背景音乐,但只适用於 IE,其参数设定不多. <BGSOUND src="liberation.mp3"; autostart= ...
- js日常笔记
写在前面: 在工作中,有时候会遇到一些零零碎碎的小知识点,虽然这些网上都可以查询到,但还是想把一些自己不是很熟悉的当做笔记记录下来,方便以后查询. 1.按钮隐藏/显示/可用/不可用 $("# ...
- Nginx 防止SQL注入、XSS攻击的实践配置方法
下班的时候,发现博客访问缓慢,甚至出现504错误,通过 top -i 命令查看服务器负载发现负载数值飙升到3.2之多了,并且持续时间越来越频繁直至持续升高的趋势,还以为是被攻击了,对来访IP进行了阈值 ...
- bWAPP----iFrame Injection
iFrame Injection 直接上代码 1 <div id="main"> 2 3 <h1>iFrame Injection</h1> 4 ...
- 三种上传文件不刷新页面的方法讨论：iframe/FormData/FileReader
发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...
- 2016年4月最佳的20款 jQuery 插件推荐
这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...
- Html之 IFrame使用，注意几点
0x01 iframe的跳出框架 0x02 iframe样式设置 0x03 iframe重置高度 1.首先来一个,跳出iframe的好方法,直接可以在Login.aspx页面使用. if (windo ...
随机推荐
- CF421D Bug in Code
题意:n个人每人选择了另外不相同的两个人.问有多少对(x,y)使得这n个人中至少有p个选择了至少其中之一? 标程:那就不写了吧. 题解:容斥 统计Ax表示有多少个人选择了x. 一般来说有Ax+Ay&g ...
- leetcode-63-不同路径②
题目描述: 第一次提交: class Solution: def uniquePathsWithObstacles(self, obstacleGrid) : m = len(obstacleGrid ...
- 关于Qt5（1）-- 两个窗口互相切换的例子
<QT Creator快速入门>这本书有一章介绍model和modeless的概念时,用到了两个窗口互相切换的例子.但是原文对该例子的说明非常模糊不清,现整理如下. 1,要求:登陆界面.主 ...
- js字符串去重复
var str="fdafdasfdasfdsfdseeeu"; function te(str){ var hash=[]; var arr=new Array(); var s ...
- jQuery ajax - post() 方法
实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("i ...
- Java基本语法.part02
变量 变量的概念: 内存中的一个存储区域 该区域有自己的名称(变量名)和类型(数据类型) Java中每个变量必须先声明,后使用 该区域的数据可以在同一类型范围内不断变化 使用变量注意: 变量的作用域: ...
- 「题解」：$Game$
问题 B: $Game$ 时间限制: 1 Sec 内存限制: 256 MB 题面 题面谢绝公开. 题解 对于最初加入的每一个元素开桶记录出现次数. 然后记录一个前p个元素最大值. 先由先手玩家取走一 ...
- BCB编写DLL终极手册
一. 编写 DLL File/New/Dll 生成 Dll 的向导,然后能够添加导出函数和导出类 导出函数:extern "C" __declspec(dllexport) Exp ...
- LUOGU P2564 [SCOI2009]生日礼物 (队列+模拟)
传送门 解题思路 还是比较好想的,用一个队列,然后把所有点放在一起排个序,依次入队.每次检查队头元素的种类是否为当前入队元素种类,是的话就一直\(pop\),每次更新答案即可. 代码 #include ...
- 二分查找总结及部分Lintcode题目分析 2
Search in a big sorted array,这个比之前的二分法模板多了一个很不同的特性,就是无法知道一个重要的条件end值,也是题目中强调的重点 The array is so big ...