DIV CSS 佈局教程網

網頁制作poluoluo文章簡介：本文提供了關於表單元素和樣式的更多詳細內容，以及在真實的web應用程序設計中表單是如何運用的。

引言

HTML表單一文中介紹了關於表單的創建和樣式化的基礎內容。本文提供了關於表單元素和樣式的更多詳細內容，以及在真實的web應用程序設計中表單是如何運用的。

本文中引入的概念

這一部分提供了關於表單實現和界面布局的新信息。

規則和標記超載

大量使用class和id標記是違反KISS（保持簡潔）准則的（在CSS盒模型與基礎布局一文中已經解釋過了）。然而，難度大的布局卻經常會在級聯上遇到很多沖突——這些沖突最簡單的解決方法就是在元素中添加標記，以及編寫包含若干選擇符的樣式表規則。

難度最大的布局中到處都是邊緣情況，對這些邊緣情況最好的處理辦法就是給元素賦一個id，來定義一個狹義而唯一的環境。

新表單域元素

通常一個實際的表單所需要的不僅僅是按鈕和文本輸入區域，因為我們常常會需要按照選項來構建用戶響應。HTML為有這種要求的設計人員提供了若干選項。

表單設計原則

對於網站來說，表單常常是用戶交互和數據搜集的焦點所在。因此，表單對於一個網站的成功與否是非常關鍵的，這就要求我們對表單的設計給予高度的關注。

三分法則

最容易吸引網站用戶的注意力的是浏覽器畫布（以及穿過布局的線條）上的四個特定點。本文將向你介紹這種現象，並提供一些建議，告訴你如何通過CSS來最大程度地利用這種現象。

Grids柵格

前面的文章中我們介紹了如何確保排版的一致性以及最大化地利用空白。本文中我們會更進一步地闡述如何利用em單位來實現一定程度的布局一致性，這種一致性只有通過CSS才能實現。

平台支持等級

商業項目中常見的一種要求是，一個被認可的網站設計應當在一種或多種浏覽器上渲染效果一致。本文將會對這種要求的原因，效果，以及用於滿足這種要求的處理方法進行簡要的探討。

一張簡單的聯系表單

通過聯系表單，網站訪客可以直接將e-mail發送到站內信箱中，聯系表單的使用是非常普遍的，這是因為：只要用戶具有激活的e-mail地址，他就可以使用聯系表單，而且聯系表單可以很方便地結合到專門的郵件文件夾中。

在前面的表單一文中，所涉及到的標記就是用來創建這樣的表單的，我們還對這個表單進行了一些修飾：

標記

<form id="contactForm" method="post" action="/cgi-bin/service_email_script.php">
  <ul>
    <li id="nameField" class="required"><label for="realname">Name:</label><input type="text"
      name="name" value="" class="medium" id="realname" /><span
      class="note">required</span></li>

    <li id="addressField" class="required"><label for="address">Email:</label><input
      type="text" name="email" value="" class="medium" id="address" /><span 
      class="note">required</span></li>
    <li id="subjectField"><label for="natureOfInquiry">General
    subject:</label>

      <select name="subject" class="medium" id="natureOfInquiry">
        <option value="support">Support</option>
        <option value="billing">Accounts & billing</option>
        <option value="press">Press</option>

        <option value="other_q">Other questions</option>
      </select>
    </li>
    <li id="acctTypeField"><label for="acctNone">Account type:</label>

      <fieldset>
        <label for="acctGold">Gold</label><input type="radio" name="acct_type" id="goldAcct"
          class="rInput" />
        <label for="acctSilver">Silver</label><input type="radio" name="acct_type"
          id="acctSilver" class="rInput" />
        <label for="acctBronze">Bronze</label><input type="radio" name="acct_type"
          id="acctBronze" class="rInput" />

        <label for="acctNone">None</label><input type="radio" name="acct_type" id="acctNone"
          class="rInput" checked="checked" />
      </fieldset>
      <span class="note">required</span>
    </li>

    <li id="availabilityField">
      <label for="availability">My account is unavailable:</label><input type="checkbox"
        name="is_down" id="availability" class="rInput" /></li>
    <li id="messageField"><label for="messageBody">Comments:</label><textarea name="comments"
      cols="32" rows="8" class="long" id="messageBody"></textarea></li>

    <li class="submitField"><input type="submit" value="Send" class="submitButton" /></li>
  </ul>
</form>

由之前的表單變化而來

除了包含了幾個新元素之外，這段標記之中還添加了許多class和ID，這些class和ID可以在樣式表中加以引用。這樣就可以對每個表單，表單域/值組，以及表單域分別加以引用，而不用管上下文。

此外，通過新的標志符，設計師就可以將必須填寫的表單域和不是必填的表單域區分開來。

最後，這段代碼中還有一些新的類，用來提示自身所在的表單元素應該顯示的信息的數量和類型。通過這些類，就可以將布局細節同時應用到多個任意元素上。

網頁制作poluoluo文章簡介：本文提供了關於表單元素和樣式的更多詳細內容，以及在真實的web應用程序設計中表單是如何運用的。

顯而易見的缺點

由於該示例表單只具備最基本的內容，我們用標題替換掉了之前文章的表單中的legend元素。

