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(开关) | 点击预览 |
加载更多