Css 具有连续背景图像但以内容为中心的布局？_Css_Html_Layout

Css 具有连续背景图像但以内容为中心的布局？

css html layout

Css 具有连续背景图像但以内容为中心的布局？,css,html,layout,Css,Html,Layout,我正在努力研究如何创建一个网站，它有3个独立的“层”（顶部导航，然后是内容，然后是页脚），每个层都有不同的背景图像，平铺到100%的宽度。。。但我希望我的内容居中（好像包含的div有边距：0自动应用）到目前为止，我一直在尝试只为背景图像创建div，然后绝对定位我的内容div，但允许它们自动居中但是对于corse，我从文档的“流”中提取元素，因此我的背景图像div最终会相互堆叠这真的很难解释，所以希望这个例子能有所帮助：正如你所看到的，我有我的蓝色div，背景延伸到100%，但我希望我的

我正在努力研究如何创建一个网站，它有3个独立的“层”（顶部导航，然后是内容，然后是页脚），每个层都有不同的背景图像，平铺到100%的宽度。。。但我希望我的内容居中（好像包含的div有边距：0自动应用）

到目前为止，我一直在尝试只为背景图像创建div，然后绝对定位我的内容div，但允许它们自动居中

但是对于corse，我从文档的“流”中提取元素，因此我的背景图像div最终会相互堆叠

这真的很难解释，所以希望这个例子能有所帮助：

正如你所看到的，我有我的蓝色div，背景延伸到100%，但我希望我的导航和一个大图像在这里居中

我的身体是绿色的，然后是hp_content div，这将是我所有内容的位置，居中，这里的问题是你不能应用边距或填充值（我已经应用它们来显示它们不起作用），只有父/浏览器顶部的一个位置，我相信这会导致我的网站响应时出现问题

然后我有我的红色分区，它与顶部导航（蓝色）分区相同，它有100%的边框，但我希望页脚内容（twitter提要、最新博客文章和联系方式）集中在这里

希望有人能理解我要实现的目标，知道如何正确设置这样的页面，非常感谢您的帮助

Jon

如果在每个主Div中添加另一个Div并使用样式作为

<div style="Width: 80%; float:right; margin-right: 150px;">

我想这在某种程度上可能会有所帮助

<div class="top_shade">  
    <div style="Width: 80%; float:right; margin-right: 150px;">      
    <header>
                <nav>
                    <ul id="">
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>
                        <li><a href="" id=""></a></li>     
                    </ul>
                </nav>
    </header>
    </div>
    </div>

好的！尝试按如下方式构建HTML：

<html>
<head></head>

<body class="index">

    <section class="top">
        <header class="content">
            <nav>
                <ul id="">
                    <li><a href="" id="">link 1</a></li>
                    <li><a href="" id="">link 2</a></li>  
                </ul>
            </nav>
        </header>
    </section>

    <section class="main">
        <div class="content">
            <h2>Whatever</h2>
            <div class="something">This is something else</div>
        </div>        
    </section>

    <section class="footer">
        <footer class="content">
            Footer content
        </footer>
    </section>

</body>
</html>

玩转：

因此，对于每个站点部分，您都有一个容器，其中包含该部分的所有内容，并有一个易于记忆的类名，如“.content”。您可以将所有内容设置为相同的宽度，也可以将每个部分的内容设置为不同的宽度，具体取决于您想要的内容。无论哪种方式，节都将占据浏览器宽度的100%。祝你好运！：）

您不想设置填充/边距吗？但是你想让你的所有文本在页面中水平居中吗？也许这个例子会澄清我想要实现的目标。--看看如何有三层纹理背景图像，绿色-深棕色-奶油色。但是所有的内容都是以中心为中心的，我该怎么做呢？在我尝试的例子中，我的内容从我的第一个色带（蓝色div）开始。对不起，这真的很难解释清楚吗谢谢这对主体部分（中间层）不起作用，因为在该层上没有包含div，只有主体。因此，它最终会根据主体（浏览器窗口的一侧）计算边距，而不会将内容居中。谢谢你的建议，虽然这对我非常有帮助，谢谢，标记为正确答案，因为它完美地回答了问题。再次感谢只是要指出的是，如果您想在中编辑它，则在上缺少一个“=”，这样其他人就不会对CSS为什么不能为该元素设置样式感到困惑了！

body, html{    
    width:100%;   
}

body {
    background: green;
}

body > section{
    width:100%;
}

/* this style will set all the section .content(s) to be 400px wide */
body > section > .content{
    display:block;
    margin:0 auto;
    width:400px;    
}

section.top {
    height: 510px;
    background: blue;
}

/* if you want to individually change widths for each section, do something like this:*/

section.top .content{
    width:100%;
}    

/* or not! */

section.main {
    height:200px;
}

section.footer {
    height: 400px;
    background: red;
}