標簽是最適合用在fieldset中的，而不是label（label更多地是與單個控件相關）。在本例中我們完全忽略掉了legend元素，因為它很難樣式化。

另外還需要注意的是，在源順序中，表單域的“required”標簽最好是放在表單域自身之前，以滿足屏幕閱讀器用戶的需要。然而，為了對這些項目進行合理安排，position屬性（不屬於本文的討論范圍）是必需的。因此，“required”標簽在源順序中是放在其相關控件之後的（即使是在同一個上下文中）。

新表單域？什麼東西？

文本框和提交控件在前面的文章中已經介紹過了。就如上面所說的，我們會遇到很多實際用例，在這些情況中要讓用戶能夠選擇兩個或兩個以上的選項。下面我們將簡要地談一下涉及這些操作的元素。

選擇類型：input type="checkbox"

      …
      <label for="availability">My account is unavailable:</label><input type="checkbox"
        name="is_down" id="availability" class="rInput" />

選擇加入或選擇退出這類問題通常都是通過這些控件之一來實現的。此外，這類控件還可以用在需要從幾若干選項中任選幾種的時候，比如說，一張個人愛好清單。

在互斥選項中選擇：input type="radio"

      …
      <label for="acctNone">Account type:</label>
      <fieldset>
        <label for="acctGold">Gold</label><input type="radio" name="acct_type" id="goldAcct"
          class="rInput" />
        <label for="acctSilver">Silver</label><input type="radio" name="acct_type"
          id="acctSilver" class="rInput" />

        <label for="acctBronze">Bronze</label><input type="radio" name="acct_type"
          id="acctBronze" class="rInput" />
        <label for="acctNone">None</label><input type="radio" name="acct_type" id="acctNone"
          class="rInput" checked="checked" />
      </fieldset>

通過一組單選框，你可以把若干選項排列在一起，在這些選項中只能選擇一個。比如，在1-5或1-10的等級范圍內指定一個數值，這個例子直觀地闡述了radio控件的使用。

跟其它表單控件不同的是，radio控件不僅是允許，更是要求各個相互關聯的控件的name相同。

這些元素的得名是來自於常見的機械式調音的汽車收音機界面。跟那些常見於數字調音收音機的由程序控制的預設不同，機械“預設”按鈕只要一按下，就會從一系列波段中將收音機聚焦在要收聽的那個波段上。

checkbox和radio控件都有checked屬性，只要設置了該屬性，就會在初次渲染的時候默認激活該控件。

關於是用radio控件，還是checkbox控件的問題，最好是在考慮完各種不同因素後再作決定。如果你想讓用戶對一項主觀性的選擇（比如，加入郵件列表）進行確認，那麼checkbox控件可能是最好的選擇。如果你想讓用戶在兩個客觀性的選項（比如說性別）中做出選擇的話，就應該用radio控件。

網頁制作poluoluo文章簡介：本文提供了關於表單元素和樣式的更多詳細內容，以及在真實的web應用程序設計中表單是如何運用的。

在選項太多的時候：select/option

    …
    <label for="natureOfInquiry">General
    subject:</label>
      <select name="subject" class="medium" id="natureOfInquiry">
        <option value="support">Support</option>
        <option value="billing">Accounts & billing</option>

        <option value="press">Press</option>
        <option value="other_q">Other questions</option>
      </select>

select和option元素跟一系列radio控件的效果差不多，但占的空間卻要少得多。是否用select元素來代替一堆radio控件，這通常是關系到如何使用用戶界面空間的問題；對於電子商務網站裡的一長串地理區域的列表或部門列表這樣的內容，一般都是用select元素比較好，而簡短的選項（比如，是/否，真/偽，年齡段，收入范圍）則應該用radio控件來排列。

慎密的自測表明，操作select列表所需的運動控制水平是很高的，但隨著其包含的option數量的增加，所需的控制水平的增長是很微小的。實際結果就是，簡短的互斥選項列表最好是采用帶有適當label的radio控件的形式。

將控件系列分組：fieldset

fieldset元素最重要的目的就是為一組緊密相關的控件劃分一個單獨的語境（比如將一組text控件歸為電話號碼，將select元素歸為日期，等等。）。

從頭開始，一步步制作出最終表單效果

既然本文所涉及到的新概念已經概述完了，現在我們就該來看一看實際的應用——下面的十二個示例全面包含了Web表單開發過程中遇到的各種設計概念和樣式化問題。

強烈推薦讀者將示例材料保存到自己的硬盤上，並對其中的樣式表規則進行嘗試。

這些示例按照源代碼順序逐漸深入，而不是按照樣式表的制作順序。之所以這樣做的原因和含義將在本文後面部分進行討論。

示例1

我們從html { margin: 0; padding: 0; }規則開始，第一步是對包含該表單的頁面的body進行配置。

鏈接：

• 幾乎未經樣式處理過的頁面
• 應用了body樣式之後

新樣式：

body { 
  margin: 0;
  padding: 1.714em;
  background-image: url(images/bg_grid.gif);
  font-size: 14px;
  font-family: Helvetica,Arial,sans-serif;
  line-height: 1.714em;
}

