常用样式
view内文字居中：不需要给view设置宽度
text-align: center;设置某一行文字与另一行文字的距离：
需要给这两行文字都设置行高：行高=字的高度
line-height:28rpx;以及font-size:28rpx;让子元素的图片居中：
<view class='paid_shop'>
<view>即将到店</view>
<image src='../../imgs/icon_phone@2x.png'></image>
</view>
给外边框的 paid_shop 设为flex布局之后 使用 align-items: center;就可以实现。
- view内的文字垂直居中：
height: 58rpx;
line-height: 58rpx;
高度=行高
- 给小程序设定主体颜色
使用公共类名，然后在每一个用到这个颜色的地方使用这个类名，而不要使用单个写背景色以及颜色的方法。
/**app.wxss**/
/*主题色*/
.themeColor{color:#ffb12a;}
.themeBgcolor{background-color:#ffb12a;}
- 小程序支持多个类名写在一起,用逗号隔开即可
.container,page{
width: 100%;
background: #ededed;
}
-
view下的image居中：
主轴是水平方向时（就是默认的方向）：
水平居中，设为 flex 布局：display:flex;(目前没发现需要兼容各个浏览器，所以先不写)，然后align-items:center;,即可。
垂直居中，设为 flex 布局：display:flex;(目前没发现需要兼容各个浏览器，所以先不写)，然后justify-content: center;,即可。
样式的坑
-
不要使用行内的背景图片相对路径设置，安卓不显示。
小三角效果
背景图片只能使用base64或者url格式的图片
-
小程序使用图片名字有限制，不能使用非法字符，否则，即使开发者工具上正常显示，但是真机上无法显示。
icon@2x.png正常显示
icon_¥@2x.png真机无法显示
具体有哪些字符属于非法的，还需要慢慢总结。
3 设置背景色
backgroundcolor在.json文件中设置，是没有用的。
page{
width:100%;
height:100%;
}
.container{
background-color: #f3f3f3;
width:100%;
height:100%;
}
直接设置margin 有的时候竟然无效。
4 input输入框的几个属性
5 让元素居中的方式
image.png
让这个大白块居中：
.mask{
width:100%;
height:100%;
position:fixed;
background-color:#999;
z-index:9999;
top:0;
left:0;
opacity:0.5;
}
.main{
width:555rpx;
height:572rpx;
background-color: #fff;
border-radius: 12rpx;
position:fixed;
z-index: 99999;
top:50%;
margin-top:-286rpx;
left:50%;
margin-left:-277rpx;
}
一句话：top 50%,margin-top=负的自身高度的一半。宽度也是这样，然后就可以实现居中。
6 css渐变 线性渐变
background: linear-gradient(-18deg, #ffaf25, #ffc259);
- 注意的点：
+可以使用backgroud但是不能使用background-color.
7 中间虚线以及两个半圆的实现：
分割线
wxml:
<view class='m2'>
<view class='m2_tit'>电话挪车券</view>
<view class="coupon-line">
<view></view>
<view></view>
</view>
</view>
wxss:
.m2{
margin:33rpx auto 44rpx auto;
width:445rpx;
height:199rpx;
background: linear-gradient(-18deg, #ffaf25, #ffc259);
border-radius: 12rpx;
}
.m2_tit{
font-size:30rpx;
color:#fff;
margin-left:32rpx;
padding-top:26rpx;
margin-bottom:21rpx;
}
.coupon-line{
position:relative;
width:418rpx;
margin:auto;
border-top:4rpx dashed #fff;
}
.coupon-line view{
width:28rpx;
height:28rpx;
background:#fff;
border-radius:50%;
position:absolute;
z-index:99;
top:-14rpx;
}
.coupon-line :first-child{
left:-28rpx;
}
.coupon-line :last-child{
right:-28rpx;
}
