表单排版样式 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/

web网页的表单排版利器--960css的更多相关文章

  1. ASP.NET Web Pages:表单

    ylbtech-.Net-ASP.NET Web Pages:表单 1.返回顶部 1. ASP.NET Web Pages - HTML 表单 表单是 HTML 文档中放置输入控件(文本框.复选框.单 ...

  2. 网页禁用表单的自动完成功能禁用密码自动填充autocomplete

    网页中表单的自动完成功能,有时候很方便,但是有时候并不想让浏览器记忆表单,比如禁用密码域自动填充功能, 网页禁用表单的自动完成功能是由input元素的autocomplete属性控制,关闭表单的自动完 ...

  3. web前端----html表单操作

    form表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.selec ...

  4. (数据科学学习手札112)Python+Dash快速web应用开发——表单控件篇(上)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  5. web功能测试之表单、搜索测试

    初入职场接触功能测试老是碰到以下情况不知道怎么写测试用例: 一个界面很多搜索条件怎么写用例?下拉框测试如何考虑测试点?上传要考虑哪些验证点?...... 所以这篇主要是整理关于web测试之表单.搜索测 ...

  6. 关于form表单排版的技巧

    //此处说明一个对于排版表单的方法将form表单嵌套在table里,因为table是格式化的,所以就不用再手动排版了源码如下 <from action="" method=& ...

  7. java web 解决Form表单乱码问题

    JSP和Servlet的六种中文乱码处理方法 一.表单提交时出现乱码: 在进行表单提交的时候,经常提交一些中文,自然就避免不了出现中文乱码的情况,对于表单来说有两种提交方式:get和post提交方式. ...

  8. WEB安全讨论-表单登录是先验证验证码还是密码

    表单登录是先验证验证码还是密码? 肯定是验证码呀!!!这是毋庸置疑的.但是发现有人会验证密码,感觉先验证密码和先验证验证码是一个概念是一样的.但是其实是完全不一样的.下面我们来一起详细的剖析一下: 消 ...

  9. java web学习之表单

    前台页面与后台页面的数据又form表单完成. <form  name ="form1"  method="post" action="index ...

随机推荐

  1. K-means Algorithm

    在监督学习中,有标签信息协助机器学习同类样本之间存在的共性,在预测时只需判定给定样本与哪个类别的训练样本最相似即可.在非监督学习中,不再有标签信息的指导,遇到一维或二维数据的划分问题,人用肉眼就很容易 ...

  2. javascript获取鼠标位置

    首先不同浏览器中event位置属性的分析: 1. IE的event.x,event.y是以事件触发元素的父元素外界为参考点(不包括滚动距离) 2. Firefox的event.pageX,event. ...

  3. c语言中的unsigned 和 signed

    我们来一起看下,C语言中,对于Integer Type(整数形式)的unsigned与signed两种形式的区别,以及在内存中的存储方式是如何的 Integer type(整数形式)是C语言中的基本数 ...

  4. 详解ARM的AMBA设备中的 DMA设备PL08X的Linux驱动

    1. 此文目的记录笔者对ARM的PL08x的DMA驱动PL08x.c理解.给其他不熟悉此DMA驱动的读者一点借鉴和参考.2. 适合读者你已经具备一定驱动编程能力,知道一些最基本的概念,比如用于输出输出 ...

  5. 如何在linux下解压缩rar和zip格式的文件压缩包

    转载:http://oldboy.blog.51cto.com/2561410/597515 使用apt-get安装:  sudo apt-get install  rar  zip rar使用: 将 ...

  6. 如何手动添加Android Dependencies包

    在ADT16 之前可以在工程里面做关联,eclipse会在工程上自动添加ReferenceLibrary.新版本的ADT修改了第三方jar的导入方式,只需要在工程目录下新建libs文件夹,注意是lib ...

  7. org.apache.hadoop.fs-PositionedReadable

    package org.apache.hadoop.fs; import java.io.*; import org.apache.hadoop.fs.*; /** Stream that permi ...

  8. Index Generation

    Index Generation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 230   Accepted: 89 Des ...

  9. linux-rm

    rm可以删除文件夹和文件 rm -rf强制删除不询问 rm /*    自杀绝技,赶紧跑吧 mkdir -p创建父目录 mkdir -p /tmp/wsb/dgl(wsb这个文件夹之前没有) rmdi ...

  10. JDBC的批量批量插入

    本文部分转载于:http://blog.itpub.net/29254281/viewspace-1151785/ http://www.cnblogs.com/chenjianjx/archive/ ...