web网页的表单排版利器--960css

转载

mb5ff5901795aaf 2015-09-25 20:56:00

文章标签 表单 css css框架 文章分类 Html/CSS 前端开发

表单排版样式 960css

前言

一般web网页的表单排版，大家都习惯用table排版，自己需要根据实际需要去定义TR和TD，很多时候对于TD的高宽度、是否合并行，合并列，都要去做一些处理，这些都是比较繁琐的工作。找到一个表单排版的替代工具，提前定义好CSS样式，无疑可以减轻我们的这些工作。

下面简单一个一个表单排本CSS框架，960css.

960css目录结构

(其中960分为fixed和fluid两种)

web网页的表单排版利器--960css_css框架

示例

比如排版一个如下图的输入表单：

web网页的表单排版利器--960css_表单_02

web网页的表单排版利器--960css_css框架_03

web网页的表单排版利器--960css_css_04

<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 ></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 ></div>

</div>