<!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的更多相关文章

  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. 深度探索C++对象模型之第二章：构造函数语意学之Copy constructor的构造操作

    C++ Standard将copy constructor分为trivial 和nontrivial两种:只有nontrivial的实例才会被合成于程序之中.决定一个copy constructor是 ...

  2. 数据库MySQL--联合查询

    应用场景:当要查询的结果来自多个表,且多个表没有直接的连接关系,但查询的信息一致时 语法: 查询语句1 union(all) 查询语句2 union(all) ..... 注:多条查询语句的查询列数要 ...

  3. Delphi定时模拟键盘按键例程

    delphi模拟键盘按键实例delphi模拟键盘按键实例,只是模拟一个按键的例子而已.到一定时间按下模拟按下一个按键,delphi7编译通过. 10秒点击一下H键,其他键你们去找数值替换吧,网上大把的 ...

  4. duilib教程之duilib入门简明教程11.部分bug

    一.WindowImplBase的bug    在第8个教程[2013 duilib入门简明教程 -- 完整的自绘标题栏(8)]中,可以发现窗口最大化之后有两个问题,    1.最大化按钮的样式还是没 ...

  5. web移动端rem的适配

    ** 需求: 随着移动端设备的变化,内容也跟着变化.**先来说说rem单位,以rem为单位,其大小是根据根元素(html标签)的字体大小来判断的,      如 html的font-size:100p ...

  6. SqlSugar入门级教程+实例 （.net core下的）

    官方参考:http://www.codeisbug.com/Doc/8 前言:这应该是目前最好用的ORM框架之一了,而且支持.net core,网上除了官方文档其他参考就少了点,自己整理了一下,大致包 ...

  7. 用连接池链接redis

    package com.itheima.utils; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; i ...

  8. MyBatis基础-CRUD

    一.mybatis  环境搭建步骤 第一步:创建 maven 工程第二步:导入坐标第三步:编写必要代码(实体类和持久层接口)第四步:编写 SqlMapConfig.xml第五步:编写映射配置文件第六步 ...

  9. .net core 3.0 发布 500.0 - ANCM In-Process Handler Load Failure 错误

    .net core 3.0 发布后报500.0错误  原因: 发布设置和下载的Runtime SDK不匹配 https://dotnet.microsoft.com/download/dotnet-c ...

  10. 记录一次hexo托管到coding失败，页面总是404，可是相同的代码托管到github是没问题的。

    文章目录 问题描述: 问题原因: 问题解决 2019.1.23 问题,coding又挂了. 弃疗 个人博客:https://mmmmmm.me 源码:https://github.com/dataiy ...