示例1：背景考慮因素

• 在XHTML與適當的Content-Type一起提交給能夠對其進行正確支持的用戶代理的情況下，默認的頁面margin和/或padding是在html元素中渲染的。
• 為了避免上一項中所描述的情況以外的其它情況，應該在該頁面周圍加上10px的空隙；Opera將這種空隙規定為padding值，而其它主流浏覽器將它（有點違反直覺）規定為margin值。本示例中的樣式表對最終效果進行了校正。
• 雖然許多可訪問性專家反對14px的字號，對在樣式表中其它地方指定的各種邊框和字體屬性來說，這種字號卻是不可分割的一部分，這些屬性絕大部分都采用了1em的七分之幾。本文末尾附有一張分數到小數的轉換表，如果你想要更深入地了解本文中用到的運算的話，可以自行參考。
• 之所以選擇14px的值是因為，要使正文能夠被幾乎所有矯正視力的人閱讀，14px是最小的字號。
• 由於本文的目的之一是闡述如何實現一致性最好的柵格，本示例的頁面采用了網格寬度為24px的柵格背景。

示例2

現在頁面容器已經做好了，接下來的幾個步驟就是改變或刪除用戶代理樣式。

鏈接：

• 樣式化原始標題並刪除不想要的空隙

新樣式：

h3 {
  margin: 0 0 1.2em 0;
  border-bottom: .05em solid rgb(0,96,192);
  font-size: 1.429em;
  line-height: 1.15em;
}

