8***@qq.com
8***@qq.com
  • 发布:2020-05-05 02:36
  • 更新:2020-05-28 15:02
  • 阅读:10026

uni.css样式详解

分类:uni-app

类使用说明
1.uni-padding-wrap:宽度690rpx 左右内边距30rpx ,相当于690/750=92%的宽度。可用于外层包裹

2.单页头,标题和正文
uni-page-head:
uni-page-head-title:
uni-page-body:超出范围隐藏
这三个类的效果

  1. uni-word:上下内边距200rpx 左右100rpx。

过长效果,用在什么地方呢?。

4.uni-title:30rpx行高1.5
uni-title text:24rpx 灰色
可用作正负标题<view class="uni-title">uni-title<text>uni-title text</text></view>

  1. uni-text-gray 灰色#ccc;
  2. uni-text-small 24rpx号字

7.uni-common-mb,uni-common-pb,uni-common-pl,uni-common-mt
上面的common代表通用,后面的第一个字母m代表margin,p代表padding。b代表底部,l代表left,t代表top 他们的距离都是30rpx
.uni-common-mb{
margin-bottom:30rpx;
}
表示uni通用底部外边距30rpx;

8.背景色三个
uni-bg-red,uni-bg-green,uni-bg-blue

9h1-h6效果图

  1. uni-bold 加粗

  2. uni-ellipsis 文本溢出
    不自动换行,文本溢出时显示省略号。

12.uni-btn-v
/ 竖向百分百按钮 /
.uni-btn-v{
padding:10rpx 0;
}
.uni-btn-v button{margin:20rpx 0;}
没明白作者什么意思。

13.表单(from)
uni-form-item 宽度100% 弹性布局,上下内间距10rpx 左右0

附加带有预览效果图。后面的类还没看完。看完再传一遍。

0 关注 分享

要回复文章请先登录注册

8***@qq.com

8***@qq.com (作者)

回复 2***@qq.com :
嗯,嗯,官网对pc支持不好。我现在又写了一个,pc端,手机端,自适应,自判断的一个东西,有时间,可以一起探讨一下。
2020-05-28 15:02
2***@qq.com

2***@qq.com

谢谢,加油
2020-05-24 14:06