前一阵公司唯一的前端开发人员走掉了，短期内也没人顶上来，所以切页面/js这种活儿只能咱自个儿揽过来了，花了大半天捣鼓了下css,整理了二个基本的css库，方便以后切页面，贴在这里备份

说明:
p.css ---即public.css，用来定义一些常见的公用样式
l.css ---即layout.css，用来定义栅格系统的常用布局(不清楚栅格系统的统子们，先到这里扫扫盲http://www.cnblogs.com/yjmyzz/archive/2009/08/20/1550653.html-学习网页栅格系统的几篇好文)

压缩包目录结构如下:

D:.
│  ifrm.html
│  layout.htm
│  pub.htm
│
└─c
    │  l.css
    │  p.css
    │
    └─package
            l.css
            p.css

p.css很简单，不多说了，down回去自己看

pub.htm是针对p.css的测试页面

l.css即布局样式，命名规则解释如下:

.g-c2-s5-sm ---g表示这是按栅格划分的(默认是24*40，即40px为一格，960的页面分为24格),c2表示column为2(即二栏main,sub),s5表示sub栏为5格(即5*40=200px,再考虑到10px的间隔，最终宽度为190px),sm表示布局顺序(即sub-main，sub栏在左，main栏在右)

.g-c2-s5-ms ---其它同上，最后的sm表示main-sub,即main在左，sub栏在右

.g-c3-s5e6-sme ---c3表示三栏布局(main,sub,extra),s5--即sub占5格，e6--即extra占6格,sme即sub-main-sub,代表sub在左，main在中间,extra在右边

其它类推...

特点:
1.符合所谓的"渐进增强"语义，即在html源代码上，始终是main,sub,extra的顺序，保证搜索引擎分析时，main(主要内容-正文区)总是最先被读到，其它是sub(子栏目，通常是侧边栏)，最后是extra(附加栏，相对最不重要，通常是侧边广告位之类)

2.在html源代码不做太大改动的情况下，如果要改动布局结构，只要把最外面的class名修改即可，如g-c2-s5-sm的布局，想交换main,sub的位置，只要把class="g-c2-s5-sm"换成class="g-c2-s5-ms"即可

layout.htm为l.css的测试(基本上在IE6,IE7,IE8,FF3.5,Opera10,Safari,Chorme2上都是兼容的，而且也没用到任何hack),最后package目录下为l.css与p.css的压缩版本

源文件下载:http://files.cnblogs.com/yjmyzz/csslib_v0.1.rar
欢迎大家补充完善，如有更新，请记得通知我(mail:yjmyzz#126.com,msn:yjmyzy#hotmail.com)

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