form {
  width: 35.929em;
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

示例2：背景考慮因素

• 標題的字號系列因平台而異；然而，默認值始終是與未經樣式處理過的段落文本上使用的medium值成比例的，並通過級聯而繼承。此處設置的值是為了改變默認的比例。
• 對於頁面上的第一個標題來說，用h1是最好的；但此處忽略了該規則，因為在商業環境下，網站的標題常常是頁面上的h1，而頁面標題在標題層級上就相對要低一些。在許多情況下，這種表單的重要性是與同一文檔中其它內容或表單的重要性相同的。

• 對h3進行樣式化的目標是創建24像素高的內容框，下面要緊跟24像素的空隙，也就是：

  (((14 × 1.429) × 1.15) + (20 × .05)) ≈ 24
  
  14 * 1.429 ≈ 20; 20 * 1.15 == 23; 20 * .05 == 1;

  (20 × 1.2) = 24

• 如果想對元素進行適當的對齊，而不用依賴定位的話，對form或列表項進行width賦值是必須的。此處設置的值會產生一個503像素的靜態值；剩下的一個像素的差距（給定最小柵格單位24像素）是由於取整和反鋸齒造成的誤差。
• 列表的默認用戶代理樣式因浏覽器而異。IE為每個列表項設置了一個40像素的左邊距，並將項目符號放在邊距造成的空隙中，而其它的浏覽器將表單內容區塊作為一個整體，在其左側應用填充距。與前面說到的改變body規則中的布局屬性一樣，此處的規則是特別設計來對跨浏覽器的顯示進行校正的。

示例3

……現在來為表單元素創建容器。

鏈接：

• 樣式化列表項(標簽label/值value組的容器)以及fieldset

新樣式：

li {
  clear: both;
  height: 1.714em;
  margin: 0;
}

fieldset {
  height: 1.429em;
  margin: 0 0 -.143em 0;
  border: 0;
}

示例3：背景考慮因素

• 如果將表單看作是一系列的rowsem，那麼對每一個rowsem的高度進行樣式化以便維持柵格，這種需要就變得很明顯了。為IE著想，也為了便於以後額外增添樣式規則，我們將列表項的邊距設為零。
• 由於我們將對表單中的許多元素設置float值，因此這裡將包含列表項設為clear: both，以確保每個列表項都會自然地降到前一個列表項之下。
• 除了刪掉了邊框（邊框是用戶代理默認樣式的一部分）之外，fieldset的布局屬性似乎設置得很武斷。事實上，這些屬性是在跨浏覽器測試之後才設置的，我們還會在示例11的注釋中簡短地討論跨浏覽器測試。
• 現在，我們還沒有設置display或float值，因此fieldset的內容與後面的select控件相沖突了。

創建柵格

良好的平面設計（隨之而來的就是良好的界面設計）最大的優點之一就是元素是按照可預測的間距來鋪設的。這些間距又稱作柵格。

上面已經說過，本示例中的最小柵格單元是24像素的正方形，但比起確保設計元素按照細小而可預測的間距來放置，保證布局的協調性所要考慮的事情更多。真正有效的柵格應當具備如下特性：

• 整個文檔每列之間的空白寬度都是按照一致的網格間距來排列的。
• 同一文檔中的順序的部分與相鄰列中的項目共有上邊距。
• 一個布局中的插圖是按照與列和最小柵格間距的寬度有關的尺寸來裁切或鋪設的。
• 即便頁面內容是一個單列，中間夾雜著float的元素，這種元素在大小和布局方面也是具有共同特征的。

明顯具有這些特征的布局將會更富吸引力，而且更容易理解，因此也將有利於提高網站的可用性。

網頁制作poluoluo文章簡介：本文提供了關於表單元素和樣式的更多詳細內容，以及在真實的web應用程序設計中表單是如何運用的。

在布局中創建柵格框架

大多數專業人員用來創建站點布局構圖的工具是Adobe Photoshop，它的優點之一就是能輕松使用網格線。為了在Photoshop中顯示最小柵格，你可以選擇View → Show → Grid，這樣就能按照在Guides & Grid Preferences中設置的間距來顯示網格了。

通過選擇View → Rulers，切換到移動工具，將標尺上的指針往標尺外拖動，就可以對諸如列之類的東西添加定位標記了。

在樣式表中實現柵格

正如所指出的那樣——示例樣式表中的一些規則強化了這個概念——在一個布局中實施最小柵格最好的方法是依靠em單位。然而，僅靠em是不夠的；設計師在處理替換字號，空隙，以及邊框時還必須保證分數到小數的轉換正確。

在示例樣式表中還展示了另一種實現柵格的技巧：使用與文檔中各種元素和列的大小有關的class標記。如果保持這些標記的一致的話，大部分實施柵格的工作都可以通過它們來完成。

示例4

使元素對齊到柵格就是為標簽和表單控件設置布局屬性。

鏈接：

• 將兩個原始列對齊

新樣式：

label {
  display: block;
  float: left;
  clear: left;
  width: 10.286em;
  overflow: auto;
  padding-right: 1.714em;
  text-align: right;
}

input {
  height: 1.143em;
  border: .071em solid rgb(96,96,96);
  padding: .071em;
  line-height: 1;
}

示例4：背景考慮因素

• 所有的表單控件，包括文本編輯區和標簽，默認情況下都是作為%inline元素渲染的。
• 為了創建一個對齊的左側欄，需要給label元素設置width值；在“嚴格”渲染模式中，padding可以在控件和標簽中制造出空隙。
• 使標簽和控件都排齊到一個共同的邊距，可以使表單變得容易讀懂。這一點將和其它布局要點一起作為三分法則討論的一部分來進行探討——見下文。
• 現在，可以看出該表單存在著明顯的問題：
  • 綁定到radio的label標簽都設置了跟表單中其它label同樣的display和float值。在某些浏覽器中，由於已有的height和overflow值，這些元素會跟它後面的標簽-控件組相沖突。
  • 在Safari 3浏覽器中，本示例的文本控件的邊框會消失。有人懷疑這是一個渲染漏洞。
  • radio控件現在按照它們的源順序擠成了一堆；之所以出現這樣的情況，是因為穿插在其間的label控件現在處在另一個布局環境中了。
• 另一個需要注意的地方是，我們對標簽設置了overflow: auto。我們用在這裡的小技巧也可以這樣描述：假設一個%block元素嵌套在另一個%block元素中，並假設這兩個元素中只有一個元素的height是以靜態單位em來設定的，而em單位對像素的換算是已知的，對另一個元素設置overflow: auto——就是沒有設置height的元素——將會使其擴展到與那個設置了單獨的height值的元素同一高度。這個技巧在示例11中也有用到。

三分法則

圖1：俄勒岡州 Portland的早春景色。我們對這幅照片添加了線條，來闡釋三分法則；注意看右下方的交叉點和形成該交叉點的線條是如何約束視覺活動的。照片作者版權所有，©2000。

在考慮如何實現優秀的布局的時候，有一個普遍存在的規律：如果你將布局或圖片分成三部分，浏覽者的注意力就會集中在分隔這些部分的線條（尤其是線條的交點）上。如果沒有在設計中運用這個奇異的規律的話，你的布局就會顯得不均衡。

對這種現象最簡單的解釋就是，這四條線與符合黃金比例的柵格非常接近，該比例的值接近六分之一。在各種數學領域和自然世界中經常可以遇到黃金比例的例子。

圖2：msnbc.msn.com的屏幕截圖，上面加上了七個金色的矩形。挨在一起的第四和第五個矩形整體說明了頁面布局柵格的本質。

該示例表單的布局中，表單控件都對齊到一個左邊緣，這個左邊緣位於從左邊到假想的表單右邊緣的整個距離的三分之一處，這是經過慎重考慮後出的選擇。而表單的垂直布局就更是如此了——將標題考慮在內，文本區域正符合前面所說的那兩條規律。就算不將標題考慮在內，必填的表單域也符合最重要的那條規律。

對於設計師來說最重要的一點就是，如果在樣式表設計一開始的時候就將三分法則和柵格納入考慮范圍的話，樣式表的規范化工作就會大大簡化。

示例5

為了在水平和垂直方向上維持我們想要的柵格，還需要做一些細節調整。這些調整幾乎完全是裝飾性的。

鏈接：

• 對textarea和select控件外觀的細微調節/a>

新樣式：

textarea {
  height: 4.714em;
  margin-bottom: .286em;
  border: .071em solid rgb(96,96,96);
  padding: 0;
}

select {
  display: block;
  float: left;
  height: 1.571em;
  font-family: Futura,'Century Gothic',sans-serif;
}

option { font-size: 100%; }

示例5：背景考慮因素

• 在Windows平台下，可以對select控件進行修改，以避免倒角效果，因為倒角效果會讓它們看起來與文本控件很相似。
• 一般的提高表單的易用性的方法是，提供一種方式，使用戶能一眼就從表單的各個部分中認出他們的輸入區域在哪裡，因此表單輸入區域的字樣應該跟其它部分的字樣不同。考慮到這一點，本示例保持文本輸入區的字體不變，而改變了其它部分的字體。
• 在對表單中的文本進行渲染的時候，級聯會被忽略，這就是為什麼這裡的樣式表中會有那麼顯眼的一大串文本/字體值的另一個原因。之所以避免用inherit，完全是出於個人喜好和習慣，而不是為了什麼客觀的目的。

示例6

前一個示例對字體渲染進行了一些調整；現在我們接著來完成這個工作。

鏈接：

• 對text控件的外觀進行校正，並調整select控件文本的級聯效果。

新樣式：

input, textarea {
  display: block;
  float: left;
  overflow: hidden;
  font-family: Futura,'Century Gothic',sans-serif;
  font-size: 1em;
}

input, textarea, select {
  margin-top: 0;
  font-size: 100%;
}

示例6：背景考慮因素

• 在本示例中，我們可以看到本文中第一次出現的通過復合選擇符同時賦值的例子，這些值就是專門留到現在來演示復合選擇符同時賦值的。這些規則中沒有border值，這是我們在制作過程中特意這麼做的，這個表單的實際制作過程跟這些示例的出場順序不一樣——我們後面會詳細討論這一點。
• 就像上面提到的，表單中的文本和字體值都不會受到級聯的影響。上述規則對這個問題進行了處理。因此，現在大多數的表單控件的布局都符合我們的要求了。
• 出於對IE6的考慮，表單控件的協調是通過將它們的float值設為left而實現的。之所以設置這些值，是出於本人的習慣，這些習慣是由一些（不愉快的）經歷所造成的，但這些設置不是必須要用的。
• 通過對文本控件指定block值，前兩個示例中出現的Safari浏覽器的渲染問題一下子就被解決掉了。像這樣的怪異問題在對表單進行樣式化的時候是很常見的。
• 正如還沒有對border值進行適當的校正一樣，font-size值也還沒有校正；為文本控件設置的1em值，還有為select控件設置的100%值，都是完全出於主觀的。

示例7

我們需要將各個文本控件的寬度改變一下，不讓它們跟默認值相等。

鏈接：

• 我們修改一下文本控件的寬度，來讓它們變得更容易使用，或者至少變得更協調

新樣式：

.medium { width: 11.714em; }

select.medium { width: 12em; }

.long { width: 20.429em; }

.rInput { border: 0; }

示例7：背景考慮因素

• 重新檢查一下標記源代碼，你就會發現每個控件都帶有一個class——上面的規則中，三個與寬度相關的規則之中有一個是針對文本和控件的，其它的類是針對那些依靠指針/光標輸入，而不是依靠鍵盤輸入的控件的。
• 之所以要為控件設置Class，最大的原因在於IE對高級選擇符的支持很有限。使用選擇符的時候，rInput class可以很方便地用input[type="radio"], input[type="checkbox"]…來代替，如果當前版本的IE並不支持後面這種表達方式的話。
• 對三個文本控件的可能值的設置是完全隨意的，可以由設計員自行決定。在商業環境中，有些設計員提交的設計在布局方面非常特殊，以至於在這裡用到的那些class選擇符可能在功能上完全無效。通過對每個標簽/控件組合設置一個id，就可以為這個表單中的每個元素提供最簡單的引用方式——對那些堅持要全面操控網站布局的方方面面的設計員來說，這對樣式化他們自己的設計是很有用的。

示例8

我們這個表單的提交按鈕等候處理已經等了很久了……

鏈接：

• 對表單提交按鈕的組成部分進行精確調整

新樣式：

.submitButton {
  display: block;
  clear: both;
  width: 7.2em;
  height: 2em;
  margin: 0 0 0 16.8em;
  border: 1px solid rgb(128,128,128);
  padding: 0;
  font-size: 10px;
  text-align: center;
}

示例8：背景考慮因素

• 在對提交按鈕進行樣式化的時候所面對的最大問題就是如何讓它們精確地排列成我們想要的效果。在常見的做法中，只有通過多次對布局和line-height屬性進行微調，才能實現想要的外觀效果；一些開發人員可能會覺得用圖像替代（參見參考書目）或input type="image"要更節省時間一些。
• 乍一看，對提交按鈕設置display: block有點多余——確實也是如此，如果我們僅僅只考慮單個頁面上的單張表單的話。然而，在整個網站中，這種設置可能就不是多余的了；許多網站和應用程序在同一份文檔中會有多個表單，而且其display值各不相同。

示例9

把“required”標簽放到它該去的地方。

鏈接：

• 將“required”標簽對齊到表單中假想的右邊緣去，並修改它們的文本屬性

新樣式：

li.required span.note {
  display: block;
  width: auto;
  float: right;
  color: rgb(128,128,128);
  font-size: .714em;
  line-height: 2.4em;
  font-style: italic;
}

示例9：背景考慮因素

• 在當前狀態下，包含radio控件的fieldset仍然是區塊元素，所以它一直伸展到表單的右邊距處。因此，與該控件集相關的標簽被往下推到該fieldset的底部去了。
• 我們將“required”標簽的width值設置成了auto，從而規定了這些標簽的寬度不能超過自身內容的寬度。
• 仔細看看“required”標簽的排版所用到的運算的話，就會發現一個10像素的字號設置，以及24像素的行間距（等於我們所用到的柵格的最小單元）。
• 用來指示必填區域的結構是出於用戶交互性的考慮而創建的；通過在該表單中應用的若干類，我們就可以用JavaScript來使用戶輸入生效，還可以對那些用戶不能正確使用的標示，區域，和/或標示/控件集上的標簽的式樣進行修改。

示例10

終於該來解決radio控件的沖突問題了，也就是說這些控件跟源順序中位於它們之下的表單域之間的沖突問題。

鏈接：

• • 將radio控件和它們的標簽水平地排成一行

新樣式：

fieldset label {
  margin-right: .25em;
  padding-right: 0;
  line-height: 1;
}

fieldset .rInput { margin-right: .75em; }

fieldset label, fieldset .rInput {
  width: auto;
  display: inline;
  float: none;
  font-size: .857em;
}

li.required fieldset {
  width: 18.857em;
  float: left;
}

示例10：背景考慮因素

• 上述規則的主要效果除了進行裝飾性的調整之外，還有將radio和checkbox控件的display值改回inline。這樣做的目的是為了避免這些控件像表單中其余的input元素一樣浮動而帶來的麻煩。
• 盡管我們為這些相關聯的控件設置了display: inline，它們仍然還是“被替換的”元素：在啟動時（比如說，在浏覽器實際開始對內容進行渲染之前）具有已知的靜態尺寸的內聯元素。因此我們可以對這些元素應用邊距。
• fieldset元素的特殊性質——也就是，它們是專門用在表單中的唯一的%block元素——規定了所有的包含了用戶必須填寫的控件的fieldset必須應用單獨的寬度值。（參見上面的對“required”標簽布局屬性值的討論）。

示例11

我們來做最後一步，將剩下的一點小小的參差對齊，讓整個表單井井有條…

鏈接：

• 對各個控件的布局進行最後的微調

新樣式：

#acctTypeField fieldset {
  padding: .286em 0 0 0;
  line-height: normal;
}

