0

コンテナー内に div をプッシュする方法を見つけようとしています。上からのマージンを設定する500pxと、コンテナー内の 1 つおきの div が押し下げられます。私が得ているものと、それをどのように見せたいかの2枚の写真が含まれています. また、コードを含めました。

これは、完成したウェブサイトの私の Photoshop レンダリングです。 ちゃんとした

色付きのボックスを配置する作業を行っているところです。ページのにbackground image設定されているグラデーションbodyです。headerボタン、画像、ログインタブがある上の画像の白い部分です。は、右側に小さな白い線がある のcoreすぐ下の領域である必要があります。headerはbottomOutsideBox外側のグラデーションのすぐ下にある明るい灰色のボックスである必要があり、 が上からに設定されているため、ページの上部の下coreに配置する必要があります。画像の上部にある小さな緑のギャップは、設定するとすべてが押し下げられたため、その上に緑が少しあります。が欲しい500pxheader500px500pxmargin-top:500pxheader一番上にとどまり、そのcoreすぐ下とbottomOutsideBoxの外側にありcoreます。写真では黒く設定してbottomOutsideBoxいるので見分けやすいです。 良くない

/*gradient*/

body {
background-image:url('../Images/gradient.gif');
background-color:#000000;
}

header {
    width: 750px;
    height: 500px;
    background-color: #FFFFFF;
    margin-left: auto;
    margin-right: auto;
    display:block;
}

div#bottomoutsidebox {
    background-color: #000000;
    margin-top: 500px;
    width: auto;
}

/* page core */
div#core {
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: #dadbd6;
    width: 750px;
    height: 250px;
    clear: both;
}

img.mainLogo {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

HTML:

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>testing</title>
  <meta name="description" content="Welcome to my basic template.">
  <link rel="stylesheet" href="css/style.css?v=1">
</head>

<body>
    <div id="wrapper">
        <div id="bottomoutsidebox">
        <header>
            <img class="mainLogo" src="Images/logo.jpg"/>
        </header>

        <div id="core">

        </div>

        <footer>
            <p>Some copyright and legal notices here. Maybe use the © symbol a bit.</p>
        </footer>
        </div>
    </div>

</body>
</html>
4

1 に答える 1

2

これは、このタイプのレイアウトに推奨するマークアップです。コンテナー クラスを使用してコンテンツを中央に配置し、セクションに基づいて背景を変更します。2 つの異なる背景のみが必要な場合、必要なセクションはヘッダーだけになるためです。

デモフィドル

HTML

<body>
    <header>
        <div class="container">
            <img class="mainLogo" src="Images/logo.jpg" />
        </div>
    </header>
    <div class="container">
        <div id="core"></div>
    </div>
</body>

CSS

body {
    margin: 0;
    background: #ccc;
}
.container {
    width: 750px;
    margin: 0 auto;
}
header {
    background: lime;
}
header .container {
    height: 500px;
    background: #fff;
}
#core {
    height: 250px;
    background: #ddd;
}
于 2013-08-04T07:40:14.810 に答える