最好的策略風格相同的HTML時，它出現在多個頁面

我有一個簡單的HTML表格，包含2個欄目，包含'名稱'，'評論'和'電子郵件'的文本字段和標題。最好的策略風格相同的HTML時，它出現在多個頁面

如果要在多個頁面上顯示該樣式的HTML片段，我正在尋找最佳的策略 - 在每個頁面上都需要不同的尺寸。我最近一直在閱讀關於CSS的很多內容，但並未偶然發現足夠的信息，但這真的讓我很舒服地知道設計這樣的.css的最佳方法。

例如，我可能會在「評論」頁面上以50％的寬度顯示評論表單，但只能在網站上某些附加位置的側欄中顯示20％的評論表單。

我主要關心樣式框的寬度 - 但當然，同樣的方法適用於文本。例如，名稱字段不應該與電子郵件字段一樣寬。我認爲固定寬度比百分比更好。

顯然有很多方式來設計它。假設我已經有1個主CSS文件。

1）把百分比寬度放在input標籤上，然後外部div對於包含的任何面板都是100％的寬度。這不需要頁面特定的CSS，但我不喜歡td標籤，再加上我不能輕易改變textarea的高度。

2）在每一個人頁面作爲附加樣式<head><style>創建＃NAME，#Comments和#Email風格*

基於＃NAME，#Comments和#Email在頁面特定css文件3）風格。頁面特定的文件是好還是壞？我甚至不確定我喜歡這裏基於ID的樣式，因爲它們是動態生成的，如果由於某種原因他們需要更改，我必須在任何地方更新CSS。

4）基於#Name，#Comments和#Email的樣式，但用每個頁面特有的後代選擇符對其進行限定。因此，當FAQ頁面出現時，我會有.faqPage #Name。顯然，這些都在我的主css文件中。

5）創建關於 'emailField ,名稱字段and commentsField` [2,3,4選項重複此選項]

6）創建的類名稱爲' shortField , fullWidthField and textInputField` [選項2的類名，3,4重複此選項]

7）你的想法:)

8）其他東西

我只是有點OVE帶着所有選項。我該如何去決定哪種方法最好？一個特定的目標是能夠在多個頁面上設置相同的HTML（顯然這就是CSS的全部內容 - 但它確實會影響我可以使用的選項）。

<div id="pnlSubmitComments"> 
<table class="fieldTable"> 
    <tr> 
    <td align="right"> 
     <label for="Comments">Name:</label> 
    </td> 
    <td> 
     <input id="Name" name="Name" type="text" value="" /> 
    </td> 
    </tr> 
    <tr> 
    <td align="right"> 
     <label for="Comments">Email:</label> 
    </td> 
    <td> 
     <input id="Email" name="Email" type="text" value="" /> 
    </td> 
    </tr> 
    <tr> 
    <td align="right" valign="top"> 
     <label for="Comments">Questions:</label> 
    </td> 
    <td> 
     <textarea id="Comments" name="Comments"> 
</textarea> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    </td> 
    <td> 
     <input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" /> 
    </td> 
    </tr> 
</table> 
</div>

PS。實際的字段名稱更具體，如CommentsName - 爲了便於閱讀，在此處更容易放置Name。

來源

2009-02-04 Simon_Weaver

1）使用通用的CSS並設置一些值，如代碼中的寬度後面。

2）根據不同需求創建多個css文件，並使用後面的代碼將正確的css鏈接到頁面。

來源

2009-02-04 06:49:00

方面評論：也許你不應該使用表格來佈置這個表單，而是字段集，它會給你更多的靈活性。例如，如果你決定要在彼此頂部的標籤和輸入框在更窄的列...

你的榜樣，而不表（看起來也更漂亮）：

<style type="text/css"> 
<!-- 

form { /* set width in form, not fieldset (still takes up more room w/ fieldset width */ 
    font: 100% verdana, arial, sans-serif; 
    margin: 0; 
    padding: 0; 
    min-width: 500px; 
    max-width: 600px; 
    width: 560px; 
} 

form fieldset { 
    /* clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */ 
    border-color: #000; 
    border-width: 1px; 
    border-style: solid; 
    padding: 10px; /* padding in fieldset support spotty in IE */ 
    margin: 0; 
} 

form fieldset legend { 
    font-size: 1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */ 
    /* be careful with padding, it'll shift the nice offset on top of border */ 
} 

form label { 
    display: block; /* block float the labels to left column, set a width */ 
    float: left; 
    width: 150px; 
    padding: 0; 
    margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */ 
    text-align: right; 
} 

form input, form textarea { 
    /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */ 
    width: auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */ 
    margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of 
    label aligns textarea better in IE */ 
} 

textarea { 
    overflow: auto; 
} 

/* uses class instead of div, more efficient */ 
form br { 
    clear: left; /* setting clear on inputs didn't work consistently, so brs added for degrade */ 
} 
--> 
</style> 
<div id="pnlSubmitComments"> 
    <form> 
     <fieldset> 
      <label for="Comments"> 
       Name: 
      </label> 
      <input id="Name" name="Name" type="text" value="" /><br /> 
      <label for="Comments"> 
       Email: 
      </label> 
      <input id="Email" name="Email" type="text" value="" /><br /> 
      <label for="Comments"> 
       Questions: 
      </label> 
      <textarea id="Comments" name="Comments"> 
      </textarea><br /> 
      <label for="spacing"></label> 
      <input id="btnSubmitComments" name="btnSubmitComments" type="submit" value="Submit Questions" /> 
     </fieldset> 
    </form> 
</div>

現在你主要問題。我想如下做到這一點：

我會使用該ID的不同佈局列的我想用的形式，所以，如果我在我的主柱使用它（）我會編寫相應的CSS像這樣：

#main .pnlSubmitComments form fieldset { 
    /*your CSS*/ 
}

和側柱分別

#side .pnlSubmitComments form fieldset { 
    /*your CSS*/ 
}

可以通過分配的類，像這樣具有在每個元件控制：

<input type="text" class="email" name="email" id="email" />

，然後你就完全按照上述：

#main .email { 
    /*your css for the .email textbox/* 
}

來源

2009-02-04 06:50:48 markus

ahh聰明:-)不同寬度的主要原因是依賴於側邊欄，所以這將工作得很好。感謝fieldset技巧。我需要小心使用「表單」作爲選擇器，因爲我在頁面上有多個表單。 – 2009-02-04 07:03:52

您可以輕鬆地用一個css文件做到這一點，如果你可以在容器元素上添加一個樣式類。

例如，第1頁將有以下的html：

<body class="page1"> 
    <!-- repeated html here --> 
    <input /> 
</body>

和第2頁上你必須：

<body class="page2"> 
    <!-- repeated html here --> 
    <input /> 
</body>

在你的單身css文件中您還可以根據輸入標籤關於body元素的類：

body.page1 input { width: 25%; } 
body.page2 input { width: 50%; }

所以，你保持html相同，只是改變類（或id）的容器元素，並用它來編寫不同的CSS規則。

更新：重讀您的列表後，我看到這個或多或少在您的名單上作爲數字4.我認爲這是一個很好的選擇，如果你可以使用它。我還使用它來定位不同的瀏覽器，方法是在body標籤中添加一個指示瀏覽器的類。

來源

2009-02-04 08:04:13 Andrej

最好的策略風格相同的HTML時，它出現在多個頁面

回答

相關問題