技术债务(母鸡的遭遇)

技术债务, 是指匆忙的实现一个功能,却对现有的程序库造成了破坏(在实现的过程中污染了代码库的设计),这对于一些项目经理/客户来说就像是天书奇谈。也许他们是明 白的,只是不愿意承认罢了,我估计是这样的。不管怎样,我想起来一个小故事,当下次遇到这种情况,需要向他们解释增加某些新功能的代价时,也可用讲这个故 事给他们听。

一个农夫有3只母鸡。每只母鸡每天下一个蛋。农夫跟当地的一个食品店老板做生意。食品店老板每天从农夫那里买2给鸡蛋放在店里出售。一切都很好,直到有一天,食品店老板出现在农夫家里:

食品店老板: 哎呀,今天我需要一些鸡肉。

农夫: 鸡肉?你和我的生意里可不包括这些。

食品店老板: 我知道。但我真的需要一些鸡肉。我计划要做一个B2S(S是胃的缩写)模式的PaaS(P是肉禽的缩写)平台。

农夫: 什么?

食品店老板: 非常重要的东西。你可以提供我一些鸡肉吗?

农夫: 这样呀,事情不是那么容易办到 — 我要孵化鸡蛋,等小鸡长大了才能给你…少说也要一个月吧。

食品店老板: 一个月?太久了…我以为你现在就能给我呢。

农夫: 时间有自己的脚步,你必须耐心一点等。

食品店老板: 可是,为什么你不能在现有的母鸡中杀一个呢?这样一来,我有了鸡肉,你每天还能产两个蛋。这就够了,不是吗?

农夫: 可是,我不觉得这是一个好主意。这会把我推向一个没有回旋余地的境况,万一剩下的鸡中有一只突然出了什么意外怎么办。

食品店老板: 放心啦,不会发生那样的事的…我真的非常非常需要鸡肉!杀一只鸡吧!

农夫: 那好吧,我想我可以…

于是,农夫拿起一把刀,把他的一只母鸡送入了天堂。食品店老板得到了他的鸡肉,返回了食品店。

一周后,食品店老板又一次来到了农夫家里:

食品店老板: 你好,我来了!

农夫: 你好,有什么事?

食品店老板: 你听我说 — 你的鸡肉好极了。事实上,它是如此的鲜美,卖的如此的好,你必须要再给我一只鸡。最迟明天早上。

农夫: 这是不可能的事。如果我要再杀一只鸡给你,我就没法每天提供你两个鸡蛋了。

食品店老板: 哦,别那么紧张!客户需要鸡肉,我已经答应客户明天早上提供给他们了…

农夫: 不行,绝对不能这么干。如果我这么做,我就履行不了我和你的协议了,你知道吗?如果我这么做,我就没法提供你足够的鸡蛋了。

食品店老板: 可是我真的真的需要鸡肉!明天早上之前!否则客户会发飙的,地球将会塌陷,世界末日将会到来!给我一只鸡吧,现在!

农夫: 那好吧,如果你非要这么不顾后果的想要,那就拿去吧!但是,从现在开始,鸡蛋我是没法提供你了,明白?

食品店老板: 当然,当然。但我相信是个很聪明的人,我猜你能找到方法解决这个问题。再见!

食品店老板离开回到了店里。

第二天:

食品店老板: 嗨,鸡蛋呢?

农夫: 你什么意思?

食品店老板: 鸡蛋。你只给了我一个鸡蛋。发生了什么事?

农夫: 发生了什么事?我有3只鸡,你拿走了两只。现在就剩下一只。一只鸡,一个鸡蛋。我认为我解释的已经很清楚了。

食品店老板: 但是合同里并没有这些!合同里说的很清楚 — 你每天提供我2给鸡蛋!你现在让我向客户怎么交代?

农夫: 哦,情况我很明白。我无能为力。

食品店老板: 好吧,好吧,不谈这事了。咱们聊点其它事情…要是能再能点鸡肉就好了。你再给我一些吧?

