html - 如何在此处获取页眉，与页脚相同的样式和全宽

Question

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

http://thespeedfactory.mybigcommerce.com/

如果你看一下页脚，它是全宽的，但内容是它的中心。

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

我尝试过在 bigcommerce 中移动结构，但我在让它完成并查看我想要的方式时遇到了大脑故障，尽管我知道它是基于容器和利润的。

任何指导表示赞赏。

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 top:0px;