Html 将div向上推到容器内_Html_Css

Html 将div向上推到容器内

html css

Html 将div向上推到容器内,html,css,Html,Css,我想弄清楚如何将div推入容器中。我从顶部设置了一个500px的边距，它在容器中每隔一个div向下推一次。我已经包括了两张照片，我得到了什么，我希望它看起来如何。我还包括了代码这是它应该如何看这是我的photoshop渲染完成的网站这就是它现在看起来的样子，我正在布置彩色的盒子。背景图像是在页面的正文中设置的渐变。标题应为上图中带有按钮、图片和登录选项卡的白色部分。核心应该是标题正下方的区域，小白线向右。bottomOutsideBox应该是一个浅灰色的框，它直接位于外部渐变的下方，靠近核

我想弄清楚如何将div推入容器中。我从顶部设置了一个

500px

的边距，它在容器中每隔一个div向下推一次。我已经包括了两张照片，我得到了什么，我希望它看起来如何。我还包括了代码

这是它应该如何看这是我的photoshop渲染完成的网站

这就是它现在看起来的样子，我正在布置彩色的盒子。

背景图像

是在页面的

正文

中设置的渐变。

标题应为上图中带有按钮、图片和登录选项卡的白色部分。核心
应该是标题
正下方的区域，小白线向右。bottomOutsideBox
应该是一个浅灰色的框，它直接位于外部渐变的下方，靠近核心
它应该位于500px
页面顶部下方，因为标题
从顶部设置为500px
。图像顶部的小绿色间隙只是一条小长条，上面有绿色的500px
，因为当我设置margin top:500px
时，它将所有东西都压下了。我希望标题保持在顶部，然后在其正下方有核心
，在核心
的外部有底部外部框
。我将图片中的bottomOutsideBox设置为黑色，以便更容易区分。

HTML:

测试
这里有一些版权和法律声明。可能会稍微使用©符号
这是我建议用于此类布局的标记，使用容器类将内容居中，并根据节更改背景，因为您只需要两个不同的背景，因此标题将是您唯一需要的节

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

<!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>

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

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;
}