首页 > 代码库 > Appcan UI Class 速查手册
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
通过在父元素中设定这个属性，
当子元素横向排布时，
可以使子
元素间左边界对齐、中线对齐和右边界对齐
Appcan UI Class 速查手册