分享自己在uniapp开发中用的css样式

分享自己常用的Css样式和命名规范,不是组件库,之前也用过uView、ColorUI等,但是觉得太过于复杂,不够简单,
有些命名跟自己平时习惯不一样,有时候更改一些样式花费的时候比自己重新搞一个还要多。

本人是偏后端开发的全栈程序员,前端样式不需要花里胡哨的,更多的是考虑页面布局、颜色搭配、间距圆角等。

Css命名规范也很简单粗暴,比如字体大小命名如下:

.text-26 {
	font-size: 26rpx;
}

.text-28 {
	font-size: 28rpx;
}

之前也这么命名text-small text-large或者font-sm font-xl等,但是用起来感觉不舒服,不直接。

一些UI能用Uniapp官方的就用官方的,官方不好看就自定义。这里图标复用了ColorUI的。

其实很简单,就是文字、背景、按钮、输入框、内边距、外边距、圆角、列表布局、表格等。

个人比较喜欢IOS的UI,所以平时开发借鉴很多IOS的设计。当然不是专业的UI设计师,只能说尽量做到好看。

代码运行截图如下:

代码地址 https://github.com/tigerleeli/uniapp-ui

下载导入到HBuilderX中就可以运行啦~

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小虎哥的技术博客

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值