网页栅格系统研究（4）：技术实现（3）
作者：玉伯 来源：Taobao.com UED Team 发布时间：2008-11-06 11:44:00
更多栅格实现
栅格化更多是一种布局思想，实现技术可以千差万别。比如今年冒出来的伪绝对定位，立刻就可以用来实现栅格系统。明城兄弟就尝试了一把。
肯定还有非常多的栅格化实现方案，这里就不一一挖掘了。
双飞翼栅格系统
挺奇怪这个名字？请先阅读这篇文章：渐进增强式布局探讨. 简单说，双飞翼布局是一种布局实现技术，可以利用它来实现一整套栅格系统。
先看test页面：Grids Layout Test.
具体技术细节在渐进增强式布局探讨一文中已经阐述，这里不再重复。有几点需要说明：
这套栅格系统并不能实现所有布局。这和YUI Grids类似，只能实现预定的一些布局。比如三栏布局，目前只加入了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四种情况，这是从淘宝的现有页面中分析总结出来的。对于同一个站点来说，太多不同的三栏比例不是好事（淘宝目前都有点多，以后可能还会进一步统一）。因此如果采用这套栅格系统的话，需要先分析站点，定义出一套合适的比例。这里有个所有比例的自动生成工具：grids_css_generator.html.
关于命名：
.grid-c2-s6表示两栏（c2: column 2）布局，sub栏的宽度是4列（s4: sub width is 4 * 40 -10）. 而.grid-c2-s6f, 最后的f表示两栏布局的第二种情况，即sub和main互换。类似地，.grid-c3-s5e6d表示三栏布局，其中sub栏的宽度是5,extra栏的宽度是6, 最后的d表示是s5e6三栏布局中的第四种情况。为了方便使用，将最常用的两栏布局
.grid-c2-s5用.grid-c2直接表示。同样的，.grid-c3表示.grid-c3-s5e6. 这是淘宝的默认值，其他站点可以根据实际情况修改。这套布局符合渐进增强式工作流程。细心的你可能已经发现，所有两栏布局和三栏布局，HTML中的DOM结构是完全一样的，只有最外层
div的class不同。如果要交换左右栏，只要非常简单的修改下class就可以。实际使用时，两栏布局和三栏布局已经够用。其实有了两栏，其它布局就都可以组合出来。这里有一个尝试性页面：grids_test4_v0.1.html. 组合布局看起来很强大，但实际使用时会把问题搞复杂，不推荐使用，干脆忘掉吧。
最后来看下两个测试页面：两栏布局grid-c2_test.html 和 三栏布局grid-c3_test.html.
目前除了发现在ie6下有个可以忽略的小bug（三栏布局中，main中的超大图片会撑出去），尚未发现其他问题。
小结
栅格系统更多的是一种布局思想，在实际使用时，根据具体需求选用合适的技术来实现即可。需要注意的是，对于栅格的技术实现来说，太灵活未必是件好事，适度灵活最难得。怎么才能适度呢？这需要疯狂实践 + 不断的反思 + 持续的重构 + 悟…
栅格搭好了页面框架，接下来很重要的一件事情就是往里面添加内容模块。让内容模块规范化，让页面生成工业化，对大型站点来说，这是栅格系统最有商业价值的地方。下一篇也是本系列最后一篇将展示栅格系统中的模块化应用。
0
投稿猜你喜欢
- 概述递归函数即直接或间接调用自身的函数，且递归过程中必须有一个明确的递归结束条件，称为递归出口。递归极其强大一点就是能够遍历任意的，不可预知
- 一、爬山法简介爬山法（climbing method）是一种优化算法，其一般从一个随机的解开始，然后逐步找到一个最优解（局部最优）。 假定所
一、全局阈值原图：整幅图采用一个阈值，与图片的每一个像素灰度进行比较，重新赋值；1.效果图2.源码import cv2import matp- PHP str_split() 函数实例把字符串 "Hello" 分割到数组中：<?php print_r(str
- 对于SQL的Join，在学习起来可能是比较乱的。我们知道，SQL的Join语法有很多inner的，有outer的，有left的，有时候，对于
- 因一些特殊需求需要以参数的形式获取字典 * 定的值，网上搜了一下并没有特别好的实现(并没有太认真去找~),所以自己实现了一个，以供大家参考:)
- 字符串在 Python 中创建字符串对象非常容易。只要将所需的文本放入一对引号中，就完成了一个新字符串的创建（参见清单 1）。如果稍加思考的
- 导语春节是中国特有的传统节日，中国结是中华民族特有的纯粹的文化精髓，富含丰富的文化底蕴，代表着我们对未来，对美好生活的向往和憧憬。新春佳节，
- 【先锋缓存类】Ver2004作者:孙立宇、apollosun、ezhonghua官方网站:http://www.lkstar.com 技术支
- 这篇文章主要介绍了深入了解如何基于Python读写Kafka,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需
- 解析json数据并保存为csv文件首先导入两个包：import jsonimport pandas as pd打开json 文件并读取：wi
- 描述Fashion Mnist 是一个类似于 Mnist 的图像数据集. 涵盖 10 种类别的 7 万 (6 万训练集 + 1 万测试集)
- 一、检测它是不是整数function Is_Int(a_str) if&
- 之前遇到技术问题总能在技术博客上得到启发，十分感谢各位的无私分享。而自己却很少发文，固然是水平有限，但也限制了知识积累和总结。今后多总结分享
- 目录1. 初始化数组2. 数组求和、求最大值、最小值3. 过滤错误值4. 使用逻辑运算符5. 判断简化6. 清空数组7. 计算代码性能8.
- 前言GraphQL是一种新的API设计语言，它提供了更加灵活、高效的API查询方式。与RESTful API相比，GraphQL可以更好地满
- 前言本文给大家深入的解答了关于Python的11道基本面试题，通过这些面试题大家能对python进一步的了解和学习，下面话不多说，来看看详细
- 本文为大家分享了python利用高阶函数实现剪枝函数的具体代码，供大家参考，具体内容如下案例：
- 一，子选择基本用法 1，子选择的定义 子迭择允许把一个查询嵌套在另一个查询当中。比如说：一个考试记分项目把考试事件分为考试（T）和测验（Q）
- 在Windows下安装MySQL ，用了官方的配置向导生成了my.ini，本以为很安稳了，谁知十多个小时过去之后，系统响应非常慢，看资源管理
