⼩程序常⽤样式汇总⼩程序特点：⽤完即⾛、低频使⽤、性能要求低，不⽀持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;//透明度
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。