所以,千万别学农夫 — 坚决拒绝为了当前利益而长久的破坏你的代码库的无理要求,如果你被强迫这样做,拒绝承担这样的任务 — 也不要做食品店老板 — 不要做提出这样不合理的要求,你要为自己的决定承担后果。

[本文英文原文链接:On technical debt (now with chickens!) ]

作为一个创业者,如何在创业过程中保持清醒

我的一个曾经研究创业学的朋友最近也创建了他自己的公司,在创业学术领域有过多年经验和研究的他最终决定离开象牙之塔而踏上自己的创业之路。两周前,我们在一起吃饭,或许是以前职业的原因,他问了我一个问题:创业者如何保证在创业过程中,不迷失在自我中心里而无法自拔?

之所以提出这个问题,是因为他发现做一个创业者要比他之前想像的难很多:合作伙伴、截至日期、用户期望、市场定位等很多事情都让创业者承受巨大的压力,这远比他之前所了解的创业要难得多。

我想了一会儿,给了他下面这几个建议。不要认为这只是一个有趣的话题,实际上它很严肃。

1. 不要问自己:如果是别人,他们会怎么做?

刚开始时,很多创业者都想学者别人如何做这些事情,因为模仿前人的做法是件很容易的事情。但千万不要这样做,你做起来越困难,你的竞争优势越明显,竞争门槛也就越高。在大公司里,人们按部就班就行,但创业公司不能这样。

2. 坚持最基本的原则

其实商业非常简单。你今天花一定成本买了(生产、发现、发明)一些东西,然后明天以更高的价格卖掉了它,你就赚钱了,其他东西都将退居其次。不要浪费成本在对你公司成长无益的事情上,不要一直在网上炫耀,去做一些对公司有价值的事情。

3. 你的主要精力是让公司运行良好

当 你要作出艰难的决定时,首先要考虑公司的未来。对于单纯的去迎合合作伙伴、自己、投资人或者员工,是件很容易的事情。因为它是可见的,但凡事从公司的角度 着想就比较难了。作为创业者,首先要保证公司能正常运行下去,这是需要远见和魄力的。当在创业过程中有疑问时,就先为公司想想吧。

4. 学会去热爱冲突

创业过程中不可避免的会遇到各种各样的冲突,但不要一直逃避它们。当你必须在两个客户中择其一时,你在获得一个客户带来的价值时就必须承担另一个客户带来的损失。但这是正常的,只要你的决定在总体上给公司带来了价值,这些都是值得的。

5. 学会去相信直觉

有趣的是,创业过程中很多重要的决定都是基于直觉的。有些事情是我们先感觉应该这么做,然后才发现这么做的理由。要让大家相信你的直觉并能做出正确的决定。否则的话你要花费大量的时间去说服别人你的决定是对的。

总结

在创业过程中陷入自我是很容易的事情,这里没有现成的办法。我们每天都会遇到各种各样令人抓狂的问题,我们必须去习惯正确的解决事情。创业就是这样,所以很少有人愿意做。但当你决定做下去的时候,就要坚持最基本的原则,以及你的直觉。

即将到来的战略转变:移动 Web 还是移动 Apps?

 

 

目前来看,移动应用比移动网站的易用性更高,但变化即将发生,移动网站最终将优于Apps,成为更好的策略选择。

一家公司制定移动策略时,最重要的问题是:是否需要考虑为移动设备特别做点什么。一些公司永远都不会获得太多的移动使用量,这样的公司就应该专注于桌面站点上,让它在小屏幕设备上的使用不至于糟糕得让人难以忍受。

但是,假如你的网站恰好对移动用户有着不错的吸引力,那么第二个应该考虑的策略问题是:你应该推出一个移动网站还是开发一个特殊的移动应用?这个问题现在的答案可能大大不同于将来的答案。让我们看看著名Web可用性研究专家Jakob Nielsen是怎么说的。

 

