微信小程序样式（微信小程序常用样式汇总）

小百思特网程序特点：用完即走、低频使用、性能要求低，不支持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：

&qu百思特网ot;window": {"navigationBarBackgroundColor": "#405f80"}

5.页面设置导航条颜色和标题*.json:

{"navigationBarBackgroundColor": "#405f80","navigationBarTitleText":"文与字"}

6.设置字体属性：

.user-name{font-size:32rpx;font-weight:bold;}

7.创建圆角矩形边框：

.moto-container{border:1px soli百思特网d #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;//透明度}