網頁布局及樣式例子1

 <style type="text/css">
<!--
body  {
 font: 100% Verdana, Arial, Helvetica, sans-serif;
 background: #666666;
 margin: 0; /* 最好將 body 元素的邊距和填充設置為 0 以覆蓋不同的瀏覽器默認值 */
 padding: 0;
 text-align: center; /* 在 IE 5* 瀏覽器中，這會將容器居中。文本隨后將在 #container 選擇器中設置為默認左對齊 */
 color: #000000;
}
.thrColFixHdr #container {
 width: 780px;  /* 使用比最大寬度 (800px) 小 20px 的寬度可顯示瀏覽器界面元素，并避免出現水平滾動條 */
 background: #FFFFFF;
 margin: 0 auto; /* 自動邊距（與寬度一起）會將頁面居中 */
 border: 1px solid #000000;
 text-align: left; /* 這將覆蓋 body 元素上的“text-align: center”。 */
}
.thrColFixHdr #header {
 background: #DDDDDD;
 padding: 0 10px 0 20px;  /* 此填充會將出現在它后面的 div 中的元素左對齊。如果 #header 中使用的是圖像（而不是文本），您最好刪除填充。 */
}
.thrColFixHdr #header h1 {
 margin: 0; /* 將 #header div 中最后一個元素的邊距設置為零將避免邊距重疊（即 div 之間出現的無法解釋的空白）。如果 div 周圍有邊框，則不必將邊距設置為零，因為邊框也會避免邊距重疊 */
 padding: 10px 0; /* 使用填充而不使用邊距將可以使元素遠離 div 的邊緣 */
}
.thrColFixHdr #sidebar1 {
 float: left; /* 由于此元素是浮動的，因此必須指定寬度 */
 width: 150px; /* 在符合標準的瀏覽器中或者在 Internet Explorer 中的標準模式下，此 div 的實際寬度除了包括寬度外，還包括填充和邊框 */
 background: #EBEBEB; /* 將顯示背景色，其寬度等于欄中內容的長度，*/
 padding: 15px 10px 15px 20px; /* 填充使 div 的內容與邊緣保持一定的距離 */
}
.thrColFixHdr #sidebar2 {
 float: right; /* 由于此元素是浮動的，因此必須指定寬度 */
 width: 160px; /* 在符合標準的瀏覽器中或者在 Internet Explorer 中的標準模式下，此 div 的實際寬度除了包括寬度外，還包括填充和邊框 */
 background: #EBEBEB; /* 將顯示背景色，其寬度等于欄中內容的長度，*/
 padding: 15px 10px 15px 20px; /* 填充使 div 的內容與邊緣保持一定的距離 */
}
.thrColFixHdr #mainContent {
 margin: 0 200px; /* 此 div 元素的左邊距和右邊距會在頁面兩側上創建兩個外部欄。無論側欄 div 中包含多少內容，欄內的空間都將保留。如果您希望在每個側欄中的內容結束時，用 #mainContent div 的文本填充側欄內的空白，可以刪除此邊距。 */
 padding: 0 10px; /* 請記住，填充是 div 方塊內部的空間，邊距則是 div 方塊外部的空間 */
}
.thrColFixHdr #footer {
 padding: 0 10px 0 20px; /* 此填充會將它上面 div 中的所有元素左對齊。 */
 background:#DDDDDD;
}
.thrColFixHdr #footer p {
 margin: 0; /* 將腳注中第一個元素的邊距設置為零將避免出現可能的邊距重疊（即 div 之間出現的空白）*/
 padding: 10px 0; /* 就像邊距會產生空白一樣，此元素上的填充也將產生空白，但不會出現邊距重疊問題 */
}
.fltrt { /* 此類可用來使頁面中的元素向右浮動。浮動元素必須位于頁面上要與之相鄰的元素之前。 */
 float: right;
 margin-left: 8px;
}
.fltlft { /* 此類可用來使頁面上的元素向左浮動 */
 float: left;
 margin-right: 8px;
}
.clearfloat { /* 此類應當放在 div 或 break 元素上，而且該元素應當是完全包含浮動的容器關閉之前的最后一個元素 */
 clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
-->
</style><!--[if IE 5]>
<style type="text/css">
/* 將 IE 5* 的 css 方塊模型修正放在這個條件注釋中 */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>