<td colspan="2" style="width: 80%">

   <iframe src="http://www.baidu.com" width="100%" height="100%" name="myframe"></iframe>

</td>

源代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name=”viewport” content=”width=device-width, initial-scale=1″ />

    <title>tb布局</title>

    <style type="text/css">

        body{

            height:100% auto;

            width:100% auto;

        }

        table{

            height: 990px;

            width: 100%;

        }

    </style>

</head>

<body >

    <table >

            <tr style="background-color: red;height:10%">

                <td colspan="3" style="height: 10%;width: 100%;font-size:30px;text-align: center"  >我觉得一般吧，甚至有点难听，卜凡的拉普有点尬，岳明辉一如既往的油……</td>

            </tr>

            <tr style="height:80%;background-color: gray">

                <td style="width:20%;color: green">

                    <ul  style="list-style:none;line-height: 100px">

                        <li><a href="http://www.baidu.com" target="myframe"><img src="img/bd.gif"></a></li>

                        <li><a href="https://www.ifeng.com/" target="myframe"><img src="img/fh.gif"></a></li>

                        <li><a href="http://www.jd.com" target="myframe"><img src="img/jd.gif"></a></li>

                        <li><a href="http://www.taobao.com" target="myframe"><img src="img/tb.gif"></a></li>

                        <li><a href="https://www.sina.com.cn/" target="myframe"><img src="img/xl.gif"></a></li>

                        <li><a href="http://www.51zxw.com" target="myframe"><img src="img/我要自学网.png"></a></li>

                    </ul>

                </td>

                <td colspan="2" style="width: 80%">

                    <iframe src="http://www.baidu.com" width="100%" height="100%" name="myframe"></iframe>

                </td>

            </tr>

            <tr style="background-color: pink;height:10%">

                <td colspan="3" style="font-size:30px;text-align: center ">由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。

                </td>

            </tr>

    </table>

</body>

</html>

效果:

使用div布局和实例实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>div布局</title>

    <style type="text/css">

        body{

            margin:0;

            padding: 0;

            width:100% auto;

            height:990px;

            /*border: 2px solid red;*/

            font-size: 0px;

        }

        .firstpart {

            height: 10%;

            background-color: #3245ADFF;

            font-size: 25px;

            text-align: center;

        }

        .secondpart {

            height: 80%;

            background-color: gray;

        }

        .secondpart #left{

            display: inline-block;

            width:20%;

            height: 100%;

            float: left;

            background-color: pink;

        }

        .secondpart #left ul{

            margin-top: 60px;

            padding: 0;

        }

        .secondpart #left ul li{

            width: 100%;

            height: 120px;

            align-self: center;

        }

        .secondpart #left #timg{

            width: 90%;

        }

        .secondpart #right{

            display: inline-block;

            width:80%;

            height: 100%;

            background-color: green;

        }

        .secondpart #right #myframe{

            width: 100%;

            height: 100%;

        }

        .thirdpart {

            height: 10%;

            font-size: 25px;

            background-color: #3245ADFF;

            text-align: center;

        }

    </style>

</head>

<body>

    <div class="firstpart">

        《三国演义》是中日两国合作制作的动画片，已于2009年在中国上映。该动画片是根据中国古代名著《三国演义》改编，由北京辉煌动画、央视动画与日本未来行星株式会社联手打造的高清动画。

    </div>

    <div class="secondpart">

        <div id="left">

            <ul  style="list-style: none">

                        <li><a href="http://www.baidu.com" target="myframe"><img src="img/bd.gif"></a></li>

                        <li><a href="https://www.ifeng.com/" target="myframe"><img src="img/fh.gif"></a></li>

                        <li><a href="http://www.jd.com" target="myframe"><img src="img/jd.gif"></a></li>

                        <li><a href="http://www.taobao.com" target="myframe"><img src="img/tb.gif"></a></li>

                        <li><a href="https://www.sina.com.cn/" target="myframe"><img src="img/xl.gif"></a></li>

                        <li><a href="http://www.51zxw.com" target="myframe"><img src="img/我要自学网.png"  id="timg"></a></li>

            </ul>

        </div>

        <div id="right">

            <iframe src="http://www.baidu.com" name="myframe" id="myframe">

            </iframe>

        </div>

    </div>

    <div class="thirdpart">

        《红楼梦》，中国古代章回体长篇小说，又名《石头记》等，被列为中国古典四大名著之首，一般认为是清代作家曹雪芹所著。小说以贾、史、王、薛四大家族的兴衰为背景，以富贵公子贾宝玉为视角，描绘了一批举止见识出于须眉之上的闺阁佳人的人生百态，展现了真正的人性美和悲剧美，可以说是一部从各个角度展现女性美的史诗。

    </div>

