肉包子的摇滚生活

很久之前就知道SourceForge界面做了大的变化，确实变得非常的NICE，用着很爽。这2天无意中用firebug看了下，惊奇的发现居然是用YUI grid css来做的，JavaScript用的是jquery。

这里列举的是个人做的部分案例展示。项目比较早了。基本上做到了以下几点：

多浏览器兼容。IE6，7，8。firefox，opera，safari，chrome等主流浏览器都能得到几乎一致的表现。
w3c标准。代码均以符合w3c标准为基础。
良好的SEO（搜索引擎优化）。项目设计制作均充分考虑SEO的需求，并加入各类SEO辅助工具，在SEO方面有非常良好的成效，完全无需额外的SEO投入。
良好的前端优化。前端开发优化是本人的主要工作之一，所以设计的项目在前端性能上都有较突出表现。前端优化可以提高用户使用体验，页面加载速度，并且促进SEO效果，减小服务器的负担，对于流量大的网站，前端优化是减轻服务器带宽费用的最重要手段。

365517二手客车

网站地址：http://www.365517.com
案例介绍：福州某二手客车公司网站，09年12月中旬刚上线。。

卫通卫浴

网站地址：http://www.vepoo.net/index.php
案例介绍：本案例客户方已经有后台以及网站，但是不满意网站本身的设计，寻找广告公司重新设计了界面，然后将PSD设计稿交由我来实现。本案例采用yui css框架实现，并做了大量SEO工作。最佳状态时候搜索主要关键字出现在百度的第一页，50%的页面被百度收录，70%的页面被google收录。(目前由于客户执意不停的进行修改网站结构，排名与收录情况有所下降）

福建广华工贸有限公司

网站地址：http://www.fjghgm.com/
案例介绍：自己一位亲戚朋友的网站，后台程序采用WordPress，由于建站伊始，网站内容还不够丰富。

泉州千禧礼仪庆典公司

网站地址：http://www.qzqxqd.com/
案例介绍：婚庆网站。后台程序采用DedeCms，目前国内比较热门的一个CMS，前台界面采用yui css框架实现。

广告公司网站

网站地址：暂未上线
案例介绍：福建某广告公司。模仿未来广告公司网站实现，但是未来广告公司采用的是flash制作，本案例完全采用DIV+CSS实现，比起flash有着非常良好的SEO效果。后台程序采用WordPress，前台界面采用blueprints css框架实现。

背景
Meta CSS是一个很简单的CSS框架。可以点这里(下载)先一睹为快。
在深入介绍之前，我们来考虑几个web开发者非常容易遇到的问题：

同样的一个款式的按钮，有些页面它要在左边，但是有些页面要在右边
同样作用的一段提示文字，有些地方字体要大号，有些却要小号
同样风格的一段文字，有些要红色，有些却要绿色

这样的状况是相当频繁的。对此，通常有4种解决方法：

每种不同款式，定义一个css。按钮A一个css，按钮B虽然长得跟A一样，但是在右边，那就copy下A的css代码，然后改成在右边。
.a{/* 很多样式定义 */}
.b{/* 很多样式定义 */ text-align:center;}
.c{/* 很多样式定义 */ text-align:right;}
<div class=”a”>按钮A</div>
<div class=”b”>按钮B</div>
<div class=”c”>按钮C</div>

针对不同地方，利用css层级覆盖来实现。比如按钮A设定css，然后对于特别的页面，设定特别的css来覆盖
.a{/* 很多样式定义 */}
#s1 .a{text-align:center;}
#s2 .a{text-align:right;}
<div class=”a”>按钮A</div>
<div id=”s1″><div class=”a”>按钮B</div></div>
<div id=”s2″><div class=”a”>按钮C</div></div>
利用css组合来实现。如上面的代码片段，设定css基础类，然后进行组合。对于按钮A，它的class为x，在右边的按钮B，它的class为x tar，对于B来说，它的样式就是x与tar组合起来的。
.a{/* 很多样式定义 */}
.tac{text-align:center;}
.tar{text-align:right;}
<div class=”a”>按钮A</div>
<div class=”a tac”>按钮B</div>
<div class=”a tar”>按钮C</div>

直接内嵌style来解决。
.a{/* 很多样式定义 */}
<div class=”a”>按钮A</div>
<div class=”a” style=”text-align:center”>按钮B</div>
<div class=”a” style=”text-align:right”>按钮C</div>

再来分析下4种方式各自的优缺点：

每种不同款式，定义一个css。随着代码量变大，css将会变得越来越难维护。当你需要修改一个按钮风格的时候，所有同样风格的按钮都要改过。你copy到那里，哪里就得改，很容易遗漏。并且代码量也会相对更大，很多可重复利用的资源没有利用起来。
利用css层级覆盖来实现。利用css选择符的优先级来覆盖是很好的做法，也是很常用的做法。不过在很多情况下，例如大量的动态页面，我们没有办法完全预知定义的css的id或者类名，而无法定义特别样式。在一些可以控制的情况下，定义太多特殊类名用来区分，又会造成大量后期维护的困难。
良好的运用css组合方式，可以比较妥善的解决上面的2个问题。首先，公用样式都被提取了，你修改一个按钮，只需要改公共的部分。其次，不需要绞 尽脑汁去想一个不会冲突的css类名，遵循组合的规则就可以了。当然，这种方法也有缺点，较为复杂的组合需要代码作者自己熟悉覆盖的规则，在css代码里 面并不知道html页面拿哪一些规则拿来进行组合，修改一个规则可能导致调用css的地方出问题。
内嵌style优点就是简单快速。缺点也很明显，不仅写起来有点麻烦，代码也难看，维护性也不好。很重要的一点，到处都是style会让人BS的，觉得你这前端div+css用得也忒不好了。所以代码洁癖的人往往宁可定义一个新样式，也不愿意页面有一个style。

我们来看看一些大型站点是如何来解决这个问题的：
/* 一段摘抄自开心网kaixin001.com的css代码 */
.l{float:left;}.r{float:right; clear:right;}.c{clear:both;}
.tal{text-align:left;}.tar{text-align:right;}.tac{text-align:center;}
.c0,a.c0{color: #000; font-family:Arial;}
.c6,a.c6{color:#666; font-family:Arial;
/* 一段摘抄自163.com的css代码 */
/* Font */
.fB {font-weight: bold;}
.f12px{ font-size:12px;}
/* Other */
.left{ [...]