1

我做了这个简单的 3 部分 css 布局，但它的行为并不像它应该的那样。

CSS

#main-container {
    width: 1000;
    margin: 0 auto;
    height:100%;
}

.header{ 
    background-color:black; 
    width:100%; 
    height:150px;
}

.headertext{
    color:#A3BB02;
    font-size: xx-large;
}

.contenu{ 
    width:100%; 
    background-color:#A3BB02;  
    }

.footer{ 
    width:100%; 
    background-color:black; 
    min-height:100px; 
    }

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Intro Projet Cloud</title>
    <link href='/css/design.css' rel='stylesheet' type='text/css' />
  </head>

  <body>
    <div id="main-container">
        <div class="header">
            <br/><br/><br/>
            <span class="headertext">blablabla</span>
        </div>
        <div class="contenu">
            <p>
                blabla
            </p>
            <p>
                blabla
            </p>
            <p>
                blabla
            </p>
            <p>
                <a href="projetcloudm2">Acceder a l'application</a>
            </p>
        </div>
        <div class="footer"></div>
    </div>
  </body>
</html>

结果 结果

contenu 与页眉和页脚之间的白条从何而来？5 月 css 中没有边距。

请注意，这是使用 Eclipse 中的 google app 引擎完成的 web 项目

4

4 回答 4

7

默认情况下，段落有一个边距（通常是 1em 0）。将此添加到您的样式中以重置它：

p {
  margin: 0;
}

见演示。

于 2013-01-22T15:21:27.247 回答
2

您有一个触发 Quirks 模式的 Doctype。这会导致浏览器模仿古代浏览器中的错误：

  • 破坏了很多 CSS
  • 使浏览器彼此不一致

使用触发标准模式的 Doctype。

由于您使用的是 HTML 4.01 Transitional，因此：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

（注意：HTML 4.01 过渡适用于将文档从 HTML 3.2 过渡到 HTML 4.01。新页面应根据 HTML 4.01 Strict 或 HTML 5 草案编写）。

您可能还有其他问题，但 Quirks 模式问题很大，因此在浏览器切换到标准模式之前不值得研究它们。

于 2013-01-22T15:26:54.850 回答
0

您看到的是默认样式。考虑实施一个体面的重置。

于 2013-01-22T15:24:13.590 回答
0 
.contenu p { 
    margin: 0; 
    padding: 10px 0 10px 0
}

添加这个。这应该为您提供与现在相同的 p 之间的空间，但没有 div 之间的空格

于 2013-01-22T15:29:01.993 回答