極客書

CSS - Layouts

希望您對HTML表非常熟悉，並且能夠高效地使用HTML表設計頁面布局。但是您知道CSS還提供了很多控制項來定位文檔中的元素。既然CSS是未來的潮流，爲什麼不學習和使用CSS來代替表格來進行頁面布局呢？

下面的列表收集了這兩種技術的一些優缺點;

  • 大多數瀏覽器都支持表，而CSS的支持正慢慢被採用。

  • 當瀏覽器窗口大小發生變化時，表更容易被原諒——改變其內容並包裝以適應相應的變化。CSS的定位往往是精確的，而且相當不靈活。

  • 表比CSS規則更容易學習和操作。

但這些論點都可以顛倒過來;

  • CSS對於Web文檔的未來至關重要，並且將被大多數瀏覽器所支持。

  • CSS比表更精確，允許您的文檔按預期的方式查看，而不必考慮瀏覽器窗口。

  • 跟蹤嵌套表可能真的很麻煩。CSS規則往往組織良好，易於閱讀，易於更改。

最後，我們建議您使用任何對您有意義的技術，並使用您所知道的或以最佳方式呈現文檔的技術。

CSS還提供table layout屬性，使表的加載速度更快。下面是一個例子−

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

你會注意到大桌子的好處。對於傳統的HTML，瀏覽器在最終呈現表格之前必須計算每個單元格。但是，當您將表布局算法設置爲fixed時，它只需要在呈現整個表之前查看第一行。這意味著您的表需要有固定的列寬和行高。

Sample Column Layout

下面是使用CSS−創建簡單列布局的步驟;

設置完整文檔的邊距和填充，如下所示−

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

現在，我們將用黃色定義列，稍後，我們將把此規則附加到<div>&減號;

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

到目前爲止，我們將有一個黃色正文的文檔，所以現在讓我們在level0−中定義另一個除法;

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

現在，我們將在level1中再嵌套一個division，並且只更改背景顏色&負;

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

最後，我們將使用相同的技術，在level2內嵌套level3分區，以獲得右列的可視化布局−

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

按如下所示完成原始碼;

Live Demo 
<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

類似地，您可以在頁面頂部添加頂部導航欄或廣告欄。

它將產生以下結果&負;