9

http://www.stumbleupon.com/

http://www.mixx.com/

这两个网站都有一个横跨页面的背景标题，而内容居中并覆盖了大约 80% 的宽度，并且与布局的其余部分完美对齐。

我对这两个站点特别感兴趣，因为标题有两种背景颜色，而不仅仅是一种。

我相信网上有很多教程，但我没有搜索关键字。

4

9 回答 9

7

它background-image设置为body带有属性background-repeat：

background-repeat: repeat-x;

更多：http ://www.w3schools.com/css/pr_background-repeat.asp

编辑：至于使您的内容居中-<em>我是这样做的：

<body>
<div id="wrapper">
  <!-- here is wrapper *everything* else -->
</div>
</body>

然后将width包装器设置为值（主要是960px）。然后，当您将其边距设置为 时0 auto，它会自行居中。

#wrapper{
  margin: 0 auto;
}
于 2010-02-22T09:12:40.680 回答
7

分析stumbleupon.com：

“标题”实际上由两个div 组成：wrapperHeader和wrapperNav. 这两个有不同的背景颜色。这些 div 只有一个子元素，每个子元素都有 CSS 属性

margin: 0 auto

这导致水平居中。

此属性也分配给内容 div，因此标题、导航和内容始终居中。当然，这需要为这些元素设置一些宽度。

结构如下所示：

<div id="wrapperHeader">
    <div class="" id="header">
            <!-- mnore stuff here, like logo -->
    </div>  <!-- end header -->
</div>
<div id="wrapperNav">
    <ul id="navMain">
        <li class="discover first"><a href="/discover/toprated/">Discover</a></li>
        <li class="favorites"><a href="/favorites/">Favorites</a></li>
        <li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
    </ul> <!-- end navMain -->  
</div>
<div id="wrapperContent">
    <div class="clearfix" id="content"> 
    </div> <!-- end content -->
</div>

如果您获得了Firebug for Firefox，您可以轻松地自己分析元素。

于 2010-02-22T09:17:17.490 回答
4

添加背景图像有两个缺点：

  1. 每次你想改变你的标题的颜色时，你必须打开你的 Photoshop 并在那里改变颜色，然后在你的 CSS 中再次改变它。

  2. 现在您希望页眉的背景颜色在页面上延伸，但如果您也想对页脚进行此操作怎么办？

最简单的解决方案是这个：

（您不仅创建了一种在页面上拉伸颜色的简单方法，能够在所有页眉内容和页脚中使用不同的颜色，而且还避免了 IE 的双边距问题（当您在相同的元素）。

索引.html：

   <html> 
    <body id="body"> 
    <div id="header"> 
        <div class="container"> 
            <!-- header's content here -->
        </div><!-- .container --> 
    </div><!-- #header --> 
    <div id="content"> 
        <div class="container"> 
            <!-- main content here -->
    <div id="footer"> 
        <div class="container"> 
            <!-- footer's content here -->
        </div><!-- .container --> 
    </div><!-- #footer --> 
    </body> 
    </html>

样式.css：

.container {
    margin: 0 auto;
    overflow: hidden;
    padding: 0 15px;
    width: 960px;
}

#header {
    background: #EEE;
}

#content {
    background-color: #F9F9F9;
}

#footer {
    background-color: #333;
    color: #BBB;
    clear: both;
}

在此示例中，div.container将元素居中并赋予它们宽度，并且背景颜色可以跨越页面，因为 #header, #content并且#footer没有宽度。以后只需要对里面的div应用margin和padding，以后就.container可以省去很多IE的问题了。

于 2010-02-22T09:30:26.993 回答
2

我不敢苟同，有一种简单的方法可以做到这一点。兼容 Google Chrome 和 Firefox，IE 未经测试。

在您的 CSS 文件中：

body{
    overflow-x:hidden;
}

div#headerbg{
    width:110%;
    margin-left:-20px;
    background-color:black;
}

现在只需在您的 HTML 文件中使用它。您可以为此添加定位和其他内容。

于 2012-05-17T14:26:57.493 回答
1

您可以使用 1px 宽度的背景图像，并在水平方向设置背景重复。

background-image:url('paper.gif');
background-repeat:repeat-x;

然后按照您喜欢的方式调整您的内容。

于 2010-02-22T09:13:28.200 回答
1

这只是一个固定宽度的布局，但具有自动的左右边距。如果页面大小比内容宽度宽，这样做的效果是使整个内容块居中。

背景只是设置为重复图像（repeat-x），以使其看起来像菜单元素实际上扩展了页面的整个宽度。

于 2010-02-22T09:14:25.030 回答
0

我认为您在谈论 100%/80% 宽度差异....

这应该可以帮助您入门：

<div id="header" style="width:100%; margin: 0px;">
   <!-- header content -->
</div>
<div id="content" style="display: block; width: 80%; margin: 0px auto">
   <!-- content -->
</div>

内容上的 margin: auto 使块居中。

Liike Adam 说，添加背景重复以使其具有图形上令人愉悦的元素。

于 2010-02-22T09:14:40.207 回答
0

使用 CSS 2，您无法拉伸背景图像。没有用于设置背景图像尺寸的属性。您可以在 X、Y 或两个轴上重复它。

CSS 3 将允许这种拉伸。

于 2010-02-22T10:15:05.407 回答
0

非常简单，没有一大堆喧嚣。

将其粘贴在 - body - 和 - div 容器之间 - 你也可以在其中拥有任何你想要的东西，但在我的页面上是这样的：（我试图让它包装，不行，只需复制和粘贴。）

<body>

<div id="bv_ImageMap1" style="margin:0;padding:0;position:absolute;left:0px;  top:187px;width:100%;height:5px;text-align:left;z-index:0;"> <img src="files/IMG_2.jpg"  id="ImageMap1" alt="" usemap="#ImageMapImageMap0" border="0" style="width:100%;   height:5px;">

<map name="ImageMapImageMap0">
</map>
</div>

<div container>

然后更改顶部所需的信息：px 高度： _px img src="yourfile/yourimg.jpg 和重要不要忘记下一个高度：_ _px

任何地方都不需要其他任何东西。尝试一下。

于 2014-01-30T02:26:06.173 回答