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>

結果 結果

コンテンツとヘッダーとフッターの間の白いバーはどこから来るのですか? 5月のCSSには余白がありません。

これは、Web プロジェクトを実行する Eclipse の Google アプリ エンジンで行われることに注意してください。

4

4 に答える 4

7

段落には、デフォルトでマージンがあります（通常は1em 0）。これをスタイルに追加してリセットします。

p {
  margin: 0;
}

DEMOを参照してください。

于 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 Transitional は、ドキュメントを 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 に答える