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

Question

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

http://thespeedfactory.mybigcommerce.com/

如果你看一下页脚，你会发现它是全宽的，而内容是在中间的。

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

我试着在bigcommerce中移动结构，但是我的大脑在让它做和看我想要的，尽管我知道它是基于容器和边距。

Answer 1

如果我没理解错的话，你想:

• 标题(# header)跨越整个页面的宽度
• 页脚(#ContainerFooter)跨越整个页面的宽度
• 页眉(和页脚有相同的样式(颜色等)
• 内容区(#Wrapper)保持一个固定的宽度和居中的页面

为此，添加以下css:

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

上面的css允许header(通过它的父容器)扩展浏览器页面的宽度。你会注意到#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;
}

Answer 3

您可以尝试将标题设置为与页脚相同的类，然后(如果页脚的位置是absolute bottom)，将position设置为absolute top:0px;