我的栅格系统实现
作者：grace 来源：gracecode.com 发布时间：2008-09-21 13:50:00
如果没有了解栅格系统是什么，建议看完这篇文章以后再回来。
其实有很种 CSS 写法实现栅格系统，很多 CSS 库也都会提供类似的栅格系统实现（譬如：YUI，BluePrint）。
引用 One True Layout 文中所言，良好的布局应该具有的几个特性：
具有一定的灵活性
等高
基于栅格
请允许我“重复造了轮子”，我的栅格系统实现是基于“伪绝对定位布局”，这样可以更好的实现上述所言的几个特征（很难解释，还是直接看 DEMO ）。
http://lab.gracecode.com/demo/grid.html
如何使用上面定义的 CSS 栅格？很简单，只需要定义一行内列的数量以后，再定义列占据的相应栅格宽度以及开始位置即可。譬如定义某列占据 17 个栅格、并从第 3 个栅格开始排版，那么使用下面的 class
column-17 start-03
类似的，如果是通栏，那么就是占据 24 个栅格，并从第一个栅格开始（以 Taobao UED 定义的 950px 宽度为公式 W ）
column-24 start-01
因为是上述“伪绝对定位”的布局，所以相应列之间不会相互影响。而理解上述布局可能需要些时间，同时感谢师兄那么详细的讲解，我相信也会给你带来收获。
黄金分割标准：右边的大小一般是左边大小的黄金比例
平分：在1024的分辨率下，一般采用330左右的分割
两栏分割：左边660 右边260左右
三栏分割：左边是200左右 中间400左右 右边300左右
三栏分割：右边两栏之和是左边的0.618
三栏分割：中间180 两边分别为380左右
很难具体的解释其中的细节，但是希望有问题的朋友能够留言，我尽量帮你解答。
0
投稿猜你喜欢
- 4. 选择最有效率的表名顺序(只在基于规则的优化器中有效)ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,因此FROM子句中
用phpMyAdmin时在导入和导出MySQL5数据时，有一个SQL compatibility mode选项，其可选值为NONE、ANSI- '-----------------------------------------------------------
- 我们知道，任何数据库系统都无法避免崩溃的状况，即使你使用了Clustered，双机热备……仍然无
- 设计师常常使用一些独特的字体效果和页面效果，阴影是其中一个，它可以让页面中的文字和元素具有立体的效果，从而被突出出来。比如对于文字阴影，传统
- 用QQ聊过天的朋友都对它的自动隐藏窗口功能爱不释手，它可以使窗口显得清爽整洁而且富有动感，笔者的几个朋
- asp连接sql server代码如下：dim connset conn = Serve
- 首先，与其他语言不同，JS的效率很大程度是取决于JS engine的效率。除了引擎实现的优劣外，引擎自己也会为一些特殊的代码模式采取一些优化
- 可能是我“火星”了，不过在 空虚 的 Blog 中学到的一招。这个技巧的原理是利用 iframe 载入本机各盘符的根目录，然后判断 ifra
- 用ASP.NET与SQL SERVER可是缘份最好了，稍大的程序一般第一先考虑的是SQL SERVER，只是一些很考虑经济的才使用ACCES
- 如何使用Iframe实现本页提交？例：chunfeng.html< html>< head>&n
- 此文刊登在《程序员》2009年5月期：SQL全名是结构化查询语言（Structured Query Language）,一直是后台开发者用来
- 要向数据库中添加超级链接，要经过两个步骤，一是在表中定义字段类型为“超级链接”，一是向此字段中添加数据。要在表中定义字段类型为“超级链接”，
- 虽然淘宝商城的名字中带有“商城”两字，但是很显然的，淘宝商城并不是一个B2C商城，淘宝商城仍只是一个C2C平台，充其量只是个收费版的淘宝。在
- 简单的XML操作：XML文件创建把下面的代码复制到按钮事件中编译执行后可在相应物理路径中产生Pos.xml文件XmlTextWriter x
- 准备软件:1. J2SDK(1.5.0): jdk-1_5_0-linux-i586-rpm.bin2. Apache(2.0.53): h
- 动机： 查询功能是我们在网站上见过的最普遍也是最常用的一个功能模块了。以往的信息查询都是连接到数据库的，每一次点击都必须要后台数据库的支持。
- 假设有一个表，结构如下：mysql> CREATE TABLE `a` ( `id
- 在获得SA密码后，往往因为服务器管理者或”前人”将net.exe和net1.exe被限制使用，无法添
- 因为比较简单，我就不说什么了。一看就明白的！1.sql防注入函数Function ChkStr(InString) &
