頁面大小固定在中間寬度

Question

我不確定它的名稱，但是有人可以告訴我如何製作一個CSS樣式表，使所有頁面在給定寬度內適合，然後添加陰影類型效果，使得它看起來像一個頁面？

事情是這樣的： http://www.news.com.au/

所以，你有白色（或灰色，或什麼都）邊界的兩邊，內容被放置在「邊界」之內。

編輯： 我曾嘗試這種風格，但它把在左上角的框：

style> 
    html, body { 
     background-color: #F0F0F0; 
     width: 100%; 
     margin: 0 auto; 
     font-family: "Trebuchet MS", Helvetica, sans-serif; 
     font-size: small; 

    } 

    #wrapper { 
     background-color: #fff; 
     width: 920px; 
     padding: 20px; 
     -moz-box-shadow: 0 0 5px #888; 
     -webkit-box-shadow: 0 0 8px#888; 
     box-shadow: 0 0 8px #888; 
    } 
</style> 

我的用法是：

<div id="wrapper"> 

    <h1>Location Search</h1> 

    <h2>Simple Lookup</h2> 

    .... 

</div> 

Answer 1

它可以是一個形象，但你可以用盒子陰影做出類似的東西。

我認爲這只是一個寬度爲960px和邊距的包裝：0 auto;和一點盒子陰影。所以是這樣的：

CSS：

html,body{ 
background-color: #F0F0F0; // a little darker then the wrapper. 
width: 100%; 
padding: 0; 
margin: 0 auto; 
} 

#wrapper{ 
background-color: #fff; 
width: 920px; // because of padding. 
margin: 0 auto; 
padding: 20px; 
-moz-box-shadow: 0 0 5px #888; 
-webkit-box-shadow: 0 0 5px#888; 
box-shadow: 0 0 5px #888; 
} 

和這樣的HTML。

HTML：

<div id="wrapper"> // you just put this div around all of your other divs so it makes it one big div. 

... 
Some divs for the layout. 
... 

</div> 

希望這有助於你。