web網頁的表單排版利器--960css

表單排版樣式 960css

 

前言

一般web網頁的表單排版，大家都習慣用table排版，自己需要根據實際需要去定義TR和TD，很多時候對於TD的高寬度、是否合並行，合並列，都要去做一些處理，這些都是比較繁瑣的工作。找到一個表單排版的替代工具，提前定義好CSS樣式，無疑可以減輕我們的這些工作。

下面簡單一個一個表單排本CSS框架，960css.

 

960css目錄結構

(其中960分為fixed和fluid兩種)

 

 

示例

比如排版一個如下圖的輸入表單： 

 

<div id="master" class="container_12">

  <div class="grid_1 lbl">單據號</div>

  <div class="grid_3 val"><input type="text" id="BillNo" name="BillNo" data-cp="equal" class="z-txt" readonly="readonly" /></div>

  <div class="grid_1 lbl">備注</div>

  <div class="grid_3 val"><input type="text" id="Remark" name="Remark" class="z-txt" /></div>

  <div class="grid_1 lbl">倉庫</div>

  <div class="grid_3 val"><input type="text" id="IDStore" name="IDStore" class="z-txt" /></div>

 

  <div class="clear"></div>

 

  <div class="grid_1 lbl">材料類別</div>

  <div class="grid_3 val"><input type="text" id="IDMaterialType" name="IDMaterialType" class="z-txt" /></div>

  <div class="grid_1 lbl">領料單位</div>

  <div class="grid_3 val"><input type="text" id="IDPickUnit" name="IDPickUnit" class="z-txt" /></div>

  <div class="grid_1 lbl">領用人</div>

  <div class="grid_3 val"><input type="text" id="IDPickPerson" name="IDPickPerson" class="z-txt"/></div>

 

  <div class="clear"></div>

</div>

 

 

其中最外層div class="container_12" 這是選擇960css的12列表格模型
 <div class="grid_1 lbl">單據號</div> 

 這 class= "grid_1表示這個div占12列中的一列， class="lbl"表示它是個label,其它div類推即可 .

所以這樣排版跟以前的table排版相比，大大的簡化了我們的工作.

 

官網: http://960.gs/