1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .box{
  12.             position: relative;
  13.             width: 1200px;
  14.             height: 700px;
  15.             margin: 10px auto;
  16.             border: 10px solid blue;
  17.         }
  18.         .box ul{
  19.             position: absolute;
  20.             top: 0;
  21.             bottom: 0;
  22.             left: 10px;
  23.             height: 520px;
  24.             margin: auto;
  25.             list-style-type: none;
  26.         }
  27.         .box ul li{
  28.             width: 150px;
  29.             margin: 10px 0;
  30.             line-height: 30px;
  31.             text-align: center;
  32.             box-shadow: 0 0 20px 0 green inset;
  33.         }
  34.         .box iframe{
  35.             position: absolute;
  36.             right: 10px;
  37.             top: 0;
  38.             bottom: 0;
  39.             margin: auto;
  40.             width: 1000px;
  41.             height: 600px;
  42.             border: 5px solid purple;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47. <!--<iframe src="https://www.baidu.com/" name="咸鱼" frameborder="1"></iframe>-->
  48. <div class="box">
  49.     <ul>
  50.         <li><a href="作业/1.html" target="咸鱼">第1次作业</a></li>
  51.         <li><a href="作业/2.html" target="咸鱼">第2次作业</a></li>
  52.         <li><a href="作业/3.html" target="咸鱼">第3次作业</a></li>
  53.         <li><a href="作业/4.html" target="咸鱼">第4次作业</a></li>
  54.         <li><a href="作业/5.html" target="咸鱼">第5次作业</a></li>
  55.         <li><a href="作业/6.html" target="咸鱼">第6次作业</a></li>
  56.         <li><a href="作业/7.html" target="咸鱼">第7次作业</a></li>
  57.         <li><a href="作业/8.html" target="咸鱼">第8次作业</a></li>
  58.         <li><a href="作业/9.html" target="咸鱼">第9次作业</a></li>
  59.         <li><a href="作业/10.html" target="咸鱼">第10次作业</a></li>
  60.         <li><a href="作业/11.html" target="咸鱼">第11次作业</a></li>
  61.         <li><a href="作业/3.html" target="咸鱼">第12次作业</a></li>
  62.         <li><a href="作业/4.html" target="咸鱼">第13次作业</a></li>
  63.     </ul>
  64.     <iframe src="https://www.baidu.com/" name="咸鱼" frameborder="0"></iframe>
  65. </div>
  66. <!--
  67.     iframe (和行内块属性一样)
  68.         src 网址的路径
  69.         name 框架的名字
  70.         frameborder 框架的边框
  71.  
  72.         行内块
  73.  
  74. -->
  75. </body>
  76. </html>

20-iframe的更多相关文章

  1. 教你利用iframe在网页中显示天气

    来源:http://www.ido321.com/921.html css: 1: *{margin:0;padding:0;list-style-type:none;} 2: a,img{borde ...

  2. jquery库实现iframe自适应内容高度和宽度

    javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jQuery的代码! ‍<iframe src="index.php" id=&qu ...

  3. 你必须收藏的Github技巧

    一秒钟把Github项目变成前端网站 GitHub Pages大家可能都知道,常用的做法,是建立一个gh-pages的分支,通过setting里的设置的GitHub Pages模块可以自动创建该项目的 ...

  4. <bgsound>和<embed></embed>标签 頁面插入音樂

    ■ <BGSOUND> 是用以插入背景音乐,但只适用於 IE,其参数设定不多. <BGSOUND src="liberation.mp3"; autostart= ...

  5. js日常笔记

    写在前面: 在工作中,有时候会遇到一些零零碎碎的小知识点,虽然这些网上都可以查询到,但还是想把一些自己不是很熟悉的当做笔记记录下来,方便以后查询. 1.按钮隐藏/显示/可用/不可用 $("# ...

  6. Nginx 防止SQL注入、XSS攻击的实践配置方法

    下班的时候,发现博客访问缓慢,甚至出现504错误,通过 top -i 命令查看服务器负载发现负载数值飙升到3.2之多了,并且持续时间越来越频繁直至持续升高的趋势,还以为是被攻击了,对来访IP进行了阈值 ...

  7. bWAPP----iFrame Injection

    iFrame Injection 直接上代码 1 <div id="main"> 2 3 <h1>iFrame Injection</h1> 4 ...

  8. 三种上传文件不刷新页面的方法讨论：iframe/FormData/FileReader

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"up ...

  9. 2016年4月最佳的20款 jQuery 插件推荐

    这个列表包括20个我们觉得是最有用的免费的 jQuery 插件,它们都是最具创新性和最省时省力的解决方案,很多都是现代化的设计和开发中碰到的问题的处理方案.如果你熟悉下面列出的任何插件,请与我们的读者 ...

  10. Html之 IFrame使用，注意几点

    0x01 iframe的跳出框架 0x02 iframe样式设置 0x03 iframe重置高度 1.首先来一个,跳出iframe的好方法,直接可以在Login.aspx页面使用. if (windo ...

随机推荐

  1. merge存储引擎基本介绍和使用规范说明

    [以下两段截自MySql手册]: merge存储引擎,也被认识为mrg_myisam引擎,是一个"相同“的表可以被当作一个表来用的myisam表的集合.“相同”意味着所有表同样的列和索引信息 ...

  2. Windows Server 2003服务器清理C盘空间的资料多个解决方法

    一.关闭IIS HTTPRERR日志功能 默认情况下,2003服务器会把所有IIS访问错误的记录写入 C:WINDOWSsystem32LogFilesHTTPERR 下的 log 文件中,如果访问量 ...

  3. 区别 |峰度（Kurtosis）和偏度（Skewness）

      峰度(Kurtosis) 定义 峰度又称峰态系数,表征概率密度分布曲线在平均值处峰值高低的特征数,即是描述总体中所有取值分布形态陡缓程度的统计量.直观看来,峰度反映了峰部的尖度.这个统计量需要与正 ...

  4. Windows DHCP服务器

    DHCP服务器 编辑 动态主机配置协议是一个局域网的网络协议.指的是由服务器控制一段IP地址范围,客户机登录服务器时就可以自动获得服务器分配的IP地址和子网掩码.首先, DHCP服务器必须是一台安装有 ...

  5. Spring整合Dubbo框架

    Dubbo作为一个RPC框架,其最核心的功能就是要实现跨网络的远程调用.演示过程创建两个小工程,一个作为服务的提供者,一个作为服务的消费者.通过Dubbo来实现服务消费者远程调用服务提供者的方法. d ...

  6. 怎么规划一个零基础学习Unity3D的“方法”或者“流程”？

    具体出处:https://www.zhihu.com/question/35542990 我只是一个计算机相关专业毕业的,已经掌握了基础的C#并开发过.net的.目前突然心血来潮对unity3D有兴趣 ...

  7. C语言进阶学习第一章

    1.在C语言里面使用scanf给某个变量赋值时候,如果成功返回1,失败返回0:测试代码如下: /***假如在键盘输入的不是整形数据,则输出0,否则输出1***/ void main() { int a ...

  8. vue通过修改element-ui相关类的样式修改element-ui组件的样式

    可以在App.vue中的style中修改element-ui的样式. .el-menu{ width:160px !important; } 注意:一定要在属性值后面加上 !important 使自己 ...

  9. MybatisPlus联合分页查询

    跟单表分页查询差不多 1.编写查询语句 public interface QuestionMapper extends BaseMapper<Question> { @Select(&qu ...

  10. 【转载】flex布局超过显示省略号

    <div class="main"> <div class="content"> <h4 class="name&quo ...