960 grid system的一点研究

本文探讨了960GridSystem CSS框架的使用心得,详细介绍了reset.css、text.css及960.css三个核心文件的功能,并分享了一种解决动态布局问题的方法,即通过自定义.row样式实现元素的灵活排列。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天看了一下960 grid system的CSS, 感觉真是简单,共包括3个文件,第一个是reset.css,用于重置样式;第二个文件是text.css,定义了一些元素的基本样式;第三个是核心文件960.css, 仅仅只包含了.container_X .grid_X .prefix_X  .suffix_X  .pull .push .alpha .omega .clear, 但是功能却非常的强悍,而且支持多个浏览器,对网页排版有很大的帮助,再也不用为div对齐而烦恼。 

在实际的使用过程中,.alpha .omega的使用不是很方便,例如一个表单的排版,例如里面有6个字段,排成3行,这样每行的第一个要加上alpha, 后面一个要加上omega, 而我要的是动态排列,比如某一个字段隐藏后,后面的字段自动补上来,而不是留下空白。

在6个字段外面包多一个div, div的样式是如下, 这样6个字段就可以动态排列了,而不用拆成3行

 

.row
        {
            margin-left
: -5px;
            margin-right
: -5px;
            float
: left;
        
}

转载于:https://www.cnblogs.com/zq8024/archive/2012/06/15/2551515.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值