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/
web网页的表单排版利器--960css的更多相关文章
- ASP.NET Web Pages:表单
ylbtech-.Net-ASP.NET Web Pages:表单 1.返回顶部 1. ASP.NET Web Pages - HTML 表单 表单是 HTML 文档中放置输入控件(文本框.复选框.单 ...
- 网页禁用表单的自动完成功能禁用密码自动填充autocomplete
网页中表单的自动完成功能,有时候很方便,但是有时候并不想让浏览器记忆表单,比如禁用密码域自动填充功能, 网页禁用表单的自动完成功能是由input元素的autocomplete属性控制,关闭表单的自动完 ...
- web前端----html表单操作
form表单 功能:表单用于向服务器传输数据,从而实现用户与Web服务器的交互 表单能够包含input系列标签,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含textarea.selec ...
- (数据科学学习手札112)Python+Dash快速web应用开发——表单控件篇(上)
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...
- web功能测试之表单、搜索测试
初入职场接触功能测试老是碰到以下情况不知道怎么写测试用例: 一个界面很多搜索条件怎么写用例?下拉框测试如何考虑测试点?上传要考虑哪些验证点?...... 所以这篇主要是整理关于web测试之表单.搜索测 ...
- 关于form表单排版的技巧
//此处说明一个对于排版表单的方法将form表单嵌套在table里,因为table是格式化的,所以就不用再手动排版了源码如下 <from action="" method=& ...
- java web 解决Form表单乱码问题
JSP和Servlet的六种中文乱码处理方法 一.表单提交时出现乱码: 在进行表单提交的时候,经常提交一些中文,自然就避免不了出现中文乱码的情况,对于表单来说有两种提交方式:get和post提交方式. ...
- WEB安全讨论-表单登录是先验证验证码还是密码
表单登录是先验证验证码还是密码? 肯定是验证码呀!!!这是毋庸置疑的.但是发现有人会验证密码,感觉先验证密码和先验证验证码是一个概念是一样的.但是其实是完全不一样的.下面我们来一起详细的剖析一下: 消 ...
- java web学习之表单
前台页面与后台页面的数据又form表单完成. <form name ="form1" method="post" action="index ...
随机推荐
- SAP BW 通过视图创建数据源(无单位)
因业务明细表中数量没有单位,所以BW创建数据源时,需做增强 数据表: ZDB_H(抬头) ZDB_I(明细) ECC 系统中: 1.创建视图ZVDBWQ,因明细表中数量没有单位,所以创建视图时不包括数 ...
- 如何在Ubuntu 13.04中升级到 GNOME 3.8
如何在Ubuntu 13.04中升级到 GNOME 3.8 添加 GNOME 3 PPA(Personal Package Archives) 在你进一步浏览之前,确认你正在运行的是Ubuntu 13 ...
- Nginx Rewrite 实现匹配泛域名规则
Nginx 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru ...
- mybatis0211 mybatis和spring整合
1mybatis和spring整合 1.1 mybaits和spring整合的思路 .让spring管理SqlSessionFactory .让spring管理mapper动态代理对象和dao. 使用 ...
- The internals of Python string interning
JUNE 28TH, 2014Tweet This article describes how Python string interning works in CPython 2.7.7. A fe ...
- string2array($value);
/*** 将字符串转换为数组** @param string $data 字符串* @return array 返回数组格式,如果,data为空,则返回空数组*/if ( !function_exis ...
- 炼数成金hadoop视频干货02
视频地址:http://pan.baidu.com/s/1dDEgKwD 这个视频理论性太强,不过倒是给了自己唯一的选项就是自己实践,不用像以前那样视频中敲一个字符,我也敲一个字符 讲到的内容: 介绍 ...
- org.apache.hadoop.fs-Seekable
本来要先看BufferedFSInputStream的,但是它实现了Seekable和PositionedReadable接口,就先看这两个,再看它会比较容易理解些 package org.apach ...
- 加载程序到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 ...
- request 和response 中的setCharacterEncoding区别
response和request的setCharacterEncoding 一.request.setCharacterEncoding():是设置从request中取得的值或从数据库中取出的值. 指 ...