微信小程序常用样式汇总
时间:2019-06-15
本文章向大家介绍微信小程序常用样式汇总,主要包括微信小程序常用样式汇总使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文系转载:
原文作者:chenzheng8975
原文地址:https://www.cnblogs.com/chenzheng8975/p/9605186.html
微信小程序常用样式汇总
小程序特点:用完即走、低频使用、性能要求低,不支持webview;
- 以iphone6尺寸(750*1334)为视觉稿进行设计;
- iphone6下1px=1rpx=0.5pt iphone6 plux下1px=0.6rpx;
- 使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会;
1.设置全局字体样式app.wxss:
text{ font-family:MicroSoft yahei; }
2.设置弹性盒子模型:
.container{ /*弹性模型*/ display:flex; /*垂直方向 列方向 排布*/ flex-direction:column; /*居中*/ align-items:center; /*要从整体解决排布的问题是最好的方案*/ }
3.设置页面全屏样式及背景色:
page{ height:100%; background:#b3d4db; }
4.全局设置导航条颜色app.json:
"window": { "navigationBarBackgroundColor": "#405f80" }
5.页面设置导航条颜色和标题*.json:
{ "navigationBarBackgroundColor": "#405f80", "navigationBarTitleText":"文与字" }
6.设置字体属性:
.user-name{ font-size:32rpx; font-weight:bold; }
7.创建圆角矩形边框:
.moto-container{ border:1px solid #405f80; width:200rpx; height:80rpx; border-radius:5rpx; text-align:center; }
8.外边距设置:
margin-top:20rpx;
margin-bottom:40rpx;
9.内边距设置:
padding-bottom:20rpx;
10.上、下边线设置:
border-bottom:1px solid #ededed;
border-top:1px solid #ededed;
11.文字间距设置:
letter-spacing:2rpx;
12.垂直居中(此元素放置在父元素的中部):
vertical-align: middle;
13.设置子元素Image样式:
.circle-img image{ width:90rpx; height: 90rpx }
14.最底层垂直居中横线样式:
.horizon{ width:660rpx; height: 2rpx; background-color: #e5e5e5; vertical-align: middle; position:relative; top:46rpx; margin: 0 auto; z-index: -99 }
15.图片居中覆盖:
.audio{ width:102rpx; height:110rpx; position: absolute; left: 50%; margin-left: -51rpx;//经典水平居中方式 top:180rpx; margin-top: 20rpx; opacity:0.6;//透明度 }
原文地址:https://www.cnblogs.com/mmzs/p/11027260.html
- 英伟达回应禁令:研究人员放心用不更新驱动就没影响
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(88)-Excel导入和导出-主从表结构导出
- WCF中的Binding模型之六(完结篇):从绑定元素认识系统预定义绑定
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(57)-插件---ueditor使用
- 何为正则表达式?要他有何用?
- 向silverlight传递自定义参数
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(87)-MVC Excel导入和导出
- sl从程序集中读取xaml文件
- WCF技术剖析之二十六:如何导出WCF服务的元数据(Metadata)[实现篇]
- WCF技术剖析之二十六:如何导出WCF服务的元数据(Metadata)[扩展篇]
- 如何解决打开VS2010后没有UI界面的问题
- RadRails1.0降临——增加Profiler、CallGraph Analyzer和Rails Shell等新特性
- Rails存储库从SVN转向Git
- 报告称10后已变成出境游“老司机”屌丝80后:我还没出过国
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- CentOs7下Zabbix安装教程——准备工作
- python:HTTP Error 505: HTTP Version Not Supported
- PYES异常: TypeError: 'NoneType' object is not callable
- 第十八篇 zabbix创建自定义报警媒介
- 原创|如果懂了HashMap这两点,面试就没问题了
- RTSP协议网络摄像头互联网直播开源流媒体平台
- RTSP协议网页无插件播放,匿名登录不显示设备资源如何解决?
- 设计模式~代理模式
- Linux工具入门:make工具与Makefile文件
- PF_RING的多种负载均衡方法
- 【拓展】686- 如何在 Web 上大规模生成 UUID
- Linux进程管理与性能监控
- 重学数据结构(一、线性表)
- Jmeter系列(49)- 详解 HTTP Cookie 管理器
- java.lang.ClassNotFoundException:org.springframework.web.context.ContextLoaderListener问题解决