Html 如何制作一个扩展到960网格系统之外的彩色背景？_Html_Css_960.gs

Html 如何制作一个扩展到960网格系统之外的彩色背景？

html css

Html 如何制作一个扩展到960网格系统之外的彩色背景？,html,css,960.gs,Html,Css,960.gs,与stackoverflows页眉类似，我试图使页眉背景色展开并占据页面的两侧，同时仍将文本保持在中间，但我不确定如何使用网格系统来实现这一点。这是我的html： <body> <div class="container_24"> <div id="header-top-border" class="grid_24"></div> # take over top of page. <div id="header-ba

与stackoverflows页眉类似，我试图使页眉背景色展开并占据页面的两侧，同时仍将文本保持在中间，但我不确定如何使用网格系统来实现这一点。这是我的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>


#接管页面顶部。
#接管页面顶部。
标志

我希望徽标位于

标题背景

的顶部，从该网站的css判断，我不确定它是否应该位于

标题背景

div的内部。这是怎么做到的

谢谢。

您希望将

标题背景

放在

容器24

div的外部，因为后者充当限制可用页面宽度的包装器。如果您想让徽标位于

标题背景的顶部

，可以将其置于

标题背景的内部

，也可以将其置于外部并使用负边距、绝对定位和z索引将其移到顶部。也许最好把它放在

标题背景中
您的代码可能如下所示：
<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>


#您可能希望这有助于将内容放置在横幅内
标志
#使用窗口的整个宽度
#只有24列宽
#其他一切。。。
您希望将标题背景
放在容器24
div之外，因为后者充当限制可用页面宽度的包装器。如果您想让徽标位于标题背景的顶部
，可以将其置于标题背景的内部
，也可以将其置于外部并使用负边距、绝对定位和z索引将其移到顶部。也许最好把它放在标题背景中
您的代码可能如下所示：
<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>


#您可能希望这有助于将内容放置在横幅内
标志
#使用窗口的整个宽度
#只有24列宽
#其他一切。。。
将其从容器中拉出，然后为收割台创建另一个容器：
<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>


#占据整个宽度
标志
将其从容器中拉出，然后为收割台创建另一个容器：
<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>


#占据整个宽度
标志