#acctTypeField .rInput { margin-top: .167em; }

#availabilityField label {
  height: 3.143em;
  padding-top: .286em;
  line-height: normal;
}

#availabilityField .rInput { margin-top: .286em; }

#availabilityField, #messageField {
  height: 1%;
  overflow: auto;
}

示例11：背景考慮因素

• 在示例4裡面用到過的overflow的小技巧在這裡又出現了；我們對#availabilityField中label的height設置了一個具體數值，而#messageField中的textarea也是這樣。
• 為了改變其所包含的fieldset的padding值，我們用到了#acctTypeField標記，這種方法很可能是太不靈活了。然而，在編寫某些非常容易受到相鄰元素樣式規則的影響的樣式規則時，進行一些微妙的處理是必需的。
• 在這個樣式表代碼塊中的其它規則都是對布局做微細調整用的，所有這些規則都是在測試的過程中確定的。可惜的是，長達數小時的測試和微調卻沒能找到在Safari 3和Firefox 3浏覽器中對radio控件實現同樣的排版的方法。其結果只是為Firefox3下不協調的radio控件的label添加了一條基線。總的來說，對checkbox和radio控件進行樣式化在某種意義上可以說是一種黑色藝術。

示例12

前面所有的樣式規則都是針對Opera或Safari的（隨你挑，這兩種浏覽器都表現得相當好）。下面的這些樣式規則是專門針對IE的，我們通過CSS文件中的link條件注釋代碼塊來指定它只針對IE。

