前一陣公司唯一的前端開發(fā)人員走掉了，短期內(nèi)也沒人頂上來，所以切頁(yè)面/js這種活兒只能咱自個(gè)兒攬過來了，花了大半天搗鼓了下css,整理了二個(gè)基本的css庫(kù)，方便以后切頁(yè)面，貼在這里備份

說明:
p.css ---即public.css，用來定義一些常見的公用樣式
l.css ---即layout.css，用來定義柵格系統(tǒng)的常用布局(不清楚柵格系統(tǒng)的統(tǒng)子們，先到這里掃掃盲http://www.cnblogs.com/yjmyzz/archive/2009/08/20/1550653.html-學(xué)習(xí)網(wǎng)頁(yè)柵格系統(tǒng)的幾篇好文)

壓縮包目錄結(jié)構(gòu)如下:

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

p.css很簡(jiǎn)單，不多說了，down回去自己看

pub.htm是針對(duì)p.css的測(cè)試頁(yè)面

l.css即布局樣式，命名規(guī)則解釋如下:

.g-c2-s5-sm ---g表示這是按柵格劃分的(默認(rèn)是24*40，即40px為一格，960的頁(yè)面分為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在右邊

其它類推...

特點(diǎn):
1.符合所謂的"漸進(jìn)增強(qiáng)"語(yǔ)義，即在html源代碼上，始終是main,sub,extra的順序，保證搜索引擎分析時(shí)，main(主要內(nèi)容-正文區(qū))總是最先被讀到，其它是sub(子欄目，通常是側(cè)邊欄)，最后是extra(附加欄，相對(duì)最不重要，通常是側(cè)邊廣告位之類)

2.在html源代碼不做太大改動(dòng)的情況下，如果要改動(dòng)布局結(jié)構(gòu)，只要把最外面的class名修改即可，如g-c2-s5-sm的布局，想交換main,sub的位置，只要把class="g-c2-s5-sm"換成class="g-c2-s5-ms"即可

layout.htm為l.css的測(cè)試(基本上在IE6,IE7,IE8,FF3.5,Opera10,Safari,Chorme2上都是兼容的，而且也沒用到任何hack),最后package目錄下為l.css與p.css的壓縮版本

源文件下載:http://files.cnblogs.com/yjmyzz/csslib_v0.1.rar
歡迎大家補(bǔ)充完善，如有更新，請(qǐng)記得通知我(mail:yjmyzz#126.com,msn:yjmyzy#hotmail.com)

如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