Iframe框架+table布局 +div布局实例

最新推荐文章于 2022-03-22 20:25:16 发布

weixin_30299709

最新推荐文章于 2022-03-22 20:25:16 发布

阅读量441

点赞数

原文链接：http://www.cnblogs.com/angle6-liu/p/10136617.html

版权

<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

素材：

转载于:https://www.cnblogs.com/angle6-liu/p/10136617.html

weixin_30299709

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Iframe框架+table布局 +div布局实例

<td colspan="2" style="width: 80%"> <iframe src="http://www.baidu.com" width="100%" height="100%" name="myframe"></iframe></td>源代码:<!DOCTYPE html>...
复制链接

扫一扫