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

【问题标题】：How can I create this centered header with multiple colors?如何创建具有多种颜色的居中标题？
【发布时间】：2012-06-16 18:09:52
【问题描述】：

我想重新创建以下标题：

问题是内容在白色部分居中。灰色是body的背景，header是100%的屏幕。

我现在拥有的是：

CSS

.top_left {
  background:#3c4d74;
}

.top_right {
  background:#2f3a5a;
}

.top_center {
  background:#3c4d74 url(http://img85.imageshack.us/img85/2816/headerbgo.jpg) no-repeat right top;
  height:140px;
}

#page, 
.top_center {
  max-width:1000px;
  margin:0 auto;
}

#page {
  background:#FFF;
}

body {
  background:#DEDEDE;
}

HTML

<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>

您可以在http://jsfiddle.net/gTnxX/ 上看到它（我将最大宽度设置为 600 像素而不是 1000 像素，以便您可以在小提琴上看到它）。

如何在任何分辨率下使左侧柔和的蓝色和右侧的硬蓝色？

【问题讨论】：

在下次发布之前让您的代码可读。

标签： html css position positioning

【解决方案1】：

为此，您需要非常了解定位的工作原理。

#header-bg 的位置使其低于#wrapper。它是 100% 宽，140px 高，有 2 个 div，它们都占据了 50% 的空间，并且它们的左/右颜色都不同。

#wrapper 的相对定位是使z-index 工作，将其置于#header-bg 之上。宽度设置为 600px，margin: 0 auto; 居中。

#header 是一个简单的 div，它设置了高度和所需的背景。

内容遵循正常流程中的#header。

这是一个带有请求行为的 jsfiddle。

http://jsfiddle.net/sg3s/cRZxN/

这甚至可以很好地降级，如果内容大于屏幕，您可以水平滚动（我从原始 jsfiddle 中注意到了这一点）。

编辑：

为了使其与 IE7 兼容，我进行了一些更改以修复 2 个错误。我必须将left: 0; 和top: 0; 明确添加到#header-bg 以修复定位错误。将#header-bg 中的 div 设置为 49% 而不是 50%，否则 IE7 将无法正确调整它们的大小并使正确的 div 向下移动。为了弥补造成的小差距，我制作了正确的 div float: right;。

【讨论】：

你是冠军！！我希望能给超过 1 分。我很高兴我问，我永远不会自己弄清楚。非常感谢！