分享自己在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中就可以运行啦~

分享自己在uniapp开发中用的css样式相关推荐

前端技术分享：一个超级好用的CSS样式表
大家可以经常逛一些程序员比较喜欢的论坛贴吧,你会有不一样的惊喜呢,今天小千就来给大家分享一个在GitHub上面发现的超级好用的CSS样式表,来看一看. 看名称本以为是一个动画库,但是看下来才发现这是一 ...
Web前端开发北京林业大学 CSS样式-单元作业
Web前端开发北京林业大学通关攻略 Web前端开发客观题编程题概论单元测试1 HTML基础单元测试2 单元作业1 CSS样式单元测试3 单元作业2 CSS布局与定位单元测试4 单元作 ...
uniapp修改html样式,关于css:uniapp操作dom改变css样式
在uniapp中,想给元素增加一些动静的css款式,例如transform, uni.createSelectorQuery().select(".sticke").boundin ...
uniapp怎么引入css_uniapp - css样式设置scoped
1.App.vue(样式层级高)定义样式就可以覆盖子组件或者父组件,无论有没有设置scoped关键字 export default { onLaunch: function() { console.l ...
uniapp 修改 video 组件css样式
uniapp video标签默认的.uni-video-container样式background-color带有黑色背景滑动播放视频列表时,第一个视频会一闪黑屏,实际上是标签本身的样式设置背景 ...
Web开发day3：CSS样式补充
目录 1. hover 2. after 3. position 4. border 进度来源:最新Python的web开发全家桶(django+前端+数据库) 网址:最新Python的web开发全家 ...
【小程序专栏】总结uniapp开发小程序的开发规范
文章目录一.项目结构二.开发规范遵循Vue 单文件组件 (SFC) 规范组件及接口规范三.css样式规范全局样式与局部样式尺寸响应式字体的使用请使用flex布局方式一.项目结构在 ...
uniapp 开发H5打包微信小程序样式失效的解决之道
使用uniapp开发H5,样式已经按照UI设计稿全部实现.但是在打包微信小程序调试的时候,遇到很多样式失效的问题.问了度娘很久,并没有完全解决样式失效的问题.于是自己按照从度娘上查到的方法去进行组合尝 ...
css图片横向压缩,【css样式生成图片合并压缩工具】Sprite，你值得拥有
好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...

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

分享自己在uniapp开发中用的css样式相关推荐

最新文章

热门文章