960 grid system


960 <wbr>grid <wbr>佈局小結


960個像素作12欄 16欄 24欄分割
12欄和16欄分割的每個grid左右margin各10px,24欄分割每個grid左右margin各5px。

幾個重要的關鍵字和概念
1.container容器:960px的寬度,左右margin auto 居中。
2.grid_x x方格:最小方格寬度*x px寬度+左margin 10px+右margin10px(24欄佈局分別爲5px)
3.prefix_x前間距:使用padding屬性。讓grid和前面保持(最小方格寬度+間距)*x的距離.(例如12欄的 prefix_3 的前間距爲 (60px+20px)*3即向前隔開三個方格的距離 )。
4.suffix_x 後間距:同理prefix_x,向後隔開x個方格。
5.pull_x 向左推在正常的佈局下向左推x個方格。
6.push_x 向右推:在正常的佈局下向右推x個方格。
7.alpha 清除前間距:清除使用該class方格的前間距,方格會自動全部向前。
8.omega 清楚後間距:清除使用該class方格的後間距。
7.clear 換行(或者這樣說有不妥):重新換行繼續方格佈局。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章