MUI框架-组件使用-CSS 页面布局简单介绍
页面 CSS 布局简单介绍，在移动手机端，1px 像素很起来是很粗的，我们可以用-webkit-transform: scaleY(0.5); 的方式，把它变成0.5个像素，这样看起来好看很多了
。
hr{border:none;border-bottom:1px solid #f1f1f1; height:1px;-webkit-transform: scaleY(0.5);-webkit-transform-origin:0 0; clear: both;}
也可以使用 after 或 before 伪元素 来画0.5像素的线
div{ position: relative;}
div:after
{
position: absolute;
right:0px;
bottom: 0;
left:0px;
height: 1px;
content: '';
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color:#f1f1f1;
}
MUI移动框的 UI 组件介绍 ，完整的MUI移动UI框架示例 : 点击预览
当我们在布局APP的页面时，如果某个页面，需要用上mui的UI 组件，可以直接复制过来使用，需要修改的，可以直接重新写CSS ,复盖原来的UI 样式 css就可以。
| 名称 | 示例 |
|---|---|
| accordion（折叠面板） | 点击预览 |
| actionsheet（操作表） | 点击预览 |
| badge（数字角标） | 点击预览 |
| button（按钮） | 点击预览 |
| cardview（卡片视图） | 点击预览 |
| checkbox（复选框） | 点击预览 |
| dialog（消息框） | 点击预览 |
| gallery（图片轮播） | 点击预览 |
| grid（栅格） | 点击预览 |
| icon（图标） | 点击预览 |
| input（输入表单） | 点击预览 |
|---|---|
| list（列表） | 点击预览 |
| mask（遮罩蒙版） | var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调； mask.show();//显示遮罩 mask.close();//关闭遮罩 |
| number box（数字输入框） | 点击预览 |
| offcanvas（侧滑菜单） | 点击预览 |
| popover（弹出菜单） | 点击预览 |
| picker（选择器） | 点击预览 |
|---|---|
| progressbar（进度条） | 点击预览 |
| transparentBar（透明状态栏） | |
| radio（单选框） | 点击预览 |
| range（滑块） | 点击预览 |
| scroll（区域滚动） | <div class="mui-scroll-wrapper"> <div class="mui-scroll"> <!--这里放置真实显示的DOM内容--> </div> </div> |
| slide（轮播组件） | 点击预览 |
|---|---|
| switch（开关） | 点击预览 |
加载更多