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

这篇具有很好参考价值的文章主要介绍了分享自己在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设计师,只能说尽量做到好看。

代码运行截图如下:
uniapp css框架,uni-app,uni-app,css,ui

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

下载导入到HBuilderX中就可以运行啦~文章来源地址https://www.toymoban.com/news/detail-566637.html

到了这里,关于分享自己在uniapp开发中用的css样式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp开发小程序如何修改picker选中样式及选中字体样式

    需求1:修改选中的样式 需求2:修改选中字体的颜色 indicator-class 设置选择器中间选中框的类名 2.修改选中后字体的样式(重要代码段) //选中字体样式 .pickerSelected { color: #ffffff !important; z-index: 2; } 这边是改造uview的picker组件全部代码

    2024年02月11日
    浏览(44)
  • 前端开发如何更好的避免样式冲突?级联层(CSS@layer)

    作者:vivo 互联网前端团队 - Zhang Jiqi 本文主要讲述了CSS中的级联层(CSS@layer),讨论了级联以及级联层的创建、嵌套、排序和浏览器支持情况。级联层可以用于避免样式冲突,提高代码可读性和可维护性。 我们参看Cascading and Inheritance Level 5(13 January 2022) 中6.4节所述: 级

    2024年02月06日
    浏览(30)
  • 【微信小程序开发】一文学会使用CSS样式布局与美化

    在微信小程序开发中,CSS样式布局和美化是非常重要的一部分,它能够为小程序增添美感,提升用户体验。本文将介绍如何学习使用CSS进行样式布局和美化,同时给出代码示例,帮助开发者更好地掌握这一技巧。 在微信小程序中,我们可以使用CSS样式来控制元素的布局和样式

    2024年02月07日
    浏览(31)
  • Uni-App开发框架介绍

    Uni-App是一家公司(DCloud)产品,公司承诺将一直开源且免费。 公司旗下有4个产品: HBuilder X:开发工具 uni-app:跨平台统一框架 uniCloud:云服务提供商 uniMPsdk:Mobile端sdk,用于接入uni-app开发的模块 主要盈利方式是uni-ad(广告业务)和unicloud(云服务商) 一次编写,多端运行 小程

    2024年02月12日
    浏览(41)
  • uni-app开发小程序:项目架构以及经验分享

    2022年的时候,公司为了快速完成产品并上线,所以选用微信小程序为载体;由于后期还是打算开发App;虽然公司有ios和Android,但是如果能一套代码打包多端,一定程度上可以解决成本;前端技术栈也是vue,在考察选择了uni-app。后来多个小程序项目都采用了uni-app开发,积累了

    2024年02月09日
    浏览(43)
  • ArkTS声明式开发范式:赋值显示,css样式,点击事件,页面跳转

    页面地址:src/main/ets/pages/Second.ets

    2024年02月01日
    浏览(39)
  • vue3 + Tailwind Css + Vite 搭建快速开发前端样式环境

    一个功能类优先的 CSS 框架,用于快速构建定制的用户界面。这是来自 TailwindCss 官方定义。 中文网站 Tailwindcss 基于原子化理念,将样式重复性代码降到最小,原本开发最大限度基于类名的声明块不重复,现在Tailwindcss基于单独一句声明不重复。 活跃度 github starts 数量达到

    2024年02月04日
    浏览(57)
  • uniapp小程序开发-富文本编辑器mp-html,juice外部样式转内联样式

    在开发一款公司的小程序过程中,有一个需求:web端后端可以上传word文档,后端转为html字符串;小程序接收显示,并且可以在小程序进行编辑修改。 其实在日常小程序中很少见到富文本编辑器的使用,所以这次使用的过程中也尝试了多种,但是最好用的还是mp-html 这款插件

    2024年02月09日
    浏览(35)
  • uniapp开发小程序uview的u-button样式自定义修改

    u-button组件里:customStyle=\\\"样式数据名\\\" 在data里申明样式数据名,形式为对象,注意值要加引号,且有-的只要改为驼峰命名如border-Radius

    2024年02月03日
    浏览(32)
  • Windows10中用Docker优雅的拥有一个自己的Linux环境

    使用windows的同学,想学习或者使用Linux环境时,通常会有 Hyper-v , vmware workstation , virtualbox 等虚拟机再安装Linux系统。 快使用Docker吧,彻底抛弃虚拟机 安装docker 请猛戳: Windows10环境下安装Docker - 技术圈 修改镜像 为了更快速的拉取镜像,这里使用阿里的镜像 启动Docker后,在

    2024年02月19日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包