</body>

</html>

diiv布局+iframe

素材：

Iframe框架+table布局 +div布局实例的更多相关文章

  1. table布局与div布局

      DIV与TABLE本身并不存在什么优缺点,所谓web标准只是推荐的是正确的使用标签,好比说:DIV用于布局,而TABLE则本来就是转二维数据的.让TABLE做该做的事,并不是说页面里不出现TABL ...

  2. 2017-12-04HTML布局＿div布局

    HTML布局＿div布局 <!doctpye> <html> <head> <meta charset = 'utf-8'> <title> ...

  3. 利用Div+CSS(嵌套+盒模型)布局页面完整实例流程

    Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html><html> <head>  <meta charset="UT ...

  4. HTML学习笔记 div布局及table布局案例 第三节 （原创）参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 用table布局和div布局的区别

    table布局的渲染是将整个table全部渲染出来,如果网路不给力的情况下,整个table会卡死在页面div布局的话,页面渲染,会一个一个的div渲染,网页出现会一个一个出来,不管网速怎样,不会全局卡 ...

  6. table 和 div 简单布局

    table 简单布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  7. 浅谈table和DIV网页布局

    DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DI ...

  8. [转]基于display:table的CSS布局

    当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table.table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器.它标志着复杂CSS ...

  9. 基于CSS属性display:table的表格布局的使用

    项目改造中遇到DIV+CSS实现的table,新需求需要在表格使用单元格合并,网上调查返现CSS display:table实现的table表格,没有单元格的属性和样式,经过一番思考,曲折现实了单元格 ...

随机推荐

  1. 安装Ubuntu的Mozilla Firefox的Adobe Flash Player时学习/lib、/usr/lib、/usr/local/lib的区别

    想对比一下Ubuntu和windows下视频效果体验的区别.安装了Ubuntu新版14.04.在之前的学习工程中,从来没想过使用虚拟机里的火狐浏览器看视频浏览网页,所以还真没有安装Flash的Linu ...

  2. 第一册：lesson fifty five。

    原文: The Sawyer family. The Sawyers live at 87 King street. In the morning Mr.Sawyer goes to work and ...

  3. 第一册：lesson twenty five。

    原文:Mrs.smith's kitchen. Mrs.smith's kitchen is small. There is a refrigerator in the kitchen. The re ...

  4. 开发谷歌浏览器插件会上瘾，搞了一个JSONViewer，一个页面格式化多条JSON，提升工作效率

    最近写了一个谷歌浏览器插件(Chrome extension),拿出来分享下,希望能提升大家的工作效率. 一.背景 先说痛点:日常开发中,经常需要不停的把接口输出的JSON拷贝到在线JSON格式化页面 ...

  5. 数据库部分（MySql）_2

    分组查询 分组查询通常和聚合函数结合使用,查询条件中每个XXX就以XXX为分组的条件: 格式:每个A的平均B select avg(B) from 表名 group by A; having 在whe ...

  6. 月薪25K的90后程序员，他们都经历了什么？

    如果说薪资是检验一家公司对程序员认可的标准,那么年纪轻轻就能达到月薪 25K,一定程度上说明了公司对他创造的价值的认可. 深访10+ 名月薪25K的程序员,发现他们最常见的三种成长途径是…… 在公司发 ...

  7. 处理JavaScript异常的正确姿势

    译者按: 错误是无法避免的,妥善处理它才是最重要的! 原文: A Guide to Proper Error Handling in JavaScript Related Topics: 译者: Fu ...

  8. 1，JavaScript前世今生

    JavaScript历史大概在1992年,一家称作Nombas的公司开始开发一种叫做C–(C-minus-minus,简称Cmm)的嵌入式脚本语言. Cmm背后的理念很简单:一个足够强大可以替代宏操作 ...

  9. 浅谈css中的盒模型（框模型）

    css中的盒模型是css的基础,盒模型的理解可以帮助我们进行对样式进行修改.废话不多说,进入正题: 在w3c中,CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边框.边框 和 外边 ...

  10. MySql: Year, Quarter, Month, Day, Hour statistics

    -- 统计 select count(*) as '当天记录数' from web_product where date(p_createtime) = curdate(); select count ...