semovy

過渡的(Transitional):要求非常寬松的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)。完整代碼如下： 嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如
。完整代碼如下： 框架的(Frameset):專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD。完整代碼如下： body { background-color: #999999; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif; } div#outer { width: 80%; background-color:#FFFFFF; margin-top: 50px; margin-bottom: 50px; margin-left: auto; margin-right: auto; padding: 0px; border: thin solid #000000; } div#header { padding: 15px; margin: 0px; text-align: center; } div#nav { width: 25%; padding: 10px; margin-top: 1px; float: left; } div#main { margin-left: 30%; margin-top: 1px; padding: 10px; } div#footer { padding: 15px; margin: 0px; border-top: thin solid #000000; } 示例：http://meadhra.com/CNET/040804/figure-b.html div#outer是其中的一種樣式，它是這一技術的關鍵。這就是前面提到過的以div取代表格的樣式，它創建了居中的盒子，而這個盒子成了包容該頁面所有內容的容器。將寬度設置為80%的規則設定了該div的寬度，就跟表格標簽的相應屬性規定該表格的寬度一樣。與此相類似，background-color:#FFFFFF為div建立了一個白色的背景，就如同表格中bgcolor="#FFFFFF"屬性為表格設置白色背景一樣。margin-top: 50px and margin-bottom: 50px則用頂端和底端的空白來取代表格中用來造成垂直空間的空白段落。 這一技術的關鍵在于，外部div的中心要安排合適。這里存在一個難題，可以說是我們面臨的一個挑戰，即div沒有像align="center"這樣一個屬性，這與表格不同，表格中有這樣一種屬性。你可以在div的母元素（在本案例，指< body >標簽）中使用text-align: center來將外部div置于中心位置。盡管除了正文以外，大多數瀏覽器還會為一些諸如div的塊元素使用該隊列，但是我們有證據可以證明它是對排列正文這一屬性的誤用，而且它會使問題復雜化，就如同你創建一些額外的樣式來使那些已按正常標準對齊的文字重新回到左邊一樣。 用CSS來將塊元素置于中心位置的正確方法是這樣設置：margin-left: auto，margin-right: auto。這就指示瀏覽器自動計算頁面兩邊合適的空白寬度，從而將div置于中心。border: thin solid #000000這一規則在外部div的周圍添加了一個邊界，這是因為用CSS添加很容易，而如果用表格的話就很難了。CSS編碼中的其它部份則規定了div的頁眉，頁腳，nav，以及主要內容。 div#header和div#footer則設定了那些div的頁邊空白以及填料。此外，div#header包含了text-align: center這一規則，它可以將頁眉文本置于中心位置，div#footer則包含了border-top: thin solid #000000這一規則，它可以創建一個圍繞該div的頂端邊緣的邊界，而在基于表格的版面設計中，與它相對應的則是位于頁腳上方的一些水平線。 在這個居中的盒子的中央，div#nav和div#main建立了兩個縱列。在div#nav樣式中，float: left這一規則將div推到它的母元素（外部div）的左邊，而width: 25%這一規則將該div的寬度設置為它的母元素的25%。由于該nav div被移到了左端，其寬度也被限定了，這就為主要的div留下了活動空間，讓它可以移到該nav div的右邊，這樣就取得了兩個縱列的效果。div#main樣式包含了左邊頁面空白30%的規則，以讓主要文本排列在一個整齊的縱欄中，而不是分散開來，甚至散到該nav縱欄外面。主要的div左邊的空白頁面比nav div中左邊空白頁面的寬度稍稍大一點