# Mogo-CSS【廢棄】 是一個可移植的布局插件,采用`less`語言編寫. [GitHub地址](https://github.com/tyaqing/mogo.css) 使用npm自動構建 ``` npm run build ``` ## 1.顏色/Color |名稱|類|描述| |---|---|---| |主色|.c-primary|主色調| |成功|.c-success|用于成功信息| |警告|.c-warning|用于警告信息| |錯誤|.c-error|用于錯誤信息| |默認字體顏色|.c-grey |用于重要文字信息| |灰色等級1|.c-grey-1|用于普通級信息、引導詞| |灰色等級2|.c-grey-2 |用于次要的文章信息、普通按鈕描邊| |灰色等級3|.c-grey-3 |用于分割線| |灰色等級4|.c-grey-4 |用于背景色| |主色|.bg-primary|主色調| |成功|.bg-success|用于成功信息| |警告|.bg-warning|用于警告信息| |錯誤|.bg-error|用于錯誤信息| |默認字體顏色|.bg-grey |用于重要文字信息| |灰色等級1|.bg-grey-1|用于普通級信息、引導詞| |灰色等級2|.bg-grey-2 |用于次要的文章信息、普通按鈕描邊| |灰色等級3|.bg-grey-3 |用于分割線| |灰色等級4|.bg-grey-4 |用于背景色|  ## 2.字體/font > 字體大小默認分為8 10px-24px種 每2px遞增 |類|樣字體大小| |---|---| |`fs-n`| 字體大小,n的范圍為`10,12,...,24`| |`lh-n`| 行高,n的范圍為`10,12,...,24`| |`text-decoration`|刪除線| |`blod` | 加粗| |`text-c`|內容居中| |`text-r`|內容右對齊| |`text-l`|內容左對齊| |` `|占位符| |`.line-n`|只顯示n行,其他顯示省略號.n的范圍`1-3`| ## 3.盒模型 |類名|介紹| |-|-| | ` .content` | 自動加上內邊距 `padding:15px` | | ` .content.radius` | 自動加上圓角 `border-radius: 5px;` | |`.block`|強制轉換成盒模型,常用于`img`標簽| | .pd-2,.pd-4,...,.pd-20 | 內邊距 `pading: n px ` | | .pd-t-2 ~ .pd-t-20 | 內上邊距 ` padding-top:20px` | | .mg-2,.mg-4,...,.mg-20 | 外邊距 `margin: n px ` | | .mg-t-2 ~ .mg-t-20 | 外上邊距` margin-top:20px` | |`.float-l`|向左浮動| |`.float-r`|向右浮動| |`.border-b`| 下方分隔線 `border-bottom:1px solid @grey-3;`| |`.border-l`|左端分隔線`border-left: 1px solid @grey-3;`| |`clearfix`|清除浮動,在浮動的父級元素上添加| |`round`|將形狀變成圓形| |`shadow`|為盒模型加上陰影,顏色為@grey-3| ## 4.助手類 |類名|介紹| |-|-| |`.hidden`|隱藏元素|