0

我是 CSS 的新手，并为我的测试创建了这个 html 文件......但结果不是我所期望的......

以下是我的问题，

  1. 我的 IE 窗口的正确宽度是多少。
  2. 我的窗口的完美高度是多少……当我指定一个值时，没有任何变化。
  3. 我已经创建了 3 个部门——页眉、页脚和内容。当我查看它时……每个部分之间都有很大的空间……为什么会出现？

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body
            {
                background-color:#d0e4fe;
                width:1400px;
                height:1000px;
            }

            h1
            {
                color:orange;
                text-align:center;
            }

            #div-1
            {
                background-color:red;
            }
            #div-2
            {
                background-color:Green;
            }
            #div-3
            {
                background-color:Blue;
            }


        </style>

    </head>

    <body>

        <div id="div-1">
            <h1>Header<h1>
        </div>

        <div id="div-2">
            <h1>Content<h1>
        </div>

        <div id="div-3">
            <h1>Footer<h1>
        </div>


    </body>
</html>
4

2 回答 2

2
  1. 身体标签上的宽度应设置为“宽度：100%；” 这将导致 body 标签占据窗口的整个宽度，并且您的彩色 div 部分也将拉伸整个宽度。
  2. 您可以将 body 标签上的高度设置为“height: 100%;” 或“高度：自动；”。取决于你在做什么。
  3. 该空间来自您在每个 div 中的 h1 标签。他们设置了浏览器默认的边距。如果将 css 属性设置为“margin: 0px”，则应该消除所有多余的空间。
于 2012-07-17T20:27:10.423 回答
1

首先，您没有在 CSS 中定义窗口的宽度或高度。它只是不会发生。您可以指定页面上特定元素的宽度，但这是一个稍微不同的问题。删除您的height和width属性。

h1其次，由于标签上设置的默认边距，您的部门之间有空格。如果要删除它们，margin: 0请h1在 CSS 中设置。

第三，您可能想在 HTMLDog上查看这个 CSS 教程

于 2012-07-17T20:26:18.653 回答