Question

#header需要/header.png

的背景图片

宽750px。

我只是不确定如何为这个设计做CSS。

#footer在底部是100％，（不是绝对的）

Answer 1

你需要把整个东西放在一个包装div中，并将它的宽度设置为750px，margin：20px auto;使整个事物水平居中。在https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5314471.html?tag=rbxccnbtr1

这种类型的布局上有一个不错的文章

Answer 2

看起来只是一个带width: 750px; height: 200px; margin: 0 auto; background:url('/header.png')的div（注意：我猜到身高，你没说）......

如果这不是你遇到的问题，那么问题的具体部分是什么？

Answer 3

#header { margin: 0 auto; width: 750px; height: auto; background: url('/header.png'); }
#footer { width: 100%; height: auto; }

Answer 4

您可以，并且在大多数情况下可能应该避免使用DIV。您可以指定H1元素本身的背景是该图像。


h1 { 
background: transparent url('/header.png') no-repeat scroll;
width:750px;
margin 0 auto;
}

我在您的模型中注意到某些内容，表明您可能希望不显示标题文本。如果您的图片是“文本”，则可以使用以下代码替换上述代码：


h1 img {width:750px; margin 0 auto;}

然后只需将图片放在您的来源中就像这样：


<H1><IMG SRC="/header.png" ALT="The header text"></H1>

其中ALT标记将包含图像是标题图形的一些指示，以及图像的文本内容。这是有效的，语义正确的，可访问的HTML。

这个特定的元素不使用包装器DIV并不是非常重要，但是你会尽可能少地使用它，同时保持语义完整性并提供完整和准确的信息替代浏览代理商。