Html 如何创建具有多种颜色的居中标题？_Html_Css_Position_Positioning

Html 如何创建具有多种颜色的居中标题？

html css

Html 如何创建具有多种颜色的居中标题？,html,css,position,positioning,Html,Css,Position,Positioning,我想重新创建以下标题：问题是内容集中在白色部分。灰色是主体的背景，标题是屏幕的100% 我现在得到的是： CSS 。左上方{ 背景#3c4d74； } .右上角{ 背景：#2f3a5a； } .托普尤中心{ 背景：#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg)无重复右上；高度：140像素； } #第页， .托普尤中心{ 最大宽度：1000px；保证金：0自动； } #页面{ 背景：#FFF； } 身体{ 背

我想重新创建以下标题：

问题是内容集中在白色部分。灰色是主体的背景，标题是屏幕的100%

我现在得到的是：

CSS

。左上方{
背景#3c4d74；
}
.右上角{
背景：#2f3a5a；
}
.托普尤中心{
背景：#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg)无重复右上；
高度：140像素；
}
#第页，
.托普尤中心{
最大宽度：1000px；
保证金：0自动；
}
#页面{
背景：#FFF；
}
身体{
背景：#DEDEDE；
}

HTML


我的内容一模一样

你可以在上面看到（我把最大宽度设为600px而不是1000px，这样你就可以在小提琴上看到它）

如何以任何分辨率制作左侧软蓝色和右侧硬蓝色？

要做到这一点，您需要非常了解定位的工作原理

#标题bg

的位置使其位于

#包装器

下方。它是100%宽度，140px高，两个div都占据了50%的空间，它们的左/右颜色都不同

#包装器

相对定位以使

z-index

工作，将其置于

#标题bg

上方。宽度设置为600px，且

边距：0自动将其居中
#标题
是一个简单的div，它有一个高度设置和所需的背景
在正常流程中，内容遵循#标题

下面是一个包含请求行为的JSFIDLE

这甚至可以很好地降低性能，如果内容比屏幕大，就可以水平滚动（这是我从最初的JSFIDLE中注意到的）
编辑：
为了使它与IE7兼容，我做了一些修改来修复2个bug。我不得不添加左：0和<代码>顶部：0显式添加到#header bg
以修复定位错误。将标题bg中的div设置为49%，而不是50%，否则IE7将无法正确调整其大小并使右侧div向下凸起。为了补偿产生的小间隙，我制作了右divfloat:right在下次发布之前让您的代码可读。您是冠军！！我希望能多给1分。我很高兴我问了，我自己永远也弄不明白这件事。谢谢！
<body>
    <div id="top-header">
        <div class="top_left"></div>
        <div class="top_center">
            <a href="#">LOGO</a>    
        </div>
        <div class="top_right"></div>
    </div>
    <div id="page" class="hfeed">
        MY content bla bla bla
    </div>    
</body>