根據模組化的思想，將目錄劃分為html，css，image三大部分。

css部分：（base.css、globa.css和mod資料夾）
1、base.css放置的是reset，clearfix等基礎類和工具類；
2、globa.css放置的是佈局樣式，包括header，footer等樣式；
3、mod資料夾下面放置的模組，元件的樣式；

html部分：（mod資料夾和template資料夾）
1、mod資料夾下面放的是模組的程式碼片段集合。如果有可能儘可能粒度劃分的更細，因為這些都是程式碼片段，希望以後有工具做到程式碼片段和css的自動載入;
2、template資料夾下面放的是產出物，其實就是一些模組的拼合。只要模組寫的夠好這塊工作就很好做了。

images部分：（base資料夾、data資料夾、icon資料夾和mod資料夾）
1、圖片資料夾的部署和css部署是對應的，base和global的前景圖和背景圖放在base資料夾裡面。
2、用作例子的示例圖片放在data裡面比如，頭像之類的
3、第三方和icon放在icon的資料夾中
4、Mod資料夾中放的是模組所需要的前景圖和背景圖，小圖示用sprite合併到base中

下面是幾個有關css的tips：
1、對非a標籤新增偽類狀態，例如span:hover{}。在採用偷天換日的手法a:hover span{}，解決IE6相容只許新增一個a:hover{#:FFF;}觸發IE6下a標籤hover狀態的haslayout即可。

2、選項卡去掉虛線框，IE解決方案：<a href=”..” hidefocus=”true”>；FF下解決方案：a:focus {outline:none;-moz-outline:none;}

3、內聯元素居中水平採用父元素text-align:center;垂直採用height=line-height；塊級元素水平居中自身margin：0 auto;text-align:left（對子內聯元素不入侵）
父元素text-align:center;塊級元素可以採用text-indent調解左邊距，比padding-left的好處在與不會影響固定寬度值

4、小圖片存為gif檔案比png-8要小，但是像css sprites這種顏色種類不多的大圖片存為png-8要比gif要小

5、內聯元素用display:inline-block;比較給力，IE6下雖然不支援這個屬性，但是會觸發內聯元素的haslayout，所以表象一樣。塊級元素就不行了

6、內聯元素float:left;之後按理說應該表現為塊級，但是文字在IE6和IE7下會填充上一行的空隙。解決方案white-space: pre;

7、IE6下當高度小於font-size的時候，會被撐高。解決方案：font-size:1px;

8、css在瀏覽器渲染過程中是從右向左讀取的，儘量不用名字空間約束樣式名，儘量不對元素直接寫樣式。