表单排版样式 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. SAP BW 通过视图创建数据源(无单位)

    因业务明细表中数量没有单位,所以BW创建数据源时,需做增强 数据表: ZDB_H(抬头) ZDB_I(明细) ECC 系统中: 1.创建视图ZVDBWQ,因明细表中数量没有单位,所以创建视图时不包括数 ...

  2. 如何在Ubuntu 13.04中升级到 GNOME 3.8

    如何在Ubuntu 13.04中升级到 GNOME 3.8 添加 GNOME 3 PPA(Personal Package Archives) 在你进一步浏览之前,确认你正在运行的是Ubuntu 13 ...

  3. Nginx Rewrite 实现匹配泛域名规则

    Nginx 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru ...

  4. mybatis0211 mybatis和spring整合

    1mybatis和spring整合 1.1 mybaits和spring整合的思路 .让spring管理SqlSessionFactory .让spring管理mapper动态代理对象和dao. 使用 ...

  5. The internals of Python string interning

    JUNE 28TH, 2014Tweet This article describes how Python string interning works in CPython 2.7.7. A fe ...

  6. string2array($value);

    /*** 将字符串转换为数组** @param string $data 字符串* @return array 返回数组格式,如果,data为空,则返回空数组*/if ( !function_exis ...

  7. 炼数成金hadoop视频干货02

    视频地址:http://pan.baidu.com/s/1dDEgKwD 这个视频理论性太强,不过倒是给了自己唯一的选项就是自己实践,不用像以前那样视频中敲一个字符,我也敲一个字符 讲到的内容: 介绍 ...

  8. org.apache.hadoop.fs-Seekable

    本来要先看BufferedFSInputStream的,但是它实现了Seekable和PositionedReadable接口,就先看这两个,再看它会比较容易理解些 package org.apach ...

  9. 加载程序到android虚拟机报错: android.widget.RelativeLayout cannot be cast to android.widget.Button

    05-23 02:53:48.416: E/Trace(875): error opening trace file: No such file or directory (2) 05-23 02:5 ...

  10. request 和response 中的setCharacterEncoding区别

    response和request的setCharacterEncoding 一.request.setCharacterEncoding():是设置从request中取得的值或从数据库中取出的值. 指 ...