Question

我警告过你，我可能会有点模糊

无论如何，我所追求的是那些填满整个屏幕的页面，但是如果你向下滚动并且你来到一个不同的部分（一些特定的内容或只是一个页脚），它会打破以前的内容不同的背景。对不起，如果我睡在上面，我可以提出更好的解释和/或example page。

这种风格有名称吗？它是如何完成的？如果它需要响应？

感谢

Answer 1

是。这很简单。像这样设置，并根据您的心脏内容进行自定义。

<div id="header" class="container">
<div class="wrapper">
[...]
</div>
</div>

<div id="feature_area" class="container">
<div class="wrapper">
[...]
</div>
</div>

<div id="content" class="container">
<div class="wrapper">
[...]
</div>
</div>

<div id="footer" class="container">
<div class="wrapper">
[...]
</div>
</div>

CSS：

.container {
    width: 100%;
    text-align: center;
}

.wrapper {
    margin: 0px auto;
    width: 70%;
    text-align: left;
}

父（容器）<div>将拉伸到100％的页面宽度。子（包装器）<div>将拉伸到其父级的70％（或者，您可以将其设置为固定的像素尺寸并根据屏幕尺寸进行更改）并将居中。您将装饰背景应用于父.container，如：

#header {
    background: #ff0000;
}

#footer {
    background: #000;
}

#content {
    background: url(img/bg_pattern.gif);
}

#feature_area {
    background: url(img/hero_feature_img.jpg) top center no-repeat;
}

对于分成水平部分的页面具有不同种类的背景

1 个答案: