Question

我想在x上重复页眉和页脚背景。因此它需要任何页面分辨率的所有宽度大小。

这就是我想要它的样子： Concept

这是如何显示的： Template

我正在使用960 gs，每个div限制为960px。有没有办法通过x扩展div的颜色？

在此处查看项目： http://gabrielmeono.com/yonature/

Answer 1

是的，有

你必须将页面分成3个部分：页眉，正文，页脚我们要做的是用一点CSS创建div。我们将有一个div一直到网站的两侧，以及一个居中的div。我将向您展示如何为标题执行此操作，并为主体/页脚创建相同的内容：

<html>
<head>
<style type="text/css">
html{}
body { margin: 0px; width: 100%; }
#headerCenter { float: left; width: 100%; text-align: center; color: #00AA00; height: 120px; }
#headerContainer { margin: 0 auto; width: 960px; }
#header { width: 100%; float: left; height: 120px; }
</style>
</head>
<body>
<div id="headerCenter">
    <div id="headerContainer">
        <div id="header">HEADER</div>
    </div>
</div>

.. same for body/footer....
</body>
</html>

所以诀窍是：

一个div（#headerCenter），它贯穿整个页面。我们将为它定义高度，绘制它的背景，并设置'text-align：center;'
我们在里面放了一个'margin：0 auto;'和所需的宽度。这个div没有FLOAT！这将创建一个高度为0的div，放置在父div的中心。
我们把标题放在里面。我们可以设置浮动左等...宽度可以是100％（或960px）

对于正文和页脚重复此操作

另一种方法btw正在使用HTML表格，我不喜欢用于布局。如果你在设置它时遇到任何问题，请告诉我，我会为你做布局

CSS：背景颜色问题

1 个答案: