html页面-盒子模型的实现有关问题-HTML教程-爱易网页

html页面-盒子模型的实现有关问题

日期：2014-05-17　浏览次数：20640 次

html页面--盒子模型的实现问题
我想造一个共三行, 中间行分左右区域的盒子出来.
发觉在引入<iframe></iframe> 语句后, 页面布局全乱套了, 在删掉下述语句(如<iframe src="footer.html"></iframe>)后就好了.---------引用页面仅在body有简单的"This is a XXX page!" 所以我就不把引用页面代码贴出来了.
问题:
1.怎么做, 才能把被引用页面放在我指定的区域.
2. 我的这个代码有啥问题?

HTML code



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>main.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <style type="text/css">

#header {
    width: 800px;
    height: 40px;
    background-color: black;
}

#nav {
    width: 400px;
    height: 40px;
    float: left;
    background-color: red;
}

#content {
    width: 400px;
    height: 40px;
    float: right;
    background-color: yellow;
}

#footer {
    width: 800px;
    height: 40px;
    background-color: black;
}


</style>
    </head>

    <body>
        <div style="margin: 0 auto; width: 800px;">
            <div id="header">
                <iframe src="header.html"></iframe>
            </div>

            <div id="nav" class="nav">
                <iframe src="nav.html"></iframe>
            </div>

            <div id="content">
                <iframe src="content.html"></iframe>
            </div>

            <div id="footer">
                <iframe src="footer.html"></iframe>
            </div>
        </div>
    </body>
</html>

------解决方案--------------------
IE 样式表里加入
iframe { width:100% }

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

html页面-盒子模型的实现有关问题

相关资料更多>

推荐阅读更多>