法則五：把復選框、單選按鈕與它們的標簽分離

將單元中的復選框、單選按鈕的標簽與控件分離，這能夠保證當文本變長時正確換行。但仍需要設計對話框，設法使翻譯后的文本有可能置于一行中。

代碼樣例(設計正確的復選框代碼)如下：

＜table cellspacing=0 cellpadding=0＞

＜tr＞

＜td valign=middle width=24px＞

＜input id=x type=checkbox accesskey=C＞

＜/td＞

＜td valign=middle＞

＜label for=x＞＜u＞C＜/u＞hoose me ＜/label＞

＜/td＞

＜/tr＞

＜/table＞

法則六：為今后的擴展預留足夠的空間，避免固定寬度的項目

除非能夠保證單元或控件中的文本翻譯成其它語言時有足夠的空間，否則不要使用固定寬度。如果需要指定尺寸，也應該是百分比形式的尺寸。基本原則是留出300%的擴展空間給較短的條目(少于10個字符)，200%的擴展空間給中等長度的條目(10至20個字符)，100%的擴展空間給長條目(多于20個字符)。

但是一定還要避免使用過多的百分比形式的尺寸。盡量利用html自動排版功能規劃版面。這樣無論控件里有什么樣的文本，對話框也會很漂亮。切記除了表格寬度，其它百分比形式的尺寸要在樣式表單中詳細說明。

代碼樣例如下：

＜style＞

.myStyle {font-size: 10pt; font-family: Arial; width: 80%;}

＜/style＞

法則七：按鈕，列表框和組群框大小的確定方法

1、如何確定按鈕大小

方法一：在樣式表單中指定按鈕的固定寬度，所有需要相同尺寸的按鈕都屬于這一類別。其中需要注意的是尺寸單位應該是em，而不能是pixel。

代碼樣例如下：

＜style＞

.mainButton {width: 10em;}

＜/style＞

方法二：不指定按鈕寬度，利用HTML的排版功能設置每個按鈕的大小。這會造成所有按鈕都同樣大小，你可以再用HAL提供的簡單代碼調整同一類按鈕的寬度。

代碼樣例如下：

＜script langauge=jscript src=HALsize.js＞＜/script＞

＜style＞

button {font: 9pt tahoma; padding-top: 0px; padding-bottom: 0px; padding-right: 6px; padding-left: 6px}.ButtonA{;}

.ButtonOKCancel {;}

＜/style＞

＜body οnlοad=’HALsizeButtons(document, “ButtonA”, false);

HALsizeButtons(document, “ButtonOKCancel”, true);’＞

＜button id=butOne class=ButtonA＞One Button＜/button＞＜br＞

＜button id=butTwo class=ButtonA＞Other Same Size Button＜/button＞

＜/body＞

2、如何確定列表框大小

首先，給短條目留出200%擴展空間，長條目留出100%擴展空間。然后把所有相關的列表框放在同樣尺寸的表格單元中，以表格單元為基準，設置每個列表框為百分比形式(一般為100%)。

代碼樣例如下：

＜tr＞＜td width = 30%＞

＜select style = “width:100%”＞

＜option＞Bulgaria

＜option＞Greece

＜/select＞

＜/td＞

＜/tr＞

＜tr＞

＜td＞ ＜!―同列不同行 –＞

＜select style = “width:100%”＞

＜option＞Bulgarian

＜option＞Greek

＜/select＞

＜/td＞

＜/tr＞

3、如何確定組群框的大小

對于組群框，最好是給文本留出擴展空間，并使其實際大小隨表格變化而變化。包含組群框的表格單元要設為”nowrap”。組群框中的所有控件要同組群框放置在一個表中。

代碼樣例如下：

＜td width = 30% nowrap＞＜fieldset style = “width:100%; height: 100%”＞

＜legend＞Group Box Label＜/legend＞

… 組群框中的所有控件應該在一個＜table＞中 …

＜/fieldset＞

＜/td＞

注：不一定設置高度為100%，除非你只需要組群框與其它控件左右對齊。

法則八：高度的設置

盡量不給含有文本的表格單元設置固定高度，否則當表格中文本換行或字體改變后，表格會變得非常難看。起分隔作用的空行除外。

你可以在字體大小范圍內給包含單行控件的表格單元設置高度。

應該給樣式表單中的每個元素設置行高。否則，當用戶在IE中改變字體大小時網頁的外觀就會改變。表格單元也要如此設置。

＜style＞body, td {font-family: tahoma; font-size: 8pt; line-height: 10pt;}

… 設置其他所有元素 …

＜/style＞

法則九：不使用左對齊和右對齊

對任何表格(或相應的css樣式)都不要使用”align=left” 或 “align=right”。否則在中東語言環境下就不能正確調整。正確的方法是通過在單元格一側附加單元使其左移或右移。還要確保左邊界和右邊界值相等。

法則十：避免將本地化工作人員需要改變的CSS值內聯在網頁中

將所有本地化工作人員可能需要改變的CSS值保存在層疊式表單文件中。這樣本地化工作者只需改變一個樣式表單文件，就可以將改動應用于所有共享該文件的網頁中。

因為某種字體的名稱在其他語言版本中常常不存在或者需要改動，所以避免在頁面中使用＜font＞標識中的字體名屬性

歡迎大家閱讀《實現HTML自動排版的法則2_html》,跪求各位點評,若覺得好的話請收藏本文，by 搞代碼

搞代碼網(gaodaima.com)提供的所有資源部分來自互聯網，如果有侵犯您的版權或其他權益，請說明詳細緣由并提供版權或權益證明然后發送到郵箱[email?protected]，我們會在看到郵件的第一時間內為您處理，或直接聯系QQ：872152909。本網站采用BY-NC-SA協議進行授權

轉載請注明原文鏈接：實現HTML自動排版的法則2_html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的排版 项目 html,实现HTML自动排版的法则2_html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。