0

我有一个顶栏，例如 Facebook 或 StackExchange 或 Twitter 的屏幕顶部，我希望它与页面的其余部分（下面的内容/主体）具有不同的背景。我该如何做到这一点？

4

4 回答 4

2

试试这个

css

body { background:#252525; margin:0;padding:0;}
.headerStrip{ height:40px; width:100%; z-index:1001; background:#F00; position:absolute; position:fixed;}

Html : 放在body标签之后

<div class="headerStrip"></div>
于 2012-10-22T05:05:44.190 回答
2

您可以使用此代码：

<div id="topbar">

</div>

你可以Position:fixed;像 twitter 的 topbar 一样使用

body{
    background: green;
}

#topbar{
    width:100%;
    background-color:blue;
    height:80px;
    position:fixed;
}
于 2012-10-22T05:10:49.347 回答
1

您必须将 header_block 放在包装器之外

 <div id="header_block">
      ...... Header_block Contents
    </div>
   <div id="wrapper">
      ...... Entire Page
    </div>

css

   #header_block
     {
           position:fixed;
           width:100%;
           float:left;
      }

这应该做的工作

于 2012-10-22T05:22:53.370 回答
1

最好的方法是使用CSS Background 属性。

例如，stackoverflow 使用具有如下 id 的 div 来设置顶部灰色条的背景颜色：

<div id="custom-header"></div>

然后在他们的css文件中，他们使用这样的背景颜色；还要注意高度：

#custom-header {
background-color: #EEE; <------------
height: 31px;
margin-bottom: -31px;
}

这给了我们顶部的灰色条，它通过 StackExchange 徽标。

您可以看到 body 通过 CSS 和 Background（速记）属性设置为白色：

body {
background: white; <-------------
color: black;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 80%;
text-align: center;
}

您可以看到，通过对 7 像素实心黑线使用背景（速记）和边框顶部，页脚 div 更进一步：

#footer {
color: #444;
background: #777; <------------
border-top: 7px solid black; <------------
clear: both;
padding: 15px;
margin-top: 30px;
}

不过，这已经有几年历史了，您可能会发现从 Net Tuts上运行的一些教程（比如这个教程）很有价值。

于 2012-10-22T05:30:07.310 回答