如何爲此做CSS？

#header需要/header.png

這是750px寬的背景圖像。

我只是不確定如何爲這個設計做CSS。

#footer底部（不是絕對的）

2009-12-12 steven

你需要把整個事情的包裝DIV和設置它的寬度750px，邊距：20像素自動;將整個事物水平居中。在這種類型的佈局有一個體面的寫法https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5314471.html?tag=rbxccnbtr1

2009-12-12 02:10:02

貌似只是一個width: 750px; height: 200px; margin: 0 auto; background:url('/header.png')格爲100％（注：我猜身高，你沒有說）......

如果那不是你在設計的哪一部分出現問題時遇到的問題？

2009-12-12 02:04:14 fyjham

我該如何居中整件事，並把#nav放在#header下#nav下#nav？ – steven

'margin：0 auto'應該居中。 –

只要把'width：750px; margin 0 auto;'在一個環繞標題，導航和內容的環繞div上。無論是或者你可以把它放在#nav #header和#content的全部。 – fyjham

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

2009-12-12 02:08:21 WisdomFusion

你可以，並在大多數情況下，可能應該避免使用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並不是很重要，但是您將盡可能少地使用這些元素，同時保持語義完整性並向備用瀏覽代理提供完整和準確的信息。

2009-12-12 02:48:07

回答