鏈接：

• 在IE中進行上面那一串最後的調整

新樣式：

h3 { margin-bottom: 1.2em; }
li { margin: 0 0 -.214em 0; }

select { height: 1.429em; }

textarea { height: 4.571em; }

fieldset {
  height: 1.583em;
  padding-top: .417em;
}

.medium { width: 13.429em; }

select.medium { width: 13.714em; }

.long { width: 20.286em; }

fieldset .rInput { border: 0 !important; }

#subjectField { margin-bottom: -.214em; }

#availabilityField .rInput { margin-top: .286em; }

#messageField { padding-bottom: .286em; }

input.submitButton { margin-top: .15em; }

* html input, * html textarea { float: left; }

* html select { font-size: .643em; }

* html select.medium { width: 21.364em; }

* html textarea { height: 4.643em; }

* html #subjectField {
  margin-top: .071em;
  margin-bottom: 0;
}

* html #availabilityField label { padding-top: 0; }

* html input.submitButton { margin: .1em 0 0 7em; }

示例12：背景考慮因素

• 如你所見，上面的所有樣式規則都說明了IE中字號和布局盒模型的級聯方式與其它浏覽器有著些微不同。
• 另一個值得一提的事情就是* html選擇符。只有IE5和IE6能識別這種選擇符，因此對於專門針對這兩種浏覽器的樣式表規則來說，這個選擇符是很有效的低通過濾器。

