Question

与stackoverflows标题类似，我试图让我的标题背景颜色展开并接管页面的两侧，同时仍然保持文本在中心，但我不知道如何使用正确的技术如何使用960grid系统。这是我的HTML：

<body> 
  <div class="container_24">
     <div id="header-top-border" class="grid_24"></div> # take over top of page.
     <div id="header-background" class="grid_24"></div> # take over top of page.
     <div id="logo" class="grid_5">
       <h1>Logo</h1>
     </div>        
  </div>
</div>

我想将徽标放在header-background的顶部，并根据本网站上的css判断我不确定它是否应该在header-background div内。这是怎么做到的？

谢谢。

Answer 1

您希望将header-background放在container_24 div之外，因为后者充当限制可用页面宽度的包装器。如果您希望徽标位于header-background之上，您可以将其放在header-background内，或者您可以将其放在外面并使用负边距，绝对定位和z-index将其移到顶部。可能最好把它放在header-background内。

您的代码可能如下所示：

<body>
  <div id="header-background" class="banner">
    <div class="container_24"> # You may want this to help position things inside the banner
      <div id="logo" class="grid_5"><h1>Logo</h1></div>
    </div>
  </div> # uses entire width of the window
  <div class="container_24"> # only 24 columns wide
    # everything else...
  </div>
</body>

Answer 2

将其拉出容器，然后为标题创建另一个容器：

<body> 
  <div id="header-background">
     <div id="header-top-border" class="container_24"></div>
  </div> # takes up the whole width
  <div class="container_24">
     <div id="logo" class="grid_5">
       <h1>Logo</h1>
     </div>        
  </div>
</div>

如何制作扩展出960网格系统的彩色背景？

2 个答案: