一个基于layui简化而来的纯css框架，只包含栅格及一些简单的css类

# 前言

最近因为一直想简化css代码，优化体积，所以根据自己的项目产生了这样一个框架，米醋儿UI框架，框架很简单，只有一个css文件，并且里面只包含了一些简单的栅格系统及基础的css类，如阴影，基础按钮，基础table等样式，如果大家喜欢可以自行下载。下面是米醋儿UI框架说明文档。

# 栅格

```
<div class="mcr-container"> 
  <div class="mcr-row">
    <div class="mcr-col-xs6 mcr-col-sm6 mcr-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="mcr-col-xs6 mcr-col-sm6 mcr-col-md4">
      移动：6/12 | 平板：6/12 | 桌面：4/12
    </div>
    <div class="mcr-col-xs4 mcr-col-sm12 mcr-col-md4">
      移动：4/12 | 平板：12/12 | 桌面：4/12
    </div>
    <div class="mcr-col-xs4 mcr-col-sm7 mcr-col-md8">
      移动：4/12 | 平板：7/12 | 桌面：8/12
    </div>
    <div class="mcr-col-xs4 mcr-col-sm5 mcr-col-md4">
      移动：4/12 | 平板：5/12 | 桌面：4/12
    </div>
  </div>
</div>
```

列可以同时出现最多四种不同的组合，分别是：

*xs*（超小屏幕，如手机）、

*sm*（小屏幕，如平板）、

*md*（桌面中等屏幕）、

*lg*（桌面大型屏幕），

以呈现更加动态灵活的布局

# 基础类

| class\tag    | 示意                                                         |
| ------------- | ------------------------------------------------------------ |
| hr            | 横线                                                         |
| .mcr-input    | 输入框                                                       |
| .box-shadow   | 通用阴影                                                     |
| .spot         | 点                                                           |
| .red          | 字体颜色红色                                                 |
| .mcr-btn      | 基础按钮类                                                   |
| .h50          | height:50px                                                  |
| .h64          |                                                              |
| .h200         |                                                              |
| .mar20        | margin: 20px 0px;                                            |
| .mgb15        | margin-bottom: 15px;                                         |
| .fl           | float: left;                                                 |
| .fr           | float: right;<br/>    text-align: center;                    |
| .mr10         | margin-right: 10px;                                          |
| .mr15         | margin-right: 15px;                                          |
| .bgfff        | background: #fff;                                            |
| .pd5          | padding: 5px;                                                |
| .pd6          |                                                              |
| .pd7          |                                                              |
| .pd8          |                                                              |
| .pd9          |                                                              |
| .pd10         |                                                              |
| .pd11         |                                                              |
| .pd12         |                                                              |
| .pd15         |                                                              |
| .pd30         |                                                              |
| .mdb40        | margin-bottom: 40px;                                         |
| .font14       | font-size: 14px;                                             |
| .font15       |                                                              |
| ：            | ：                                                           |
| .font22       |                                                              |
| .w100         | display: block;<br/>    width: 100%;<br/>    height: 100%;<br/>    line-height: 1.5; |
| .w60          | width: 30px;<br/>    height: 30px;<br/>    border-radius: 50%; |
| .c666         | color: #666666;                                              |
| .c999         | color: #999999;                                              |
| .ceee         | color: #eee;                                                 |
| .tac          | text-align: center;                                          |
| .tal          | text-align: left;                                            |
| .tar          | text-align: right;                                           |
| .w800         | width: 800px;                                                |
| table         | 表格基础样式                                                 |
| .clear        | height: 20px;<br/>    clear: both;                           |
| .block        | display: block;                                              |
| .hidden/.none | display: none;                                               |
| .inline-block | display: inline-block;                                       |
| .mt15         | margin-top: 15px;                                            |
| .mt30         | margin-top: 30px;                                            |

注:原创不易,转载请注明出处( https://micuu.com/new/2387.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。