微信小程序常用样式汇总

小程序特点：用完即走、低频使用、性能要求低，不支持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;//透明度
}

微信小程序常用样式汇总相关推荐

微信小程序开源项目库汇总-持续更新
微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等 UI组件 weui-wxss ★852 - 同微信原生视觉体验一致 ...
微信小程序text设置高度_微信小程序字体样式的设置
知识点: 1.常用字体样式属性 2.利用style和class 设置字体样式 3.在app.wxss 和 index.wxss中定义样式常用字体属性: 举列: 项目目录: 运行结果: 在index. ...
微信小程序开源项目库汇总
最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...
input ios问题小程序_微信小程序开发常见问题汇总
原标题:微信小程序开发常见问题汇总 1.域名必须是https 非https的域名不被微信小程序允许. 2.input组件placeholder字体颜色卸载placeholder-class里面的co ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
微信小程序常用视图容器组件
微信小程序常用视图容器组件 1.组件概述 2.常用的试图容器组件 2.1 view 2.1.1 案例 2.2 scroll-view 2.2.1 案例 2.3 swiper 2.3.1 案例 1.组件 ...
微信小程序常用表单组件
微信小程序常用表单组件 1.常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 s ...
微信小程序-常用api
文章目录微信小程序-常用api 路由 wx.switchTab(Object object) wx.navigateTo(Object object) wx.navigateBack(Object ...
微信小程序优惠券样式
微信小程序优惠券样式 <view class="coupon-view"><view class="coupon-left"></ ...
标星 2.7w+ 堪称史上最全的微信小程序开发资源汇总
[公众号回复 "1024",免费领取程序员赚钱实操经验] 2017 年 1 月,微信小程序一夜成名. 微信小程序成名后,各大厂开始效仿,相继出现了支付宝.百度.今日头条.QQ.抖音 ...

微信小程序常用样式汇总

微信小程序常用样式汇总相关推荐

最新文章

热门文章