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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/292654.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

c语言将十进制转化为二进制算法_base64算法初探即逆向分析

算法分析虽说base64严格意义上来说并不能算是加密算法&#xff0c;但的确应用方面来说还算是比较广&#xff0c;在CTF的算法逆向中Base系列算是也比较常见的&#xff0c;萌新刚开始学算法&#xff0c;就以base64为例&#xff0c;对该算法进行一个简单的分析。简单来说&#xff…

新功能抢先看!Windows 11 2022 版全新 ISO 镜像来了+下载

面向 Dev 频道的 Windows 预览体验成员&#xff0c;微软现已发布 Windows 11 操作系统全新 ISO 镜像文件&#xff0c;此版本 ISO 镜像整合了自 Build 22449 至 Build 22533 的所有功能。文件名称:windows11_insiderpreview_client_x64_zh-cn_22533.iso 文件大小: 4.64 GB MD5:…

这是哪里来的小妖精!!!

1 或许小鸟依人就是怎么来的吧2 果然球体运动全靠弹。。3 小猫咪从爬猫架下来时的样子萌爆了....4 这猫也是很配合了~5 以后请不要说“有朝一日”&#xff0c;请说“下周五晚七点我请你吃火锅”&#xff0c;“三分钟后我给你打钱”&#xff0c;“现在我就喜欢你”。6 内容来源于…

汇编语言之常见的汇编指令

1、常见汇编指令 1. 传送指令&#xff08;4个&#xff09;&#xff1a;mov、push、pop、lea。2. 转移指令&#xff08;8个&#xff09;&#xff1a;call、jmp、je、jne、jb、jnb、ja、jna。3. 运算指令&#xff08;7个&#xff09;&#xff1a;add、sub、mul、div、adc、sbb、c…

java list 初始化_Java新特性:数据类型可以扔掉了?

在很久很久以前&#xff0c;我们写代码时要慎重的考虑变量的数据类型&#xff0c;比如下面这些&#xff1a; 枚举&#xff1a;尽管在 JDK 5 中增加了枚举类型&#xff0c;但是 Class 文件常量池的 CONSTANT_Class_info 类型常量并没有发生任何语义变化&#xff0c;仍然是代表一…

Kubernetes应用程序开发认证(CKAD) 经验分享

众所周知&#xff0c;Kubernetes在容器编排器大战中脱颖而出后&#xff0c;从2020年以来变得越发的火热。那么云原生计算基金会&#xff08;CNCF&#xff09;联合Linux基金会就适时的推出了皆在考察相关从业者对Kubernetes的运维和开发知识了解程度的认证考试&#xff0c;分别是…

【数据结构入门精讲 | 第十九篇】考研408、企业面试图专项练习(二)

在上一篇中我们进行了图的专项练习&#xff0c;在这一篇中我们重点探讨图的编程专项习题。 目录 R7-1 城市间紧急救援R7-2 地铁一日游R7-3 最小生成树的唯一性R7-4 网红点打卡攻略R7-5 畅通工程之最低成本建设问题R7-6 寻宝图R7-7 逆散列问题R7-8 任务调度的合理性R7-9 关键活动…

判断点在多边形内

2019独角兽企业重金招聘Python工程师标准>>> 0.前言 最近不断遇到类似的几何位置问题&#xff0c;一直没有花时间去总结&#xff0c;本文总结了我常用点跟多边形的位置判断方法以及代码。希望能够对大家有所帮助。 文中所指的多边形均为凸多边形&#xff0c;一些描…

Centos6.5使用ELK(Elasticsearch + Logstash + Kibana) 搭建日志集中分析平台实践

Centos6.5安装Logstash ELK stack 日志管理系统概述&#xff1a;日志主要包括系统日志、应用程序日志和安全日志。系统运维和开发人员可以通过日志了解服务器软硬件信息、检查配置过程中的错误及错误发生的原因。经常分析日志可以了解服务器的负荷&#xff0c;性能安全性&#…

k8s 手动恢复redis 集群_二进制手动部署k8s-1.14高可用集群(二、集群部署)

1. CA证书&#xff08;任意节点&#xff09;1.1 安装cfsslcfssl是非常好用的CA工具&#xff0c;我们用它来生成证书和秘钥文件 安装过程比较简单&#xff0c;如下&#xff1a;# 下载 $ mkdir -p ~/bin $ wget https://pkg.cfssl.org/R1.2/cfssl_linux-amd64 -O ~/bin/cfssl $ w…

实现DDD领域驱动设计: Part 1

原文链接: https://dev.to/salah856/implementing-domain-driven-design-part-i-5a72简单的代码&#xff01;踢足球很简单&#xff0c;难的是踢简单的足球。— 克鲁伊夫如果我们将这句话用到编程上&#xff0c;我们可以说&#xff1b;写代码很简单&#xff0c;难的是写简单的代…

XE5 Android 开发实现手机打电话和发短信 [转]

其实都可以通过intent和URI调用系统功能.Windows程序员可以理解成是ShellExecute.这个是万金油.可以有调用各种功能.后面会介绍. 1.短信息.很简单 方法a.不使用Intent而是直接发短信. smsManager对应的Delphi代码应该是: usesAndroidapi.JNI.JavaTypes,Androidapi.JNI.Telephon…

安装程序无法创建新的系统分区也无法定位现有分区的解决方法

2019独角兽企业重金招聘Python工程师标准>>> 在安装Windows7时&#xff0c;想必有很多人都安碰到这样的情况吧!在安装界面里选择安装时&#xff0c;却出现“安装程序无法创建新的系统分区&#xff0c;也无法定位现有系统分区” 网上提供的另外解决方法大全&#xff…

python多线程读取数据库数据_Python基于多线程操作数据库相关知识点详解

Python基于多线程操作数据库相关问题分析 本文实例分析了Python多线程操作数据库相关问题。分享给大家供大家参考&#xff0c;具体如下&#xff1a; python多线程并发操作数据库&#xff0c;会存在链接数据库超时、数据库连接丢失、数据库操作超时等问题。 解决方法&#xff1a…

IDA64 Fatal error before kernel init

http://www.tuicool.com/articles/7FZVZna 第一次看到这个错误还以为是修改文件导致的&#xff0c;但是觉得又不大像&#xff0c;因为在Win7底下是完全正常的。搜索了一下才发现是由于插件导致的&#xff1a; NOTE3: You get a “Fatal error before kernel init” when trying…

Android安全与逆向之在ubuntu上面搭建NDK环境

1、下载Android NDK自解压包&#xff0c; 官方地址&#xff1a;https://developer.android.com/ndk/downloads/index.html#download下载&#xff1a;$ wget -c http://dl.google.com/android/ndk/android-ndk-r10e-linux-x86_64.bin 2、解压&#xff0c; 将Android NDK压缩包…