当前的移动策略:Apps是最佳选择 

 目前来说,如果你能承受得起,那就推出一个移动应用。这篇文章移动设备的易用性研究清晰地说明移动应用比移动网站的用户体验更好(手机上使用移动网站的易用性比桌面网站高,但是移动应用更高)。

你有必要知道一些历史数据。事实上,移动应用在测试中能够击败移动网站。当你在考虑一个移动策略时,你不必知道为什么赢家是最好的,而下面我必须把它阐述清楚。

移动应用比移动优化网站的易用性更高,是因为在网站设计过程中优化是有限的。在浏览器上运行的移动应用比网站在对每个单独设备的劣势,发挥他们的优势方面有更强的针对性。

本地应用的优越性适用于任何平台,包括桌面电脑。正是由于桌面电脑功能强大,所以基于Web的应用能够满足许多任务的需要。

与此相反的是, 移动设备能够提供给用户的体验却捉襟见肘:小屏幕,缓慢的连接速度,高昂的交互代价(尤其是用户在打字输入的时候, 或者是因为用户无法双击或悬停操作)以及很低的触摸点击精度,设备越差,完善其特性就显得越重要。

Apps也能够为内容提供商提供优秀的商业案例,因为不同的应用商店都会提供虚拟支付功能,这样你就可以从你的用户身上筹集资金,这在公共互联网上是很困难的。

最后让我们来比较一下Nielsen的网络带宽定律和关于计算机能力的摩尔定律两者的不同。在接下来的十年里,网络带宽将有可能比现在快57倍,而计算机的计算能力将会比现在强100倍(拿我们现在用的微不足道的硬件和 未来的电脑将会变成怪兽 来比较)。

换句话说,在未来的十年里,运行本地代码的相对优势将会是从网络上下载东西的近两倍。这也是有利于移动Apps的一个方面。

未来的移动策略:Sites 是最好的选择 

在未来,移动应用和移动网站的成本收益比又是另外一番景象。

尽管我刚才讲过,计算机的能力在未来将会提升100倍,这并不意味着iPone14就一定会比iPhone 4S快100倍。更可能的情况是,硬件优势将会在速度和其他移动优势(像电池寿命)之间分配。所以未来的手机或许只会比现在快10倍(但是会更轻巧,而且 一次充电可以使用很长时间),相反下载的时间将会减至现在的1/57。

由于需要为更多的平台开发应用,移动Apps的代价将会增加。最低限度上,你的应用必须支持Android,iOS和Windows Phone。而且在这些平台当中,许多未来都很有可能拆分成多个子平台,这些子平台需要不同的应用来提供良好优秀的用户体验。