建立平台支持等級

本文示例的最後一部分展示了單獨為IE6和IE7編寫的樣式表，而盡職的網站設計團隊如何針對各種不同的浏覽器進行處理，還需要更多的討論。

Web的現實情況是，用戶們在形形色色的環境下使用著五花八門的浏覽器。有的浏覽器是老式的，而有的卻是最前沿的。有的浏覽器是在配置齊全的計算機上運行的，而有的卻是在電話之類的移動設備上運行。所有浏覽器都是在特定的操作系統上開發的，然後再移植到其它的標准支持程度不同的操作系統上去。除了Opera，所有的浏覽器發行商所發布的浏覽器都被設計成要跟一系列產品中的其它類型的產品搭配使用——這種設計要求增加了這些浏覽器的復雜度，而這種復雜度對於浏覽網頁這樣的簡單任務來說是不必要的。

多種多樣的浏覽器優缺點已經夠設計員們琢磨的了，然而現實中卻還存在著漏洞的問題——安全漏洞，組件漏洞，尤其是還有渲染漏洞。Safari 3.x的用戶們發現，這些演示文檔揭示出他們自己的浏覽器在某些地方存在著令人郁悶的渲染漏洞。

解決這些問題最好的辦法就是定義支持等級。這種做法，又叫做“分等級浏覽器支持”，最先是由Yahoo!的界面開發團隊宣傳開來的。

大體上說來，支持等級分成四個大類：

1. 在浏覽器的性能范圍之內，網站的渲染與原本的布局一致，而且其所有站點特性都是完全支持的。這種開發平台的定義有時又叫做“A+”等級。
2. 網頁顯示明顯偏離了原來的布局，甚至可能偏離程度非常顯著；不過，網站仍然是可用的，而且即使不是全部特性都得到支持，大多數的站點特性是得到了支持的。
3. 對使用這一等級的浏覽器的用戶來說，網站勉強可以使用，不至於砸了網站所有者的招牌，而且站點特性完全不可用。這一等級的浏覽器的安裝基礎相當小，而且被認為是過時的。
4. 文件說明書中將這一級別稱作“X 等級”支持，這一級別的支持是專供那些未經測試的平台之用的——最具代表性的就是新出現的安裝基礎很小的浏覽器（當然了，在大多數情況下是Opera）。一旦通過測試，這類的浏覽器就會升入更高的等級。

至於形成該支持等級定義的要求收集過程以及將浏覽器歸類至各個等級之下的詳情，實在是又長又乏味，由於本文已經夠長了，這些內容就略去不談了。

網頁制作poluoluo文章簡介：本文提供了關於表單元素和樣式的更多詳細內容，以及在真實的web應用程序設計中表單是如何運用的。

實際中（…而不是理論）的復雜表單布局

在上述的背景說明中，我們將示例的出場順序按照樣式表源順序來安排，而不是按照樣式表中實際的規則添加順序來安排。之所以這麼做，原因包括：

• 為了顯示出基於時序的演示系列，記日志是必需的（或者將樣式表儲存在版本劃分系統中）——這個措施從來沒有被執行過。等到疏忽被覺察到的時候，本文已經走得太遠了，早就不能再修改了。
• 按照源順序來安排，大大方便了演示文檔的制作——這是理想和現實之間的又一個妥協。
• 由於原來的示例樣式表在編寫的同時對規范化和源順序給予了相當多（如果不是完全的話）的關注——就像所有樣式表所應該的那樣——按照源順序來組織示例能保證那些希望“查看來源”的學生們在弄明白到底在實現些什麼效果的時候可以輕松得多。

Opera 9.6 的 OS X版是開發用的用戶代理；除了這個附加說明和在上面提到過的其它說明之外，下面是對該樣式表進行修改和增添的一般順序：

1. 文檔（比如，body）樣式的應用
2. 列表，表單，以及fieldset默認值的重設
3. 排版的指定
4. 列表項的約束和clear
5. label的整體安排
6. 表單控件布局（尤其是大小）的指定和規范化
7. 提交按鈕的布局
8. 邊緣情況的應用
9. Safari和Firefox的測試以及樣式表值的修改，以達到折衷（在可能范圍內）
10. IE6和IE7的測試，以及條件樣式表中屬性/值的調整

上述的過程以最寬泛的規則開始，逐漸變得越來越具特異性，直到個別浏覽器的特定缺陷被囊括其中……與樣式表自身的源順序非常相似。然而，它們的結果並不完全相關。這是因為，浏覽器渲染引擎的多樣性以及像float語境之類的東西的特性，在混合進多種樣式的時候導致了不可意料的結果，因此實際的處理比起折返，調整，以及再考慮要更復雜。

總結

本文提供了一個關於表單樣式化和布局的構思慎密的基礎，但在此基礎之上還可以進行更加深入的研究。如果設計師需要創建一個向標准靠攏的web表單，由操作系統（創建Web表單控件時借用了其組件）造成的麻煩，以及浏覽器渲染引擎之間的差異會使得擺在他面前的任務更具有挑戰性。本文對那些有關於這種任務的浏覽器缺陷進行了初步的實驗，並說明了如何達到對web開發中較難的一個方面的熟練掌握。

