DIV CSS 佈局教程網

細心的朋友們也許早已發現這個選項了，不過一直懶著沒寫說明，現在補上:)

每改動一點點皮膚要手動更改校友的10+個皮膚文件多有點慢性自殺，更別提Qzone的4、50套皮膚了。有了CssGaga的皮膚1toN，你就可以只維護其中一套皮膚，當然還有一個替換規則文件skin.csv。

1. 皮膚文件的組織方式

根據項目現有的規則，比如有3套皮膚：

skin1/py.source.css
skin2/py.source.css
skin3/py.source.css

比如只維護skin1，其余的skin2、skin3自動生成，則將替換規則文件skin.csv放置在skin1文件夾中，即

skin1/py.source.css
skin1/skin.csv
skin2/py.source.css
skin3/py.source.css

2. skin.csv編寫原則

skin.csv可以用office的excel來編輯

備注 skin1 skin2 skin3 鏈接色 #077D01 #A86000 #395690   #3D5668 #7E2225 #4E4F53 禽獸被yt鄙視的寫法 .frd-add-list .act button.cfm{background-color:#57913c;background-position:0 -160px} .frd-add-list .act button.cfm{background-color:#ea7b21;background-position:0 -244px} .frd-add-list .act button.cfm{background-color:#0f7ba3;background-position:0 -202px}

要注意以下幾點：

1. 第1列：為備注。可留空，但是必須有這一列
2. 第1行：第二列必須為skin.csv所在的文件夾名，之後分別為其余皮膚所在的文件夾名
3. 第2+行：為替換規則。以CssGaga壓縮後的代碼為准，比如色值#ffffff被壓縮為了#fff，則這裡要寫壓縮後的值#fff，再比如

   .frd-add-list .act button.cfm { background-color:#57913c ;background-position:0 -160px; }

   會被CssGaga壓縮成

   .frd-add-list .act button.cfm{background-color:#57913c;background-position:0 -160px}

   所以規則裡要寫後者

3. 皮膚1toN

以上兩步做好後就一勞永逸了，平時維護的就只有這兩個文件

skin1/py.source.css
skin1/skin.csv

根據skin1就可以自動生成所有皮膚：

1. 勾選皮膚1toN
2. 將skin1/py.source.css拖進CssGaga
3. 圍觀CssGaga文本框的炫麗滾屏

如果同時選擇的有自動同步，則自動把生成的皮膚拷貝到幾個測試環境去了，爽吧，有了CssGaga，准時下班不再是夢:)

CssGaga – 皮膚1toN View more videos from ytzong