该文章或问题已被删除

MUI框架-组件使用-CSS 页面布局简单介绍

页面 CSS 布局简单介绍,在移动手机端,1px 像素很起来是很粗的,我们可以用-webkit-transform: scaleY(0.5); 的方式,把它变成0.5个像素,这样看起来好看很多了smiley

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


点赞 0      收藏 0

0 个评论

正在加载...

这里空空如也,快来补一刀!

加载更多

回答问题或评论文章请先 或者 注册