1.图片居中覆盖:
.audio{
width:102rpx;
height:110rpx;
position: absolute;
left: 50%;
margin-left: -51rpx;//经典水平居中方式
top:180rpx;
margin-top: 20rpx;
opacity:0.6;//透明度
}
2.最底层垂直居中横线样式:
.horizon{
width:660rpx;
height: 2rpx;
background-color: #e5e5e5;
vertical-align: middle;
position:relative;
top:46rpx;
margin: 0 auto;
z-index: -99
}
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;