无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/meta.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubcss.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/menu.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/top.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/head.htm

样式规范

时间:2020-09-18 23:37来源:www.lyuid.com 作者:前沿视觉网 点击:
lyui 样式规范 # 缩写规范 缩写名 源属性 示例 描述 c-{{color}} color c-80 字体颜色设置为 #808080 w-{{num}} width w-12 宽度大小设置为 12px/rpx h-{{num}} height h-12 高度设置为 12px/rpx p-{{num}} padding p-10 内边距四个方向为10px/rpx oh/... overflow: hidden; oh 溢出隐藏 f-{{num}} font-size f-12 字体大小为12px/rpx t-a-{{style}} text-align:center t-a-c 文本水平居中 t-i-{{num}} text-indent:{{num}} t-i-1 文本缩进1px/rpx t-tra-{{style}} text-transform:uppercase t-tra-up 转为大写字母 t-dec-{{style}} text-decoration:none t-dec-no 定义标准的文本,常用于去除文本下划线 t-v-{{style}} vertical-align t-v-middle 元素放置在父元素的中部,常用于输入框文本对齐 t-ls-{{num}} letter-spacing t-ls-1 字符之间的间距为1px/rpx t-ls-vw-{{num}} letter-spacing t-ls-vw-1 字符之间的间距为1vw t-ls-p-{{num}} letter-spacing t-ls-p-1 字符之间的间距为1% t-ws-{{num}} word-spacing t-w-1 单词之间间距为1px/rpx t-

lyui 样式规范#

缩写规范
缩写名 源属性 示例 描述
c-{{color}} color c-80 字体颜色设置为 #808080
w-{{num}} width w-12 宽度大小设置为 12px/rpx
h-{{num}} height h-12 高度设置为 12px/rpx
p-{{num}} padding p-10 内边距四个方向为10px/rpx
oh/... overflow: hidden; oh 溢出隐藏
f-{{num}} font-size f-12 字体大小为12px/rpx
t-a-{{style}} text-align:center t-a-c 文本水平居中
t-i-{{num}} text-indent:{{num}} t-i-1 文本缩进1px/rpx
t-tra-{{style}} text-transform:uppercase t-tra-up 转为大写字母
t-dec-{{style}} text-decoration:none t-dec-no 定义标准的文本,常用于去除文本下划线
t-v-{{style}} vertical-align t-v-middle 元素放置在父元素的中部,常用于输入框文本对齐
t-ls-{{num}} letter-spacing t-ls-1 字符之间的间距为1px/rpx
t-ls-vw-{{num}} letter-spacing t-ls-vw-1 字符之间的间距为1vw
t-ls-p-{{num}} letter-spacing t-ls-p-1 字符之间的间距为1%
t-ws-{{num}} word-spacing t-w-1 单词之间间距为1px/rpx
t-ws-vw-{{num}} word-spacing t-w-1 单词之间间距为1vw
t-wsp-p-{{num}} word-spacing t-w-1 单词之间间距为1%
t-dir-{{style}} direction t-dir-rtr 文本方向从右到左。
space-{{style}} white-space space-nowrap 文本不换行,直到遇到br
abs position:absolute abs 绝对定位
fix position:fixed fix 固定定位
rel position:relative rel 相对定位
db display: block; db 转成块/显示
di display: inline di 转成内联元素
dn display: none; dn 隐藏元素
dib display: inline-block; dib 转成行内块/显示
d-{{style}} display: table; d-table 为块表格来显示(类似 table)
fx display:flex fx 转为块级弹性盒子
infx display:inline-flex fx 转为内联弹性盒子
fx-{{style}} display:flex fx 设置弹性盒子属性
o-0 opacity:0 o-0 透明度为0
o-0{{num}} opacity:01 o-01 透明度为10%
o-1 opacity:1 o-1 透明度为100%
rd-{{num}} border-radius rd-10 圆角为10px/rpx
rdp-{{num}} border-radius rd-10 圆角为10%
rXY-{{num}} transform:rotate({{num}}deg) rXY-45 水平垂直旋转45°
rX-{{num}} transform:rotateX({{num}}deg) rX-45 水平旋转45°
rY-{{num}} transform:rotateY({{num}}deg) rY-45 垂直旋转45°
/ / / /

前端UI框架,UI框架组件,小程序组件,Lyuif前端框架专注于高效UI解决方案.lyuif是一款HTML/CSS前端框架,高效组件搭配lyui基因碎片化组合完美适配设计稿以及迭代更新,高效前端开发解决方案

开发文档

热点内容

无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footer.htm
无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/side.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/footbar.htm 无法在这个位置找到: lyuid_tpl_1683a9f6g8b6f2a71_file/pubjs.htm