Appcan UI Class 速查手册
che
用于定义复选框水平排列时选中后的样式
che-icon
用于定义复选框选中或未选中时使用的图标,根据复选框的状态定义选中或着未选中
的图标(垂直排列)
col
跟复选框选中状态搭配着使用,定义列表展开时的圆角变化
col-icon
定义折叠列表展开或者关闭时列表上图标的变换
col-c
默认情况下:
col-c
定义折叠列表的内容区域是隐藏的即
display:none
,
col-c
跟
zy_fold
函数搭配着使用当列表展开时通过
zy_fold
函数将列表的
col-c
类名去掉,列表的内容区域显示
lis
用于定义列表的
padding
距离
lis-icon
用于定义列表中的图片为图标时使用的样式
lis-th
用于定义列表中的图片为缩略图时使用的样式
lis-sw
用于定义列表中具有标识作用的图标的样式例如箭头
rdi
用于定义水平排列的单选按钮选中后的样式
rdi-icon
用于定义单选按钮使用的图标,根据单选按钮的状态定义选中或着未选中的图标
res
用于定义一些控件使用的图标例如下拉列表中使用的图标,类别用数字表示,代表
不同控件使用的不同图片
res3
类别为
3
定义了下拉列表使用的图片
res8
定义了列表使用的图标
sel select
用于定义下拉列表的样式
tab
用于定义
tab
栏的高度以及内边距,
ui-tab.css
中定义了一些
tab
栏默认的使用的
小图标
swi
定义的开关按钮的宽度、高度以及开关按钮使用的背景图片
swi-btn
用户定义按钮上面的滑块的样式
uabs
定义元素位于页面的左上角,
position:absolute;left:0px; top:0px;
ub
类别为数字编号,用于定义不同大小的边框
ub-t
代表上边框。类别为空,定义的边框宽度为
1px
ub-l
代表左边框。类别为空,定义的为边框宽度为
1px
uba
代表四个边的边框。类别为空,定义的边框宽度为
1px
uba1
代表四个边的边框。类别为
1
,定义的边框宽度为
2px
ub
使用
box
弹性盒子模式对页面进行布局,
一般跟
ub-f[1-4]
搭配着使用
ub-ac
:垂直居中,只有跟
ub
搭配着使用
ub-ac
,
ub-ae
的作用才生效
ub-ae
:位于底边,只有跟
ub
搭配着使用
ub-ac
,
ub-ae
的作用才生效
ub-con
:在子元素中加入一个容器,用于避免内容引起子元素大小变化
ub-pc
:水平居中,
只有跟
ub
搭配着使用
ub-pc
,
ub-pe
,
ub-pj
的作用才生效
ub-pe
:位于末尾,
只有跟
ub
搭配着使用
ub-pc
,
ub-pe
,
ub-pj
的作用才生效
ub-pj
:两端对齐,
只有跟
ub
搭配着使用
ub-pc
,
ub-pe
,
ub-pj
的作用才生效
ub-ver
:定义元素垂直排列,只有跟
ub
搭配着使用
ub-ver
的作用才生效
ub-rev
:定义元素排列方向,只有跟
ub
搭配着使用
ub-rev
的作用才生效
ub-fh
:在
box
架构中
ub-fh
一般跟函数
zyFlip
()搭配着使用实现横向滑动效果
ub-fv
:在
box
架构中
ub-fv
一般跟函数
iScroll
()搭配着使用实现纵向滑动效果
ub-img
类别为数字编号,用于定义不同的背景排列方式
ub-img
类别为空,定义将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像
始终包含在容器内
ub-img1
类别为
1
,定义将背景图片等比例缩放到完全覆盖容器,背景图像有可能超过容器
ub-img2
类别为
2
,定义背景图像横向平铺
ub-img3
类别为
3
,定义背景图像纵向平铺
ub-img4
类别为
4
,定义背景图像横向
100%
,纵向自适应
;
ub-img5
类别为
5
,定义背景图像横向自适应,纵向为
100%
ub-img6
类别为
6
,定义背景图像居中显示
ub-f
定义不同的
box-flex
属性值,类别使用数字编号,定义不同的元素空间大小分配
比例
ub-f1
数字编号为
1
;定义
box-flex
:
1
ub-f2
数字编号为
2
;定义
box-flex
:
2
ub-f3
数字编号为
3
;定义
box-flex
:
3
ub-f4
数字编号为
4
;定义
box-flex
:
4
uc
用于定义不同大小的圆角
uc-t
代表上圆角即左上和右上圆角。类别为空,定义的为圆角半径为
0.6em
的圆角
uc-tl
代表左上圆角。类别为空,定义的为圆角半径为
0.6em
的圆角
uc-t1
代表上圆角即左上和右上圆角。类别为空,定义的为圆角半径为
0.3em
的圆角
uh
代表
UI HEADER
,定义头部和底部的元素的一些基本属性
uinl
用于定义元素为行内元素(使用后宽度自动缩短与文字一致)
uinn
类别为数字编号,用于定义不同内边距的大小
uinn
类别为空,定义的内边距大小上右下左均为
0.5em
uinn1
类别为
1
,定义的内边距大小上下为
0
,左右为
0.5em
uinput
定义文本框和文本区域的基本样式,内边距,外边距,边框,背景颜色,宽度和
高度。
uinput
一般跟
input
和
textarea
搭配着使用实现输入框或文本区域的样式
uf
代表
UI FOOTER
,定义头部和底部的元素的一些基本属性
uf
代表
UI FLOAT
,用于定义元素的浮动方向
ufl
代表元素左浮动
ufr
代表元素右浮动
ulev
类别为数字编号,用于定义不同大小的字体;其中数值越大代表字体大小越大,数
值越小代表字体大小越小
ulev0
类别为
0
,定义的字体大小为
1em
ulev1
类别为
1
,定义的字体大小为
1.2em
ulev-1
类别为
-1
,定义的字体大小为
0.8em
ulab
一般跟
uinput
搭配着使用
.ulab
.uinput{margin-left:3px}
,用于定义标签和输入
框之间的距离
ulim
定义元素的最大宽度超过部分省略
umh
类别为数字编号,用于定义不同大小的最小高度
umh1
类别为
1
,定义最小高度为
1em
umh2
类别为
2
,定义最小高度为
1.2em
umw
类别为数字编号,用于定义不同大小的最小宽度
umw1
类别为
1
,定义最小宽度为
1em
umw2
类别为
2
,定义最小宽度为
2em
uhide
代表元素隐藏
display
属性为
none
umar-
定义外边距的大小
umar-t
代表上边距。定义的上边距的大小为
margin-top
:
0.4em
umar-b
代表下边距。定义的下边距的大小
margin-bottom:0.4em
umar-l
代表左边距。定义的下边距的大小
margin-left:0.4em
umar-r
代表下边距。定义的右边距的大小
margin-right:0.4em
umar-a
代表上下左右四个边的边距。定义
margin
:
0.4em
um-vp
定义
body
的内边距
padding
,外边距
margin
的大小以及文字大小可以调整,超过
body
宽度的部分隐藏
uof-
内容溢出元素框时,超出的部分隐藏
uof-x
:类型为
x
时,定义
oveflow-x
:
hidden
;超出容器的指定宽度时,横向超出的部分隐藏
uof-y
:类型为
y
时,定义
oveflow-y
:
hidden
;超出容器的指定高度时,纵向超出的部分隐藏
uof
:类型为空时,定义
overflow
:
hidden
;内容溢出元素框时,溢出的部分隐藏
up
一般和
um-vp
搭配使用,用于定义页面大小自适应手机屏幕大小
us
用于定义不同大小和不同颜色的外阴影
us
代表外阴影。类别为空,定义的外阴影颜色为黑色
us1
代表外阴影。类别为
1
,定义外阴影颜色为灰白色
us-i
代表内阴影。类别为空,定义内阴影大小及阴影颜色为黑色
ut
代表
UI TITLE
,定义头部和底部的内边距和外边距的大小
uts
代表文字内阴影。定义文字阴影大小及阴影颜色
ut-s
用于定义文字超过容器指定宽度时文字隐藏并且文字不换行
tx-
用于定义文字的对齐方向
tx-l
代表左对齐
tx-r
代表右对齐
tx-c
代表居中对齐
弹性盒子模型————
-webkit-box-orient:vertical
来控制子元素为纵向排列
-webkit-box-direction:reverse
通过在父
DIV
中设定这个属性可以让子元素反向排列
-webkit-box-align:center
通过在父元素中设定这个属性,当子元素横向排布时,可以使
子元素间实现上边界对齐、中线对齐和下边界对齐的效果
-webkit-box-pack:center
通过在父元素中设定这个属性,
当子元素横向排布时,
可以使子
元素间左边界对齐、中线对齐和右边界对齐
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。