为了用户体验的目的,iOS已经分开为iPad和iPhone。尽管这两款设备使用相同的操作系统,但是需要不同的UI设计(请参阅我们免费提供的iPad使用性研究报告

Amazon.com最近推出的Kindle Fire产品在新的不同平台上为用户提供Android用户体验。就像我们的Kindle Fire使用性研究所说的,你必须为这个畅销的非标准设备,开发单独的UI和单独的app来提供优秀的用户体验。

很显然我们可以期望,未来的UI会呈现更进一步的多样性,这使得移植apps的代价变得非常昂贵。

相反,移动网站将会保留一些跨平台性能,你根本不需要许多不同的设计考虑。高端网站只需要为手机,中等尺寸平板(像Kindle Fire)以及大平板提供三种移动设计。运用像响应式的设计理念将会使得这些不同的网站版本适用不同的屏幕尺寸和设备。基本的UI设计在6.8英寸和 7.5英寸的平板上都会表现的很好,你只需要简单的放大缩小一点即可(5英寸的手机需要一个根本不同的设计—不光需要调整布局以及更少的特性和缩减的功能)。

更重要的是,像HTML5这样的新web技术将会极大改善移动网站的性能。Financial TimeWeb App以及Playboy推出的移动网站,他们的UI跟功能报纸杂志都很相似。

现在,FT和Playboy使用网站而不是apps是出于商业原因而非UI原因。出版商厌倦了将订阅收益的很大一部分分给App Store。而且Playboy希望出版更多刺激人们的内容,这在Apple严格的审核中是不被允许的。

免于被审查以及无须将受益给他人提成的优点,自然成了企业倾向于使用免费的互联网而不是私有的受限制的App Stores的原因。未来驱动使用移动网络的其他原因将会包括:更好的UIs设计以及更强的自适应实现。

移动网站策略的最后一个优点是能够与整个web很好的整合集成。用户链接到一个网站要比整合一个第三方应用更加容易。用长远的眼光来看,Internet将会击败那些小的封闭环境

(Apps 在一些需要功能丰富的任务环境(比如照片编辑)中表现的会更好,而移动网站在电子商务/无线电子商务, 企业网站,新闻,医疗信息,社交网络等领域将会有更好的表现空间,这些领域的内容表现都很丰富,而不需要频繁的数据处理)

 何时会发生战略的转变 

精确地讲,对于大多数公司来说,关键的问题在于:这种策略变化何时会发生?或者说,放弃移动Apps而选择移动网站的最佳时机在哪里?

很可惜我也不清楚。易用性调查可以告诉我们,在不同的场景里,什么对用户来说才是最好的,但是它不能够预测这些场景在现实世界里会以怎样的速度发生变化。按照我的经验来讲,事情的变化要比人们想象中来的更加缓慢。

举个例子,在2000年9月,我曾说过: 方便移动使用需要这样一种设备——像纸牌一样,没有按键并且能够充分利用设备的每一个像素。几个月以后,我预测欧洲供应商对于非web手机的偏爱将会使得欧洲大陆失去在移动技术领域的领先优势。

以上两个预测最后都成为现实,仅仅不到七年的时间,(a)iPhone面市,(b)由一家电脑公司而非手机公司推出。这刚好印证了我之前的两个预言。

更糟糕的是,在2001年,我曾设想“移动设备将会很快就会变得易用”,而这个“很快”一等就是6年。

良好的移动设计似乎就在前面不远。我必须了解用户需要什么,而且我不认为这很难办到。不要以为你能清楚的看到某个景物,它就离你很近。就像我在文章回顾自己10年的写作历程里所承认的那样,当我错误估计某些时机的时候,常常是因为我对新技术的潜力充满激情。而当我正确的时候,却常常是因为自己太过保守。

总结:从长远来看,我非常相信移动网站将会击败移动Apps。但是什么时候发生我自己并不确定。当前,如果你真心想提供最好的移动用户体验,我的建议是开发移动Apps。

从 Battleheart 放弃 Android 版本说起

Battleheart 是一款同时登陆 iOS 和 Android 的掌上游戏,其画风精巧新颖,人物造型可爱,可玩性非常强。然而就在 3 月 9 日,Battleheart 的开发小组 Mika Mobile 在其博客上宣布将放弃对其 Android 版本的继续支持,在这篇博客中,Mika Mobile 罗列了 Android Market (已更名为 Google Play )的诸多不是。它指责 Android Market 一方面限制 App 大小,一方面却又允许开发者提供额外的数据包供用户下载,另外 Android Market 在下载 App 时,要求设备必须保证 30M ~ 50M 的下载缓存,而许多机型并没有足够的内存来满足这样的要求。尽管后续版本的 Android 允许用户将 Apps 安装在 SD 卡上,但作者表示已经无力再修改 App 以使其适用新版本系统的要求了。

而当谈及在 Android 平台的开支和收益时,Mika Mobile 更是满腹怨言,它说:

去年,我们花费了约 20% 的总人工时间来处理 Android 版本出现的这样或那样的问题 —— 移植、平台特定的 bug 修复,客户服务等等。我更愿意把时间花在为你们提供更多的内容上,而不是吃力不讨好地修改着色和纹理格式以适应不同的 GPU ,或者推出新的补丁以使其支持新的设备而不会发生崩溃,又或者请教他人怎样修复一个没能通过审查的安装包。我们花费了不菲的开支用于测试各式各样的硬件。这些都是我们开发 Android 版本的必走流程。与此同时,Android 版本的销售总额仅为我们年收入的 5% 左右,并且还持续萎缩。不用说,(即便是)这个比例也是难以维持的。

而在 3 月 11 日,据 The Verge 报道, 在 iOS 平台备受赞誉的免费拍照分享工具 Instagram 宣布不久后将登陆 Android 平台。在 SXSW 会展上,Instagram 的创始人 Kevin Systrom 向人们展示了运行在 Galaxy Nexus 上的 Instagram 应用,同时补充道:

它将是你见过的最出色的 Android 应用之一,某种程度上,甚至比它的 iPhone 版本更优秀。

Battleheart 和 Instagram 对 Android 截然相反的两种看法有点令人费解,不过仔细分析后不难发现,这两款应用最大的区别在于 Battleheart 是一款售价为 2.99 美元的收费应用,而 Instagram 则完全免费,似乎正是这点区别决定了二者对 Android 平台天壤之别的态度。如果真是价格问题,那通过这件事,我们再次看到 Android 平台存在已久的问题,那就是:

开发 Android 收费应用似乎真的不赚钱。

类似的开发商对 Android 的抱怨我们早有耳闻,而就在前两天,仍然有开发者抱怨 Google 支付费用过于迟缓。与苹果的 App Store 相比,Android Market 更像一个 Free Market ,其主页上向用户推介的也几乎都是免费应用。牛津大学在 3 月 6 日发布的调查报道中称:

Android Market 包含了免费应用的大部分(73%)。有分析指出这些应用中大约有 80% 依靠针对性的广告支撑。此外,就付费应用而言,免费应用更受欢迎:在付费软件中,下载量超过 100 次的约为 20% ,超过 10000 次的仅为 0.2% (相比较下,免费应用对应的数字为 20% )。

细想之下,这与 Android 自身的气质极为吻合。Android 本来就是一款免费系统,以免费、开放为主要特点来吸引设备商和开发者。这种前提下,Battleheart 和 Instagram 对 Android 天差地别的态度就不难理解了:

Instagram 作 为一款基于社交网络的应用,在 Android 平台发布免费的 App ,能够迅速地聚揽大量用户,后期可以通过广告服务来获取效益。相比之下,Battleheart 作为一款以本地内容为主的掌上游戏,在获益手段上远没有 Instagram 丰富,其主要的收入只能来源于用户的付费下载。而 Android Market 推崇的免费策略让付费应用在这样的平台里显得格格不入,下载量得不到保证,收入自然就无从谈起。再加上因 Android 平台分裂带来的兼容性问题、不同设备间的运行调试,以及日常的管理维护,开发者的工作量在无形中增加了许多,这将使新版本的开发工作难以为继。这么分析的 话,Battleheart 放弃对 Android 版本的继续开发就合乎情理了。

想当初,Google 推崇的免费、开放策略为 Android 赢来了大批的设备商、开发者和用户,这也让 Android 在众多 iOS 竞争者中崭露头角。然而时至今日,也正是免费和开放,造成了 Android 设备商各自为政、平台分裂的局面。由此带来的应用在不同设备和系统版本间的不兼容性,更是让开发者们疲于应对——只是不希望 Battleheart 造成一种恐慌气氛。

CSS 布局:40个教程、技巧、例子和最佳实践

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www.noupe.com/css/css-layouts-40-tutorials-tips-demos-and-best-practices.html。文中的不少的例子在一本经典的CSS书籍《CCS: The Missing Manual, 2nd Edition》中都可以找到,据我所知,第二版在中国没有翻译出版。你可以从这里下载英文版(不过需要注册个用户名)

正文
基于CSS的布局能提供更灵活布局方式和更强的用户视觉体验。一些重要技巧和关键点可以帮助初学者理解CSS布局的基础和本质。这也是本文成文的原因 ——找到那些完美的布局,完全灵活的,等高栏和工作完美的布局。
因此下面这个列表就是我们整理了网络上关于基于CSS布局的一些技巧,教程和最佳实践的列表。
当然你也可能对下面这些和CSS相关的主题有兴趣:

The 7 CSS Hacks that we should use
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Using CSS to Fix Anything: 20+ Common Bugs and Fixes

 

CSS 布局教程

1-使用CSS完成三栏固定布局结构– 这篇文章解释了如何实现一个基于的HTML/CSS来设计一个简单的带有基本要素(顶部的logo条,导航条,文本区,定义分类的中部栏,右边侧栏插入google的120X600的广告区)的固定三栏页面布局。

2-使用CSS设计页面布局– 如何使用CSS文件来为你的站点设计页面布局。

3-如何创建一个水平布局的站点– 创建不同于常规的水平布局的站点技术(译者注:水平布局,客户体验也就仁者见仁了)


例子查看这里 |下载

4-超级简单的两栏布局– 创建不同于常规的水平布局的站点技术(译者注:这里是原作者笔误吧和上面的内容一样).

例子查看这里 下载

5-简单两栏CSS布局– 这是一个创建简单两栏布局的教程。这种布局包含了一个标题区,一个水平导航条,主内容区,边侧栏,和页脚区。并且这个布局是水平居中的。

例子查看这里

6-圣杯布局(The holy grail layout) – 3栏布局会有一些问题 ,这篇文章讨论了一种三栏布局——两栏固定宽度边侧栏加上一栏变宽中栏布局,保证了页面的良好结构和清晰。

例子查看这里

7-CSS居中101– 如何使用CSS完成居中一个固定宽度的布局

使用CSS,通过下面两条规则完成对id为container的DIV所包含的内容居中

1234<body>  <div id="container"> ...entire layout goes here... </div> </body>12345678body {     text-align: center; } #container {     margin: 0 auto;     width: xxxpx;     text-align: left; }

8-从头创建CSS布局– 这个指南通过创建一个全功能的 CSS布局来一步步教你入门CSS布局。

9-非主流!多栏布局– 多栏布局,等高栏(每一列的高度都相等),固定或变宽中央区,简洁标记,CSS 。(译者注:原文作者的图配的和上图一样)

例子查看这里

10- 创建天下无双的CSS布局– 高灵活性布局,等高栏,跨栏垂直摆放元素。本文告诉你通过何等手段完成这些目标,并使用它们创建天下无双的CSS布局(译者注:原文是One True Layout ,不知道怎么翻译,就天下无双吧。)

查看这里

11-从PSD到HTML,手把手完成WEB设计-从Photoshop到完整HTML,全过程手把手教会你。

例子查看这里 | 下载

12- 5个XHTML/CSS技巧 – 5个CSS技巧帮助你完成从基于表格的布局到基于CSS的布局。

13-设计一个基于CSS的模板 – 这是一个教你创建基于CSS的模板页的基础教程。这个教程由下面几个部分构成:第一部分覆盖了在Photoshop CS*中的创建导航条按钮,第二部分:创建背景接下来的清单是标题和页面布局,最后的部分在XHTML和CSS中实现。

下载

14-使用CSS布局跳出常规布局– 如果你理解了基于表格布局的工作方式,你能通过合并或拆分表格创建你随心所欲的布局。就这个目标(同时支持灵活性和可维护性),CSS能够提供比基于表格更多地东西。Jina Bolton的教程解释如何达到这个目标。

15-高级CSS教程:手把手– 这个教程的终极目标创建一个CSS布局,这个CSS布局精确地重组了原有使用table的WebReference.com的布局。

16-了解CSS布局的6个关键要素-本文讲述了6件基于CSS布局需要了解的事情:盒模型(Box Model),浮动栏(Floated Columns) (译者注:float是WEB布局最重要的一个属性了)。使用Em来设置尺寸(Sizing Using Ems),图片替换(Image Replacement),浮动导航和Sprintes。

17-你会犯这些常见的博客布局错误吗?-讨论4个博客布局中常见而且易修复的错误。

18-页面布局-CSS页面布局中的浮动元素和定位元素实践指导。

你可以查看这些例子:Absolute Position within a relative box two floated boxes using a border to provide the background for a column

19-Site in an Hour– 使用复杂CCS布局完成简单的工作。

关于布局的最佳资源

下面的大多数这些资源不需要许可就能直接使用,然而,其中的一些需要先发邮件确认一下是否可以使用这些资源。因此,在使用之前最好先检查资源的版权信息。

20-简单CSS页面布局– 这里有一套2栏和3栏的CSS布局。

你可以通过这里查看这些样例 Liquid three column layout, Left aligned, set width and Liquid insanity.

21-完美的三栏变宽布局(百分比定宽度)The Perfect 3 Column Liquid Layout (Percentage widths)– 没有CSS hack(译者注:不知道怎么翻译,点击这里查看解释). 良好地收索引擎优化.无图. 无Javascript. 跨浏览器 和IPHONE设备兼容

你可以通过这里查看样例 Liquid three column layout, Left aligned, set widthLiquid insanity. (译者注:这里的链接和上面重复了,哎,原文的错误吧)

22-CSS模板和样例

你可以通过这里查看这些样例 3 columns fixed centered, fixed Box totallycentered and 3 columns, alldynamic

23-IM 布局– IM 布局是一种简单地的CSS布局系统,IM布局提供了全A级的浏览器的支持。

你可以通过这里查看这些样例: The Holy Grail 3 Column Layout, The Classic Blog Layout The Multi Column Layout.

24-CSSplay – CSS布局列表

你可以通过这里查看这些样例:Cross browser FIXED, Three columns and CSS Frame – The Holy Grill.

25-Layoutgala – 基于同样的的标记l得到最大数量的不同的布局方式。没有CCS hack,没有CSS workaround ,良好的浏览器兼容性。40种不同布局。

你可以通过这里查看这些样例:Three fixed Columns, Three percentage columns and Liquid, three columns, hybrid widths (吐槽:没有等高,不好看).

26-Glish– 许多有用的跨浏览器布局技术

你可以通过这里查看这些样例: 3 columns, the holy grail, 2 columns, ALA style and 3 columns, all fluid

27-Thenoodleincident– CSS 从简单的单盒到3盒并增加一个顶部条,所有都是变宽。

28-The Layout Reservoir– 很多有用的CSS布局技术

你可以通过这里查看这些样例: 2 columns – left menu, 3 columns – flanking menus Auto-width Margins .

29-The only CSS layout you need– 在这篇文章中将会为你展现10个基于同一的HTML的不同的的布局。

你可以通过这里查看这些样例: Three column CSS layout – left and right menu, Two column CSS layout – top and left menuThree column CSS fluid layout: 100% width

30-另一个多栏布局-是一个创建当代流行的变宽的浮动布局的XHTML/CSS框架。这是一个多功能实用的布局。

点击这里下载.

31-Liquid Designs– 使用XHTML和CSS的变宽设计库。

最佳实践

如果你需要寻找一些布局灵感,你可以从下面的网站链接中找到。这些站点演示了CSS布局如何应用于不同类型的网站。查看这些网站是如何分成2栏或3栏,或混合宽栏和窄栏布局。

32-Helldesign

33-Silverbackapp

34-OS communications informatiques

35-Rockatee

36-Darrenhoyt

37-Makebetterwebsites

38-Elitetheme

39-Studio7designs

40-Brightcreative

(全文完)