字体大小#
类名 | 介绍 | 实际属性 | 说明 |
---|---|---|---|
text-xsl | 特大号字 | font-size: 120rpx; | 用于图标、数字等特大显示 |
text-xs | 说明文本 | font-size: 20rpx; | 说明文本,标签文字等关注度低的文字 |
text-sl | 较大号字 | font-size: 80rpx; | 用于图标、数字等较大显示 |
text-xxl | 特殊字 | font-size: 44rpx; | 用于金额数字等信息 |
text-xl | 页面大标题 | font-size: 36rpx; | 页面大标题,用于结果页等单一信息页 |
text-lg | 页面小标题 | font-size: 32rpx; | 页面小标题,首要层级显示内容 |
text-df | 正文 | font-size: 28rpx; | 页面默认字号,用于摘要或阅读文本 |
text-sm | 辅助信息 | font-size: 24rpx; | 页面辅助信息,次级内容等 |
文字对齐#
类名 | 介绍 | 实际属性 |
---|---|---|
text-left | 特大号字 | text-align: left; |
text-center | 较大号字 | text-align: center; |
text-right | 特殊字 | text-align: right; |
flex 布局#
-
固定尺寸#
在父级元素类名中添加
flex
flex-wrap
之后,在子级元素类名添加以下类名即可。类名 介绍 实际属性 basis-xs 20%宽度 flex-basis: 20%; basis-sm 40%宽度 flex-basis: 40%; basis-df 50%宽度 flex-basis: 50%; basis-lg 60%宽度 flex-basis: 60%; basis-xl 80%宽度 flex-basis: 80%; -
比例布局
在父级元素类名中添加
flex
之后,在子级元素类名添加以下类名即可。类名 介绍 实际属性 flex-sub 相同宽度 flex: 1; flex-twice 两倍宽度 flex: 2; flex-treble 50%宽度 flex: 3; -
水平对齐#
在父级元素类名中添加
flex
,同时添加以下类名即可。类名 介绍 实际属性 justify-start 左对齐(默认值) justify-content: flex-start; justify-end 右对齐 justify-content: flex-end; justify-center 居中 justify-content: center; justify-between 两端对齐,项目之间的间隔都相等。 justify-content: space-between; justify-around 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 justify-content: space-around; -
垂直对齐
在父级元素类名中添加
flex
,同时添加以下类名即可。类名 介绍 实际属性 align-start 起点对齐 align-items: flex-start; align-end 终点对齐 align-items: flex-end; align-center 中点对齐 align-items: center; -
内外边距#
内外边距一共有五种尺寸,{size}*类名分别为:
xs
,sm
,df
,lg
,xl
,分别从*10rpx,20rpx,30rpx,40rpx,50rpx。类名 介绍 类名 介绍 .margin- 外边距 .padding- 外边距 .margin-lr- 水平方向外边距 .padding-lr- 水平方向内边距 .margin-tb- 垂直方向外边距 .padding-tb- 垂直方向内边距 .margin-top- 上外边距 .padding-top- 上内边距 .margin-right- 右外边距 .padding-right- 右内边距 margin-bottom- 下外边距 .padding-bottom- 下内边距 .margin-left- 左外边距 .padding-left- 左内边距
图标用法#
由于之前在app.wxss引入了icon.css,因此在这里要使用的话,直接用即可。
使用方法:
text标签
,类名:cuIcon-{{name}}
<!--page.wxml-->
<text class="cuIcon-apps text-gray"></text>
其中,colorui的图标,大部分是有两个模式的,一个普通状态,一个fill状态。fill状态直接在普通状态的名字后面加上fill
即可。
shadow-warp
用来给周围添加阴影#
margin和padding的区别#
margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。(外边距)
padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。(内边距)
(1)padding-left:10px; /margin-left:10px; 左内/外边距
(2)padding-right:10px; /margin-right:10px; 右内/外边距
(3)padding-top:10px; /margin-top:10px; 上内/外边距
(4)padding-bottom:10px; /margin-bottom:10px; 下内/外边距
(5)padding:10px;/ margin:10px; 四边统一内/外边距
(6)padding:10px 20px; /margin:10px 20px; 上下、左右内/外边距
(7)padding:10px 20px 30px;/margin:10px 20px 30px; 上、左右、下内/外边距
(8)padding:10px 20px 30px 40px;/margin:10px 20px 30px 40px; 上、右、下、左内/外边距
solid-right
是用来给元素右边加一条竖线 ,同理solid-bottom
是给下边添加一条横线#
margin-top-sm
是让元素向上有一个外边距,同理 margin-tb-sm
是向下有个外边距#
shadow-blur
是根据背景图片散发阴影#
flex-direction
是 flex-direction:column
的意思,也就是保证元素呈现下面的排列(上下排列):
在微信小程序开发官网中这样解释:
圆角样式(border-radius)#
首先先将内容方块区域大小显示出来,然后在方块的四个角贴上你设置的半径大小的四个圆,将边角超出圆的区域隐藏,就是圆角样式的最终呈现效果。
圆角样式如同margin一样,可以单独对每个边角的小圆设置一个不一样的半径值,这样我们就可以利用圆角样式设计出各式各样的图形出来
四个属性值:Border-radius:50px 30px 80px 150px;
两个属性值:左上 右上 右下 左下
Flex 布局教程:语法篇#
当一个view元素不能伸展到最下方的时候,在该view底部代码添加如下代码可以让其伸展到最下边(目前不知道为什么可以这样):
<view class="cu-bar">
</view>