Question

我正在玩bigcommerce，我正在尝试重新创建标题的页脚结构。你可以在这里看到：

http://thespeedfactory.mybigcommerce.com/

如果您查看页脚，它是如何全宽，但内容是其中的核心。

我希望标题完全相同，黑色带粉色/白色高光。

我试过在大型商务中移动这个结构，但是我知道它是基于容器和边缘的，但是我在实现这一目标时看起来像我想要的那样。

感谢任何指导。

Answer 1

如果我理解正确，你想要：

标题（#Header）跨越页面的整个宽度
页脚（#ContainerFooter）跨越页面的整个宽度
标题（和页脚具有相同的样式（颜色等）
内容区域（#Wrapper）保持固定宽度并以页面为中心

为此，请添加以下css：

#Container {width:100%;}
#Header {width:100%; margin:0, auto;}

上面的css允许标题（通过其父容器）拉伸浏览器页面的宽度。您会注意到#Wrapper向左移动。加上这个：

#Wrapper {margin:auto;)

这使#Wrapper居中。

您的结构应该就位，现在您可以将颜色等添加到#Header以使其与页脚匹配。

Answer 2

这是非常基本的html / css。
只需创建一个div，在其中放置一个容器并开始设计样式。

HTML：

<div id="header"> 
    <div id="container">
        <p>content</p> 
    </div>
</div>

CSS：

#header {
    width: 100%;
    height:400px;
    background:black;
    position:absolute;
    border-top:3px solid #ff25a7;
}
#container {
    width:90%;
    height:300px;
    margin:0 auto;
}
#container p {
    font-size:30px;
    padding:10px;
    color: #ff25a7;
}

这是帮助您入门的jsFiddle。

Answer 3

您可以尝试为标题提供与页脚相同的类以及之后（如果页脚的位置为absolute bottom），请将position设置为absolute {{1 }}

如何获得标题，相同的样式和宽度与页脚在这里

3 个答案: