命名词典
Module命名词典
a - link (<a> tag)
ac - action
add - additional
adv - advertise
aft - after
aux - auxillary
btn - button
cat - catalog | category
cnt - content | container
cnts - contents
col - column
dec - decorate
def - default
del - delete
descr - description
dm - delim
doc - document
dyn - dynamic
el - element
err - error
ext - external
f - footer
fr - friend
gen - general
hl - highlight
hv - hover
hld - holder
img - image
itx - textarea
lbl - label
lk - link
lr - layer
mod - module | modifier
n - name
ntf - notification
num - number
opt - options
ovr - overlay
ph - placeholder
pht - photo
priv - privacy
rfr - refresh
scr - screen | scroll
sel - select
sett - settings
sm - small
spr - sprite
tit - title
wrap - wrapper
样式属性命名
b - bottom
bd - border
bdc - border-color
bdr - border-radius
bg - background
bgc - background-color
bgi - background-image
bgp - background-position
bs - box-shadow
c - clear
cr - color
f - float | front
fs - font-size
fw - font-weight
h - height
il - inline-block
lh - line-height
m - margin
mb - margin-bottom
ml - margin-left
mr - margin-right
mt - margin-top
o - opacity
ov - overflow
p - padding | position
per - %
pb - padding-bottom
pl - padding-left
pr - padding-right
pt - padding-top
t - text-align
ti - text-indent
unl - underline
v - vertical-align | visibility
w - width
样式模块词典
grid(g-)
| 属性 | 说明 | CSS版本 |
|---|---|---|
| box-sizing | 设置要应用盒子尺寸相关属性的元素 | 3 |
| margin | 设置元素盒子四个外边距宽度的简写属性 | 1 |
| margin-bottom | 设置盒子下外边距的宽度 | 1 |
| margin-left | 设置盒子左外边距的宽度 | 1 |
| margin-right | 设置盒子右外边距的宽度 | 1 |
| margin-top | 设置盒子上外边距的宽度 | 1 |
| bottom | 设置元素下外边距边界与包含块下边界之间的偏移 | 2 |
| left | 设置元素左外边距边界与包含块左边界之间的偏移 | 2 |
| position | 设置元素的定位方法 | 2 |
| right | 设置元素右外边距边界与包含块右边界之间的偏移 | 2 |
| top | 设置元素上外边距边界与包含块上边界之间的偏移 | 2 |
| font | 在一条声明中设置文本字体、大小和颜色的简写属性 | 1 |
| line-height | 设置行高 | 1 |
function(f-)
| 属性 | 说明 | CSS版本 |
|---|---|---|
| background-attachment | 设置元素的背景附着属性，决定背景图片是否随页面一起滚动 | 1 |
| background-clip | 设置元素背景颜色和图像的裁剪区域 | 3 |
| background-origin | 设置背景图像绘制的起始位置 | 3 |
| background-position | 设置背景图像在元素盒子中的位置 | 1 |
| background-repeat | 设置背景图像的重复方式 | 1 |
| background-size | 设置背景图像的绘制尺寸 | 3 |
| border | 为所有边界设置所有边框宽度的简写属性 | 1 |
| border-bottom | 为所有下边框设置宽度的简写属性 | 1 |
| border-bottom-left-radius | 将边框左下角设置为圆角 | 3 |
| border-bottom-right-radius | 将边框右下角设置为圆角 | 3 |
| border-bottom-style | 设置元素下边框的样式 | 1 |
| border-image-repeat | 指定边框图像的缩放和重复方式 | 3 |
| border-image-slice | 指定边框图像的切割方式 | 3 |
| border-left | 设置元素左边框的简写属性 | 1 |
| border-left-style | 设置左边框的样式 | 1 |
| border-radius | 指定圆角边框的简写属性 | 3 |
| border-right | 设置元素右边框的简写属性 | 1 |
| border-right-style | 设置右边框的样式 | 1 |
| border-style | 设置所有边框样式的简写属性 | 1 |
| border-top | 为所有上边框设置宽度的简写属性 | 1 |
| border-top-left-radius | 将边框左上角设置为圆角 | 3 |
| border-top-right-radius | 将边框右上角设置为圆角 | 3 |
| border-top-style | 设置元素上边框的样式 | 1 |
| outline-offset | 设置轮廓距离元素边框边缘的偏移量 | 2 |
| outline-style | 设置轮廓的样式 | 2 |
| outline | 在一条声明中设置轮廓的简写属性 | 2 |
| clear | 设置盒子的左边界、右边界或左右两个边界不允许出现浮动元素 | 1 |
| float | 将元素移动到其包含块的左边界或者右边界，或者另一个浮动元素的边界 | 1 |
| overflow | 设置内容横向和竖向溢出盒子时处理方式的简写属性 | 2 |
| overflow-x | 设置内容横向溢出盒子时的处理方式 | 3 |
| overflow-y | 设置内容纵向溢出盒子时的处理方式 | 3 |
| font | 在一条声明中设置文本字体、大小和颜色的简写属性 | 1 |
| font-family | 指定文本所用的字体系列，排在前面的优先使用 | 1 |
| font-style | 指定采用正常字体、斜体还是倾斜字体 | 1 |
| font-variant | 指定字体是否以小型大写字母显示 | 1 |
| font-weight | 指定文本粗细 | 1 |
| letter-spacing | 设置字母间距 | 1 |
| text-align | 设置文本对齐方式 | 1 |
| text-decoration | 规定添加到文本的修饰（如下划线） | 1 |
| text-indent | 规定文本块中首行文本的缩进 | 1 |
| text-justify | 设置文本对齐方式 | 3 |
| word-spacing | 指定单词间距 | 1 |
| border-collapse | 指定表格相邻单元格边框的显示样式 | 2 |
| border-spacing | 指定相邻单元格的边框的距离 | 2 |
| cursor | 指定光标的形状 | 2 |
| empty-cells | 指定是否显示表格中的空单元格 | 2 |
| list-style | 设置列表样式的简写属性 | 1 |
| list-style-type | 指定列表项标记的类型 | 1 |
| transform | 指定应用于元素的变换 | 3 |
| transform-origin | 指定元素变换的起点 | 3 |
| text-transform | 属性控制文本的大小写 | 1 |
| direction | 指定文本方向 | 2 |
unit(u-)
| 属性 | 说明 | CSS版本 |
|---|---|---|
| align-items | flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式 | 3 |
| justify-content | 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 | 3 |
| caption-side | 指定表格标题的位置 | 2 |
| list-style-position | 指定列表项标记相对于列表项内容的位置 | 1 |
| table-layout | 指定表格单元格、行和列的算法规则 | 2 |
| border-bottom-width | 设置元素下边框的宽度 | 1 |
| border-image-width | 设置边框图像的宽度 | 3 |
| border-left-width | 设置左边框的宽度 | 1 |
| border-right-width | 设置右边框的宽度 | 1 |
| border-top-width | 设置元素上边框的宽度 | 1 |
| border-width | 设置四个边框的宽度 | 1 |
| outline-width | 设置轮廓的宽度 | 2 |
| outline | 在一条声明中设置轮廓的简写属性 | 2 |
| display | 设置元素盒子的类型 | 1 |
| height | 设置元素盒子的高度 | 1 |
| max-height | 设置元素的最大高度 | 2 |
| max-width | 设置元素的最大宽度 | 2 |
| min-height | 设置元素的最小高度 | 2 |
| min-width | 设置元素的最小宽度 | 2 |
| padding | 设置元素盒子四个内边距宽度的简写属性 | 1 |
| padding-bottom | 设置盒子下内边距的宽度 | 1 |
| padding-left | 设置盒子左内边距的宽度 | 1 |
| padding-right | 设置盒子右内边距的宽度 | 1 |
| padding-top | 设置盒子上内边距的宽度 | 1 |
| width | 设置元素的宽度 | 1 |
| column-count | 指定多列布局的列数 | 3 |
| column-fill | 多列布局中列与列之间的内容如何发布 | 3 |
| column-gap | 指定多列布局中列与列之间的间隔 | 3 |
| column-rule | 多列布局中定义列与列之间的规则的简写属性 | 3 |
| column-rule-color | 设置多列布局中的颜色规划 | 3 |
| column-rule-style | 设置多列布局中的样式规则 | 3 |
| column-rule-width | 设置多列布局中的宽度规则 | 3 |
| columns | 在多列布局中设置列数和列宽度的简写属性 | 3 |
| column-span | 指定多列布局中元素能跨多少列 | 3 |
| column-width | 设置多列布局中列的宽度 | 3 |
| flex-align、flex-direction、flex-order、flex-pack | 它们都是由弹性盒子布局定义的 | 3 |
status(z-)
| 属性 | 说明 | CSS版本 |
|---|---|---|
| visibility | 设置元素的可见性 | 2 |
| z-index | 设置定位元素的堆叠顺序 | 2 |
| opacity | 设置元素的透明度 | 3 |
| display | 指定元素在页面上的显示方式 | 1 |
skin(s-)
| 属性 | 说明 | CSS版本 |
|---|---|---|
| color | 设置元素的前景色 | 1 |
| list-style-image | 指定列表项标记使用的图像 | 1 |
| text-shadow | 指定文本块的阴影效果 | 3 |
| box-shadow | 设置元素的一个或者多个阴影效果 | 3 |
| outline-color | 设置元素边框外围轮廓线的颜色 | 2 |
| border-top-color | 为所有上边框设置颜色 | 1 |
| border-right-color | 设置右边框的颜色 | 1 |
| border-left-color | 设置左边框的颜色 | 1 |
| border-bottom-color | 为所有下边框设置颜色 | 1 |
| background-color | 设置背景颜色 | 1 |
animation(a-)
| 属性 | 说明 | CSS版本 |
|---|---|---|
| transition | 指定CSS属性过渡效果的简写属性 | 3 |
| transition-delay | 指定触发过渡的延迟时间 | 3 |
| transition-duration | 指定过渡的持续时间 | 3 |
| transition-property | 指定带有过渡效果的属性 | 3 |
| transition-timing-function | 指定过渡期间计算中间属性值的函数 | 3 |
| animation | 设置动画的简写属性 | 3 |
| animation-deplay | 指定动画开始前的延迟时间 | 3 |
| animation-direction | 指定动画重复播放时的播放方向 | 3 |
| animation-duration | 指定动画的持续时间 | 3 |
| animation-iteration-count | 指定动画的循环次数 | 3 |
| animation-name | 指定用于动画的关键帧集合的名称 | 3 |
| animation-play-state | 指定动画状态（播放或暂停） | 3 |
| animation-timing-function | 指定关键帧之间计算属性值的函数 | 3 |
moo-css-base词典
颜色
| 变量 | 十六进制色值 | 说明 | 效果 |
|---|---|---|---|
| body_bg | #efeef5 | 灰-页面背景 | |
| part_bg | #fff | 白-模块背景 | |
| font-base | #323232 | 黑，正文-1 | |
| font-base_ | #333 | 黑，正文-2 | |
| font-sub | #666 | 灰色-正文 | |
| font-sub_ | #999 | 浅灰-次要文字 | |
| font-link | #11a6fc | 蓝色-链接 | |
| font-up | #fe5d4e | 红色-涨 | |
| font-down | #009801 | 绿色-跌 | |
| button-red | #cf0e0f | 红色，按钮 | |
| button-orange | #ff7010 | 橙色，按钮 | |
| button-yellow | #f1ae3f | 黄色，按钮 | |
| button-gray | #ccc | 灰色，按钮 | |
| button-disable | #d6d6d6 | 灰色，按钮不可用 | |
| border-gray | #e2e2e2 | 边框-灰 | |
| red | #fe5d4e | 红色-涨、按钮 | |
| orange-light | #ff8f2e | 浅橙 | |
| orange | #ff7010 | 橙色 | |
| yellow | #f1ae3f | 黄色 | |
| green | #009801 | 绿色 | |
| blue | #01a2fc | 蓝色 | |
| gray | #d3d6d8 | 灰色 | |
| gray-light | #999 | 浅灰色 | |
| white | #fff | 白色 |
方法
| 方法名 | 参数 | 说明 | 平台 |
|---|---|---|---|
| unit | name, px | 设置vw属性，name为属性名，px为像素值，如less：.unit(width, 100) | mobile |
| wh | width, height | 设置宽高 | mobile/PC |
| square | width | 设置正方形(宽高相等) | mobile/PC |
| hh | height | 设置高度同时设置行高，height=line-height | mobile/PC |
| font | font-size, line-height | 设置字体大小及行高，如less：.font(24px, 40px) | mobile/PC |
| sc | font-size, color | 设置字体大小及颜色，如less：.sc(26px, #ccc) | mobile/PC |
| mulit-ellipsis | maxline | 多行文字溢出展示"..."，如less: .mulit-ellipsis(2) | mobile/PC |
| pseudo-class | - | 设置伪元素布局，通常用作css图形、边框1px | mobile/PC |
| font-DIN | - | font-family使用DIN字体 | mobile |
| position | top, left | 设置top及left，如less：.position(10%, 15vh) | mobile/PC |
| bis | url | 设置背景图且填充整个容器，如.bis('https://github.com/MichealWayne/Moo-CSS/raw/master/docs/logo.png') | mobile/PC |
| blur | range | 设置模糊，range为模糊半径 | mobile/PC |
| center | - | 水平垂直居中定位 | mobile/PC |
| fixed-mask | - | 设置fixed全屏布局样式 | mobile/PC |
| border-top-radius | radius | 单边圆角，上边 | mobile/PC |
| border-right-radius | radius | 单边圆角，右边 | mobile/PC |
| border-bottom-radius | radius | 单边圆角，下边 | mobile/PC |
| border-left-radius | radius | 单边圆角，左边 | mobile/PC |
| set-scroll | color | 设置滚动条颜色，需要hsl颜色，如less：.setScroll(hsla(200, 100%, 54%, 1)) | mobile |
| set-scroll-elastic | - | 设置滚动区域带弹性效果(IOS) | mobile |
| min-width | min-width | 设置最小宽度且兼容IE6 | PC |
| min-height | min-height | 设置最小高度且兼容IE6 | PC |
| dib | - | 内联块级元素, 兼容IE6 | PC |
| fixed | - | 固定定位, 兼容IE6 | PC |
| fl | - | 左浮动, 兼容 IE6 | PC |
| fr | - | 右浮动, 兼容 IE6 | PC |
| clearfix | - | 清除浮动 | PC |
| no-select | - | 禁止文字选中 | PC |
| bg-variant | color | 按钮颜色设置（hover及focus颜色加深） | PC |
| opacity | opacity | 设置透明度，兼容 IE6 | PC |
样式
grid
| 类/属性名 | 属性 | 说明 | 平台 |
|---|---|---|---|
| .g-box_b | -webkit-box-sizing: border-box; box-sizing: border-box; | 对元素指定宽度和高度包括了 padding 和 border 。 | mobile/PC |
| .g-box_c | -webkit-box-sizing: content-box; box-sizing: content-box; | 指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外。 | mobile/PC |
| .g-center | margin-left: auto;margin-right: auto; | 块元素居中。 | mobile/PC |
| .g-pf | position: fixed; | 设置固定定位 | mobile/PC |
| .g-pr | position: relative; | 设置相对定位 | mobile/PC |
| .g-pa | position: absolute; | 设置绝对定位 | mobile/PC |
| .g-fs10 | font-size: 1.3333vw; | 字体大小为10px（750px设计稿，1vw=7.5px响应式，后续移动长度单位同此） | mobile |
| .g-fs12 | font-size: 1.6vw; | 字体大小为12px | mobile |
| .g-fs14 | font-size: 1.8667vw; | 字体大小为14px | mobile |
| .g-fs16 | font-size: 2.1333vw; | 字体大小为16px | mobile |
| .g-fs18 | font-size: 2.4vw; | 字体大小为18px | mobile |
| .g-fs20 | font-size: 2.6667vw; | 字体大小为20px | mobile |
| .g-fs22 | font-size: 2.9333vw; | 字体大小为22px | mobile |
| .g-fs24 | font-size: 3.2vw; | 字体大小为24px | mobile |
| .g-fs26 | font-size: 3.4667vw; | 字体大小为26px | mobile |
| .g-fs28 | font-size: 3.7333vw; | 字体大小为28px | mobile |
| .g-fs30 | font-size: 4vw; | 字体大小为30px | mobile |
| .g-fs32 | font-size: 4.2667vw; | 字体大小为32px | mobile |
| .g-fs34 | font-size: 4.5333vw; | 字体大小为34px | mobile |
| .g-fs36 | font-size: 4.8vw; | 字体大小为36px | mobile |
| .g-fs38 | font-size: 5.0667vw; | 字体大小为38px | mobile |
| .g-fs40 | font-size: 5.3333vw; | 字体大小为40px | mobile |
| .g-lh150per | line-height: 1.5; | 行高1.5 | mobile/PC |
| .g-lh180per | line-height: 1.8; | 行高1.8 | mobile/PC |
| .g-lh200per | line-height: 2; | 行高2 | mobile/PC |
| .g-m20 | margin: 2.6667vw; | margin四边均为20px | mobile |
| .g-m30 | margin: 4vw; | margin四边均为30px | mobile |
| .g-m40 | margin: 5.3333vw; | margin四边均为40px | mobile |
| .g-m50 | margin: 6.6667vw; | margin四边均为60px | mobile |
| .g-mt10 | margin-top: 1.3333vw; | 上边距10px | mobile |
| .g-mt20 | margin-top: 2.6667vw; | 上边距20px | mobile |
| .g-mt30 | margin-top: 4vw; | 上边距30px | mobile |
| .g-mt40 | margin-top: 5.3333vw; | 上边距40px | mobile |
| .g-mt50 | margin-top: 6.6667vw; | 上边距50px | mobile |
| .g-mt60 | margin-top: 8vw; | 上边距60px | mobile |
| .g-mt70 | margin-top: 9.3333vw; | 上边距70px | mobile |
| .g-mt80 | margin-top: 10.6667vw; | 上边距80px | mobile |
| .g-mt90 | margin-top: 12vw; | 上边距90px | mobile |
| .g-mt100 | margin-top: 13.3333vw; | 上边距100px | mobile |
| .g-mr10 | margin-right: 1.3333vw; | 右边距10px | mobile |
| .g-mr20 | margin-right: 2.6667vw; | 右边距20px | mobile |
| .g-mr30 | margin-right: 4vw; | 右边距30px | mobile |
| .g-mr40 | margin-right: 5.3333vw; | 右边距40px | mobile |
| .g-mr50 | margin-right: 6.6667vw; | 右边距50px | mobile |
| .g-mr60 | margin-right: 8vw; | 右边距60px | mobile |
| .g-mr70 | margin-right: 9.3333vw; | 右边距70px | mobile |
| .g-mr80 | margin-right: 10.6667vw; | 右边距80px | mobile |
| .g-mr90 | margin-right: 12vw; | 右边距90px | mobile |
| .g-mr100 | margin-right: 13.3333vw; | 右边距100px | mobile |
| .g-mb10 | margin-bottom: 1.3333vw; | 下边距10px | mobile |
| .g-mb20 | margin-bottom: 2.6667vw; | 下边距20px | mobile |
| .g-mb30 | margin-bottom: 4vw; | 下边距30px | mobile |
| .g-mb40 | margin-bottom: 5.3333vw; | 下边距40px | mobile |
| .g-mb50 | margin-bottom: 6.6667vw; | 下边距50px | mobile |
| .g-mb60 | margin-bottom: 8vw; | 下边距60px | mobile |
| .g-mb70 | margin-bottom: 9.3333vw; | 下边距70px | mobile |
| .g-mb80 | margin-bottom: 10.6667vw; | 下边距80px | mobile |
| .g-mb90 | margin-bottom: 12vw; | 下边距90px | mobile |
| .g-mb100 | margin-bottom: 13.3333vw; | 下边距100px | mobile |
| .g-ml10 | margin-left: 1.3333vw; | 左边距10px | mobile |
| .g-ml20 | margin-left: 2.6667vw; | 左边距20px | mobile |
| .g-ml30 | margin-left: 4vw; | 左边距30px | mobile |
| .g-ml40 | margin-left: 5.3333vw; | 左边距40px | mobile |
| .g-ml50 | margin-left: 6.6667vw; | 左边距50px | mobile |
| .g-ml60 | margin-left: 8vw; | 左边距60px | mobile |
| .g-ml70 | margin-left: 9.3333vw; | 左边距70px | mobile |
| .g-ml80 | margin-left: 10.6667vw; | 左边距80px | mobile |
| .g-ml90 | margin-left: 12vw; | 左边距90px | mobile |
| .g-ml100 | margin-left: 13.3333vw; | 左边距100px | mobile |
- 注意：PC版.g-fs单位跨度从10px到40px，如.g-fs10, ... , .g-fs40；..g-mt/.g-mr*/.g-mb*/.g-ml*单位跨度从10px到200px，如.g-mt10, ... , .g-mt200
unit
| 类/属性名 | 属性 | 说明 | 平台 |
|---|---|---|---|
| .u-block | display: block | 设置为块元素 | mobile/PC |
| .u-block_il | display: inline-block | 设置为行内块元素 | mobile/PC |
| .u-inline | display: inline | 设置为行内元素 | mobile/PC |
| .u-w | display: block; width: 100%; | 块元素宽度100% | mobile/PC |
| .u-w92per | display: block; width: 92%; | 块元素宽度92% | mobile/PC |
| .u-w50per | display: block; width: 50%; | 块元素宽度50% | mobile/PC |
| .u-w10 | width: 1.3333vw; | 宽度10px | mobile |
| .u-w20 | width: 2.6667vw; | 宽度20px | mobile |
| .u-w30 | width: 4vw; | 宽度30px | mobile |
| .u-w40 | width: 5.3333vw; | 宽度40px | mobile |
| .u-w50 | width: 6.6667vw; | 宽度50px | mobile |
| .u-w60 | width: 8vw; | 宽度60px | mobile |
| .u-w70 | width: 9.3333vw; | 宽度70px | mobile |
| .u-w80 | width: 10.6667vw; | 宽度80px | mobile |
| .u-w90 | width: 12vw; | 宽度90px | mobile |
| .u-w100 | width: 13.3333vw; | 宽度100px | mobile |
| .u-w150 | width: 19.9995vw | 宽度150px | mobile |
| .u-w200 | width: 26.6667vw | 宽度200px | mobile |
| .u-h | height: 100% | 高度100% | mobile/PC |
| .u-h10 | height: 1.3333vw; | 高度10px | mobile |
| .u-h20 | height: 2.6667vw; | 高度20px | mobile |
| .u-h30 | height: 4vw; | 高度30px | mobile |
| .u-h40 | height: 5.3333vw; | 高度40px | mobile |
| .u-h50 | height: 6.6667vw; | 高度50px | mobile |
| .u-h60 | height: 8vw; | 高度60px | mobile |
| .u-h70 | height: 9.3333vw; | 高度70px | mobile |
| .u-h80 | height: 10.6667vw; | 高度80px | mobile |
| .u-h90 | height: 12vw; | 高度90px | mobile |
| .u-h100 | height: 13.3333vw; | 高度100px | mobile |
| .u-h150 | height: 19.9995vw | 高度150px | mobile |
| .u-h200 | height: 26.6667vw | 高度200px | mobile |
| .u-p10 | padding: 1.3333vw; | padding四边均为10px | mobile |
| .u-p15 | padding: 1.99995vw; | padding四边均为10px | mobile |
| .u-p20 | padding: 2.6667vw; | padding四边均为20px | mobile |
| .u-p30 | padding: 4vw; | padding四边均为30px | mobile |
| .u-pt10 | padding-top: 1.3333vw; | 上内边距10px | mobile |
| .u-pt15 | padding-top: 1.3333vw; | 上内边距15px | mobile |
| .u-pt20 | padding-top: 2.6667vw; | 上内边距20px | mobile |
| .u-pt30 | padding-top: 4vw; | 上内边距30px | mobile |
| .u-pt40 | padding-top: 5.3333vw; | 上内边距40px | mobile |
| .u-pt50 | padding-top: 6.6667vw; | 上内边距50px | mobile |
| .u-pt60 | padding-top: 8vw; | 上内边距60px | mobile |
| .u-pt70 | padding-top: 9.3333vw; | 上内边距70px | mobile |
| .u-pt80 | padding-top: 10.6667vw; | 上内边距80px | mobile |
| .u-pt90 | padding-top: 12vw; | 上内边距90px | mobile |
| .u-pt100 | padding-top: 13.3333vw; | 上内边距100px | mobile |
| .u-pr4per | padding-right: 4%; | 右内边距4% | mobile/PC |
| .u-pr10 | padding-right: 1.3333vw; | 右内边距10px | mobile |
| .u-pr15 | padding-right: 1.3333vw; | 右内边距15px | mobile |
| .u-pr20 | padding-right: 2.6667vw; | 右内边距20px | mobile |
| .u-pr30 | padding-right: 4vw; | 右内边距30px | mobile |
| .u-pr40 | padding-right: 5.3333vw; | 右内边距40px | mobile |
| .u-pr50 | padding-right: 6.6667vw; | 右内边距50px | mobile |
| .u-pr60 | padding-right: 8vw; | 右内边距60px | mobile |
| .u-pr70 | padding-right: 9.3333vw; | 右内边距70px | mobile |
| .u-pr80 | padding-right: 10.6667vw; | 右内边距80px | mobile |
| .u-pr90 | padding-right: 12vw; | 右内边距90px | mobile |
| .u-pr100 | padding-right: 13.3333vw; | 右内边距100px | mobile |
| .u-pb10 | padding-bottom: 1.3333vw; | 下内边距10px | mobile |
| .u-pb15 | padding-bottom: 1.3333vw; | 下内边距15px | mobile |
| .u-pb20 | padding-bottom: 2.6667vw; | 下内边距20px | mobile |
| .u-pb30 | padding-bottom: 4vw; | 下内边距30px | mobile |
| .u-pb40 | padding-bottom: 5.3333vw; | 下内边距40px | mobile |
| .u-pb50 | padding-bottom: 6.6667vw; | 下内边距50px | mobile |
| .u-pb60 | padding-bottom: 8vw; | 下内边距60px | mobile |
| .u-pb70 | padding-bottom: 9.3333vw; | 下内边距70px | mobile |
| .u-pb80 | padding-bottom: 10.6667vw; | 下内边距80px | mobile |
| .u-pb90 | padding-bottom: 12vw; | 下内边距90px | mobile |
| .u-pb100 | padding-bottom: 13.3333vw; | 下内边距100px | mobile |
| .u-pl4per | padding-left: 4%; | 左内边距4% | mobile/PC |
| .u-pl10 | padding-left: 1.3333vw; | 左内边距10px | mobile |
| .u-pl15 | padding-left: 1.3333vw; | 左内边距15px | mobile |
| .u-pl20 | padding-left: 2.6667vw; | 左内边距20px | mobile |
| .u-pl30 | padding-left: 4vw; | 左内边距30px | mobile |
| .u-pl40 | padding-left: 5.3333vw; | 左内边距40px | mobile |
| .u-pl50 | padding-left: 6.6667vw; | 左内边距50px | mobile |
| .u-pl60 | padding-left: 8vw; | 左内边距60px | mobile |
| .u-pl70 | padding-left: 9.3333vw; | 左内边距70px | mobile |
| .u-pl80 | padding-left: 10.6667vw; | 左内边距80px | mobile |
| .u-pl90 | padding-left: 12vw; | 左内边距90px | mobile |
| .u-pl100 | padding-left: 13.3333vw; | 左内边距100px | mobile |
| .u-flex | display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; | 设置flex布局 | mobile/PC |
| .u-s-middle | display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-justify-content: space-around; justify-content: space-around; -webkit-align-items: center; align-items: center; | 垂直居中，水平距两端留白平铺 | mobile/PC |
| .u-l-middle | display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-box-align: center; -webkit-align-items: center; align-items: center; | 垂直居中，水平靠左 | mobile/PC |
| .u-c-middle | display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; | 垂直居中，水平居中 | mobile/PC |
| .u-j-middle | display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; | 垂直居中，水平贴两端平铺 | mobile/PC |
| .u-r-middle | display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;-webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; | 垂直居中，水平靠右 | mobile/PC |
- 注意：PC版.u-w*/.u-h*/.u-pt*/.u-pr*/.u-pb*/.u-pl*单位跨度从10px到200px，如.u-w10, ... , .u-w200
function
| 类/属性名 | 属性 | 说明 | 平台 |
|---|---|---|---|
| .f-wk_reset | -webkit-appearance: none; | 清除webkit默认样式 | mobile/PC |
| .f-bg_cover, [f-bg_cover] | background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; | 背景图片填充整个容器 | mobile/PC |
| .f-ovhidden | overflow: hidden; | 溢出隐藏 | mobile/PC |
| .f-scroll_y | overflow-y: auto; | 竖向滚动条自动 | mobile/PC |
| .f-ellipsis | white-space: nowrap; text-overflow: ellipsis; overflow: hidden; | 单行文字超出显示'...' | mobile/PC |
| .f-equal | margin-bottom: -9999px; padding-bottom: 9999px; | 多列等高 | mobile/PC |
| .f-tl | text-align: left; | 文字左对齐 | mobile/PC |
| .f-tc | text-align: center; | 文字居中对齐 | mobile/PC |
| .f-tr | text-align: right; | 文字右对齐 | mobile/PC |
| .f-tj | -webkit-margin-start: 0; -webkit-margin-end: 0; text-align: justify; | 文字两端对齐 | mobile/PC |
| .f-vt | vertical-align: top; | 行元素垂直对齐方式为顶部 | mobile/PC |
| .f-vm | vertical-align: middle; | 行元素垂直对齐方式为居中 | mobile/PC |
| .f-vb | vertical-align: bottom; | 行元素垂直对齐方式为居底 | mobile/PC |
| .f-fl | float: left; display: inline; | 左浮动 | mobile/PC |
| .f-fr | float: right; display: inline; | 右浮动 | mobile/PC |
| .f-cb | clear: both; | 两侧请浮动 | mobile/PC |
| .f-cl | clear: left; | 左侧请浮动 | mobile/PC |
| .f-cr | clear: right; | 右侧请浮动 | mobile/PC |
| .f-nowrap | white-space: nowrap; | 保持文字不换行 | mobile/PC |
| .f-normal | font-weight: normal; | 字体大小为普通 | mobile/PC |
| .f-bold | font-weight: bold; | 文字大小为粗体 | mobile/PC |
| .f-ti2 | text-indent: 2em; | 段落首行缩进2个字符 | mobile/PC |
| .f-ft_italic | font-style: italic; | 文字斜体 | mobile/PC |
| .f-unl | text-decoration: underline; | 文字加下划线 | mobile/PC |
| .f-unl_none | text-decoration: none; | 文字取消下划线 | mobile/PC |
| .f-bdr10 | border-radius: 5px; | 圆角5px，移动为10px | mobile/PC |
| .f-bdr8 | border-radius: 4px; | 圆角4px，移动为8px | mobile/PC |
| .f-clear | height: 0px; line-height: 0px; font-size: 0px; clear: both; overflow: hidden; zoom: 1; | 清浮动 | PC |
| .f-tap_reset | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | 取消移动端触控蒙层 | mobile |
| .f-song_font | font-family: "宋体"; | 使用宋体文字 | PC |
| .f-yahei_font | font-family: "Microsoft Yahei"; | 使用微软雅黑文字 | PC |
| .f-event_none | pointer-events: none; | 事件穿透 | mobile/PC (0.9.2起) |
| .f-inline_wrap | content: "\A"; white-space: pre; | 使行内元素换行 | mobile/PC(0.9.2起) |
| .f-cursor_p | cursor: pointer | 鼠标覆盖交互为链接效果 | PC(0.9.2起) |
| .f-cursor_none | cursor: default | 鼠标覆盖交互为默认鼠标效果 | PC(0.9.2起) |
| .f-cursor_not | cursor: not-allowed | 鼠标覆盖交互为禁止效果 | PC(0.9.2起) |
| .f-noselect | -webkit-user-select: none; user-select: none; | 禁止文字选中 | mobile/PC（0.9.4起） |
component
| 类/属性名 | 属性 | 说明 | 平台 |
|---|---|---|---|
| .u-icon, .u-btn | display: block; | 按钮/图标设置为块元素 | mobile/PC |
| .u-icon_il, .u-btn_il | display: inline-block; | 按钮/图标设置为行内块元素 | mobile/PC |
| .f-pclass | position: relative;&:before,&:after {position: absolute;content: '';} | 设置伪元素，通常用作图形或1px边框 | mobile/PC |
| .f-b_1px | position: relative; &:after{ position: absolute; content: ''; background-color: @border-gray;} | 设置retina屏幕边框1px，需要配合.bt_1px/.br_1px/.bb_1px/.bl_1px使用 | mobile/PC |
| .bt_1px | left: 0; width: 100%; height: 1px; -webkit-transform: scale(1, 0.5); transform: scale(1, 0.5); top: 0; | 设置上边框1px | mobile/PC |
| .bb_1px | left: 0; width: 100%; height: 1px; -webkit-transform: scale(1, 0.5); transform: scale(1, 0.5); bottom: 0; | 设置下边框1px | mobile/PC |
| .br_1px | top: 0; width: 1px; height: 100%; -webkit-transform: scale(0.5, 1); transform: scale(0.5, 1); right: 0; | 设置右边框1px | mobile/PC |
| .bl_1px | top: 0; width: 1px; height: 100%; -webkit-transform: scale(0.5, 1); transform: scale(0.5, 1); left: 0; | 设置左边框1px | mobile/PC |
| .u-btn, .u-btn_il | padding: 0; text-align: center; border-radius: 4px; | 设置按钮基础样式，赋值样式见下表button | mobile/PC |
| .u-mask | z-index: 18; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; background-color: rgba(0, 0, 0, 0.3); | 固定黑色蒙层 | mobile/PC |
| .u-win, .u-dialog | position: fixed; z-index: 19; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); | 弹窗基础样式 | mobile/PC |
button(component)
*为.u-btn/.u-btn_il的附加样式
| 类/属性名 | 属性 | 说明 | 平台 |
|---|---|---|---|
| [no-bdr] | border-radius: 0 | 按钮无圆角 | mobile/PC |
| [s-color="yellow"] | background-color: #f1ae3f; color: #fff; | 黄色按钮 | mobile/PC |
| [s-color="orange"] | background-color: #ff7010; color: #fff; | 橙色按钮 | mobile/PC |
| [s-color="red"] | background-color: #cf0e0f; color: #fff; | 红色按钮 | mobile/PC |
| [s-color="gray"] | background-color: #ccc; color: #fff; | 灰色按钮 | mobile/PC |
| [s-color="bd_gray"] | border: thin solid #999; color: #999; | 灰色边框按钮 | mobile/PC |
| [s-color="bd_white"] | border: thin solid #fff; color: #999; | 白色边框按钮 | mobile/PC |
| [s-color="bd_yellow"] | border: thin solid #f1ae3f; color: #f1ae3f; | 黄色边框按钮 | mobile/PC |
| [s-color="bd_red"] | border: thin solid #cf0e0f; color: #cf0e0f; | 红色边框按钮 | mobile/PC |
| [s-color="small"] | line-height: 26px; font-size: 12px; | 小号按钮 | mobile/PC |
| [s-color="medium"] | line-height: 42px; font-size: 16px; | 中号按钮 | mobile/PC |
| [s-color="big"] | line-height: 50px; font-size: 17px; | 大号按钮 | mobile/PC |
skin
| 类/属性名 | 属性 | 说明 | 平台 |
|---|---|---|---|
| [s-cr_red], [s-cr="red"] | color: #fe5d4e; | 字体颜色为红色 | mobile/PC |
| [s-cr_green], [s-cr="green"] | color: #009801; | 字体颜色为绿色 | mobile/PC |
| [s-cr_blue], [s-cr="blue"] | color: #01a2fc; | 字体颜色为蓝色 | mobile/PC |
| [s-cr_gray], [s-cr="gray"] | color: #999; | 字体颜色为灰色 | mobile/PC |
| [s-cr_white], [s-cr="white"] | color: #fff; | 字体颜色为白色 | mobile/PC |
| [s-ft_base], [s-cr="base"] | color: #323232; | 字体颜色为文本基础颜色 | mobile/PC |
| [s-ft_base_], [s-cr="base_"] | color: #333; | 字体颜色为文本第二种基础颜色 | mobile/PC |
| [s-ft_sub], [s-cr="sub"] | color: #666; | 字体颜色为次文字颜色 | mobile/PC |
| [s-ft_sub_], [s-cr="sub_"] | color: #999; | 字体颜色为第二种次文字颜色 | mobile/PC |
| [s-bgc_red], [s-bgc="red"] | background-color: #fe5d4e; | 背景颜色为红色 | mobile/PC |
| [s-bgc_green], [s-bgc="green"] | background-color: #009801; | 背景颜色为绿色 | mobile/PC |
| [s-bgc_blue], [s-bgc="blue"] | background-color: #01a2fc; | 背景颜色为蓝色 | mobile/PC |
| [s-bgc_gray], [s-bgc="gray"] | background-color: #999; | 背景颜色为灰色 | mobile/PC |
| [s-bgc_white], [s-bgc="white"] | background-color: #fff; | 背景颜色为白色 | mobile/PC |
status
| 类/属性名 | 属性 | 说明 | 平台 |
|---|---|---|---|
| .z-hide | display: none !important; | 元素隐藏，最高优先级 | mobile/PC |
| .z-v_hidden | visibility: hidden; | 元素视觉隐藏 | mobile/PC |
| .z-v_visible | visibility: visible; | 元素视觉显示 | mobile/PC |
| .z-hide_0 | opacity: 0; | 透明度为0 | mobile/PC |
| .z-hide_30 | opacity: 30; | 透明度为30%（PC带有filter:aplpha(opacity=透明度)兼容处理，下面的相同） | mobile/PC |
| .z-hide_60 | opacity: 60; | 透明度为60% | mobile/PC |
| .z-hide_90 | opacity: 90; | 透明度为90% | mobile/PC |
| .z-index_ | z-index: -1; | z轴层级为-1 | mobile/PC |
| .z-index_999 | z-index: 999; | z轴层级为999 | mobile/PC |