预览地址：http://5key.net/down/bluetrip/examples/index.html

Features List:

1. 24-column grid
2. Sensible typography styles
3. Clean form styles
4. A print stylesheet
5. An empty starter stylesheet
6. Sexy buttons
7. Status message styles

官方站点下载：
http://bluetrip.org/

通常写法:

#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999;
margin: 3px 0 3px 0;
padding: 3px;
}

注释的代码段：

#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* ADDED Apr. 9, 2008 */
margin: 3px 0 3px 0;
padding: 3px; /* CHANGED Feb. 14, 2008 (Prev. 1px) */
}

上面的代码中，注释了增加代码的时间，修改代码的时间以及修改前的属性值。如果是多人协作，我建议还加上修改者的名称。当然，这样一直写下将带来过多的垃圾代码。需要定期的整理归档，保持文档的时效性。

预览地址：http://5key.net/demo/liquid-css-title/

要求如下：

1. 宽度自适应
2. 标题文字自适应
3. 尽量用一张背景图
4. 尽量少的嵌套

效果嘛，先给出我的截图如下：

以前曾做过一个自适应宽度的圆角按钮。不过这里有两个自适应在里面，所以也得稍微的修改一下。

1、先来看用到的背景图：

2、代码部分：






前两天在宜山路新华书店翻书，在一个角落里发现《CSS权威指南》，惊叹！居然还有？仔细一看，已是第三版。

记得曾有不少人问我哪里买，更甚者愿出三倍价格买去……

发此一文，只为告知仍有需要得朋友。卓越似乎已断货，要下手尽快。

豆瓣地址: http://www.douban.com/subject/2308234/

p.s: 豆瓣上的卓越亚马逊 (RMB 21.2)链接错误。

前两天看到CSSGLOBE上的这篇《Css Text Gradient》，已经能很好的适用于IE6，7及FF的方案。
关键归结与以下两点：
一、PNG自身可透明的属性。
需要注意的是：在保存PNG图片的时候，一定要注意保证背景是透明的。
二、CSS滤镜progid:DXImageTransform.Microsoft.AlphaImageLoader的使用。
示例地址：http://5key.net/demo/css-gradient-text/
示例下载

代码：

h1 {
color:#333;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-.05em;
position:relative;
}
h2 {
color:#0033FF;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-.05em;
position:relative;
}h1 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:400px;
background:url(gradient.png) repeat-x;
}
h2 span{
position:absolute;
display:block;
top:0;
left:0;
height:100%;
width:400px;
background:url(gradient.png) repeat-x;
}
* html h1 span, {
background-color:transparent;
background-image: url(none.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient.png" mce_src="gradient.png", sizingMethod="scale");
}
* html h2 span, {
background-color:transparent;
background-image: url(none.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient.png" mce_src="gradient.png", sizingMethod="scale");
}

切换图片效果是如何实现的：

其实在这里是使用onmouseout和onmouseover读入两张图片，鼠标划过图片的时候，图片的路径文件夹改变了。同时下面的那句“–未处理的原图–”display的开关也在变化。就完成了你所看到的图片效果。

这样做好不好：
图片处理效果的对比，这个功能在吐司网上很有作用。但是由于每次需要读两张图片，页面刚刚载入的时候，鼠标滑过图片可能无法看到切换的效果。
大家可能会说应该运用滑动门技术来做，一张图片就搞定了，代码上也会简单多了。但我们无法在css中加入变量，不可能每张图片都去定义。相对于onmouse这种做法，我更倾向用css去实现。

我的做法：

前段时间一直在讨论CSS框架。很多朋友看了那三篇文章后提了不少自己意见。特别是一位北京的朋友A君，他有一个小的团体，主要是做欧美的外包项目。可以说做的站点很多都是大同小异。在看完前面的介绍后，他停下手头的工作花一天时间初步的建立了一套自己的框架。接下来的一周，他们完成了10个项目的工作。在以前，每周他们大概可以完成5~6个（每个项目的工作量基本相同）。200%的效率提升！？

建立这套CSS框架中有哪些感受？A君给了我这样的回复：

1. 制定框架的人应该很充分的理解现有项目的情况
2. 一定要仔细，将可能出现的问题考虑清楚
3. 各浏览器的兼容一定要做好
4. 宁可花时间让整个团队清楚的了解整套框架，磨刀不误砍柴工

看来真是惭愧，A君的执行力很强，很快的就理解并执行下去。而我一直在提倡CSS框架，却一直没有去具体的实施下去。忙不是借口哇~~~~

大家要我放出自己定义的框架。惭愧~实际上我还没整好。先放一下我对reset.css的整理吧。

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, address, code, em, img, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight:normal;
font-size: 12px;
font-family:Arial, Helvetica, sans-serif;
}
body {
line-height: 1;
color: #000;
background: #FFF;
}
ol, ul, li {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}