表單排版樣式 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> View Code

?

?

其中最外層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/

?

轉載于:https://www.cnblogs.com/birdwawe/p/4062106.html

總結

以上是生活随笔為你收集整理的web网页的表单排版利器--960css的全部內容，希望文章能夠幫你解決所遇到的問題。

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