Question

我想重新创建以下标题：

问题是内容以白色部分为中心。灰色是正文的背景，标题是屏幕的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/的工作（我把最大宽度600px而不是1000px，所以你可以在小提琴上看到它。）

如何以任何分辨率使左侧为柔和的蓝色和右侧为蓝色？

Answer 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 个答案: