Web Standards Solutions 網頁設計標準規格

CSS版面佈局

以CSS作出雙欄版面佈局

方法A:浮動側欄
  <div id="header">
   header
  </div>
  <div id="sidebar">
   sidebar
  </div>
  <div id="content">
   content
  </div>
  <div id="footer">
   footer
  </div>
  為頁首、頁尾指定樣式
  #header{
   padding: 20px;
   background: #ccc;
  }
  #footer{
   padding: 20px;
   background: #eee;
   clear: right; /*確保頁尾一定會出現在側欄、內容區之後，而不受兩欄的長度變動影響*/
  }
  浮動側欄
  #sidebar{
   float: right;
   width: 30%;
   background: #999;
  }
  真正的欄位
  #content{
   margin-right: 34%;
  }

方法B:雙重浮動
  方法A的缺點是為了浮動側欄，必須在標記原始碼之內把它放在主內容<div>的前面
  <div id="header">
   header
  </div>
  <div id="content">
   content
  </div>
  <div id="sidebar">
   sidebar
  </div>
  <div id="footer">
   footer
  </div>
  #header{
   padding: 20px;
   background: #ccc;
  }
  #content{
   float: left;
   width: 66%;
  }
  #sidebar{
   float: right;
   width: 30%;
   background: #999;
  }
  #footer{
   padding: 20px;
   background: #eee;
   clear: both; /*避開兩邊*/
  }

方法C:浮動主要內容
  <div id="header">
   header
  </div>
  <div id="content">
   content
  </div>
  <div id="sidebar">
   sidebar
  </div>
  <div id="footer">
   footer
  </div>
  #header{
   padding: 20px;
   background: #ccc;
  }
  #content{
   float: left;
   width: 66%;
  }
  #sidebar{
   background: #999;
  }
  #footer{
   padding: 20px;
   background: #eee;
   clear: left; /*避開左側*/
  }
  淒慘的背景
  由於側欄並未指定寬度，因此它想擴到與瀏覽器視窗一樣寬
  #sidebar{
   background: #999;
   margin-left: 70%;
  }
簡單樸素
如果不需要用到背景色彩，那就不必設定邊界了
  #header{
   padding: 20px;
   background: #ccc;
  }
  #content{
   float: left;
   width: 66%;
   margin-right: 6%;
  }
  #footer{
   padding: 20px;
   background: #eee;
   clear: left; /*避開左側*/
  }

方法D:定位
  <div id="header">
   header
  </div>
  <div id="content">
   content
  </div>
  <div id="sidebar">
   sidebar
  </div>
  <div id="footer">
   footer
  </div>
  body{
   margin: 0;
   padding: 0;
  }
  #header{
   height: 40px; /*能夠預測的高度*/
   background: #ccc;
  }
  #content{
   margin-right: 34%;  /*為各欄位留下空間*/
  }
  #sidebar{ /*放進側欄*/
   position: absolute;
   top: 40px;
   right: 0;
   width: 30%;
   background: #999;
  }
  #footer{
   padding: 20px;
   background: #eee;
   margin-right: 34%; /*尾頁問題*/
  }

三人同行
  <div id="header">
   header
  </div>
  <div id="content">
   content
  </div>
  <div id="sidebar">
   sidebar
  </div>
  <div id="sidecolumn">
   sidecolumn
  </div>
  <div id="footer">
   footer
  </div>
  body{
   margin: 0;
   padding: 0;
  }
  #header{
   height: 40px; /*能夠預測的高度*/
   background: #ccc;
  }
  #content{
   margin-right: 24%;  /*為各欄位留下空間*/
   margin-left: 24%;  /*為各欄位留下空間*/
  }
  #sidecolumn{ /*放進側欄*/
   position: absolute;
   top: 40px;
   left: 0;
   width: 20%;
   background: #999;
  }#sidebar{ /*放進側欄*/
   position: absolute;
   top: 40px;
   right: 0;
   width: 20%;
   background: #999;
  }
  #footer{
   padding: 20px;
   background: #eee;
   margin-right: 24%; /*尾頁問題*/
   margin-left: 24%; /*尾頁問題*/
  }

參考資料
  多欄排版的範例：The Layout Reservoir(http://www.bluerobot.com/web/layouts)
  雙欄局步驟：From Table Hacks to CSS Layout(http://www.alistapart.com/articles/journey)
  各種佈局資源：CSS Layout Techniques(http://www.glish.com/css/)
  佈局示範：Little Boxes(http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html)
  排版：CSS Zen Garden(http://www.csszengarden.com/)

外框模型問題：以width屬性而言，IE5會將margin,border,padding包含在width內，而其他瀏覽器則是外加(符合W3C規定)
眼見為憑：
  #siderbar{
   width: 200px;
   padding: 10px;
   border: 5px solid black;
  }
  以IE5來說，sidebar元件的內容寬度是170px(200-10*2-5*2)，總寬度是200px
  其他的，sidebar元件的內容寬度是200px,總寬度是230px(200+10*2+5*2)
外框模型補丁：Tantek Celik 外框模型補丁(http://www.tantek.com/CSS/Examples/boxmodelhack.html)
  #siderbar{
   padding: 10px;
   border: 5px solid black;
   width: 230px; /*給IE5用*/
   voice-family: "\"}\""; /*以下IE5會認為宣告結束*/
   voice-family: inherit;
   width: 200px; /*實際值*/
  }
  html>body #sidebar{ /*對Opera友善：補丁的額外宣告*/
   width: 200px;
  }

虛假的欄位(http://www.alistapart.com/articles/fauxcolumns/)
垂直伸展
作弊:利用背景圖檔
  body{background: #ccc url(tile.gif) repeat-y 50% 0;}