練習題

• 接受用戶輸入的表單控件的浮動類型是什麼，是哪兩個特征使得它們對於布局來說非常重要？
• 除了value和disabled之外，還有哪兩個屬性可以在用戶交互之前控制表單控件設置，它們是用在哪些元素上的？
• 本文的演示文檔規定了必填的表單域。寫出至少一條樣式規則，可以用來對含有用戶輸入錯誤或疏漏的表單域的外觀進行一次改變。
• 分別描述出select元素，checkbox控件和radio控件的使用案例。說明你的選擇與其它可能的選擇相比有哪些優點。
• 從你的指導者所選中的在線咨詢網站中，找出並簡短描述input type="submit"的替代方式。
• 通過追加select屬性/值組來創建一個允許選擇多個option的multiple="multiple"元素。對該元素的行為方式進行檢查之後，說明為什麼在網站創建過程中很少用到它。

表：分數對小數轉換表

在下面的表格中，括號內加了星號的數字表示它們是無限循環小數；比如0.2(6*)就等於0.266666666666666…（6是無限循環的）。

因為表格是從左到右閱讀的，表格的左邊是最接近於零的數值，並且越往右越大。

x 1/x 2/x 3/x 4/x 5/x 6/x 7/x 8/x 9/x 10/x 11/x 12/x 13/x 14/x 15/x 2 .5 - - - - - - - - - - - - - - 3 .(3*) .(6*) - - - - - - - - - - - - - 4 .25 .5 .75 - - - - - - - - - - - - 5 .2 .4 .6 .8 - - - - - - - - - - - 6 .1(6*) .(3*) .5 .(6*) .8(3*) - - - - - - - - - - 7 .(142857*) .(285714*) .(428571*) .(571428*) .(714285*) .(857142*) - - - - - - - - - 8 .125 .25 .375 .5 .625 .75 .875 - - - - - - - - 9 .(1*) .(2*) .(3*) .(4*) .(5*) .(6*) .(7*) .(8*) - - - - - - - 10 .1 .2 .3 .4 .5 .6 .7 .8 .9 - - - - - - 11 .(09*) .(18*) .(27*) .(36*) .(45*) .(54*) .(63*) .(72*) .(81*) .(90*) - - - - - 12 .08(3*) .1(6*) .25 .(3*) .41(6*) .5 .58(3*) .(6*) .75 .8(3*) .91(6*) - - - - 13 .(076923*) .(153846*) .(230769*) .(307692*) .(384615*) .(461538*) .(538461*) .(615383*) .(692307*) .(769230*) .(846153*) .(923076*) - - - 14 .0(714285*) .(142857*) .2(142857*) .(285714*) .3(571428*) .(428571*) .5 .5(714285*) .6(428571*) .(714285*) .7(857142*) .(857142*) .9(285714*) - - 15 .0(6*) .1(3*) .2 .2(6*) .(3*) .4 .4(6*) .5(3*) .6 .(6*) .7(3*) 8 .8(6*) .9(3*) - 16 .0625 .125 .1875 .25 .3125 .375 .4375 .5 .5625 .625 .6875 .75 .8125 .875 .9375

參考書目

• Bos, Bert, et al. 2007. Cascading style sheets level 2 revision 1 (CSS 2.1) specification.
  World Wide Web Consortium. http://www.w3.org/TR/2007/CR-CSS21-20070719 etc. (accessed 28 May 2008).
• Henick, Ben. 2006. 12 lessons for those afraid of CSS and standards.
  A List Apart. http://www.alistapart.com/articles/12lessonsCSSandstandards (accessed 16 December 2008).
• Horton, Sarah, and Lynch, Patrick. 2002. Web style guide: basic principles for creating web sites, 2nd edition. New Haven, Conn.: Yale University Press.
• Knott, Ron. 2008. The golden section ratio: phi.
  Department of Mathematics, University of Surrey (UK). http://www.mcs.surrey.ac.uk/Personal/R.Knott/Fibonacci/phi.html (accessed 18 December 1008).
• Meyer, Eric. 2007. Formal weirdness.
  Meyerweb.com. http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ (accessed 17 December 2008).
• Microsoft Corporation. msnbc.com.
  http://msnbc.msn.com/ (accessed 17 December 2008).
• Raggett, Dave, et al. 1999. HTML 4.01 specification.
  World Wide Web Consortium. http://www.w3.org/TR/1999/REC-html401-19991224 etc. (accessed 30 June 2008).
• Reynolds, Garr. 2005. From golden mean to “rule of thirds.”
  Presentation Zen. http://www.presentationzen.com/presentationzen/2005/08/from_golden_mea.html (accessed 16 December 2008).
• Santa Maria, Jason. 2008. Making modular layout systems.
  24 Ways. http://24ways.org/2008/making-modular-layout-systems (accessed 16 December 2008).
• Wikpedia. 2008. Fahrner image replacement.
  http://en.wikipedia.org/wiki/Fahrner_Image_Replacement (accessed 19 December 2008).
• Yahoo! Developer Network. 2008. Graded browser support.
  http://developer.yahoo.com/yui/articles/gbs/ (accessed 16 December 2008).