常用樣式
view內(nèi)文字居中：不需要給view設(shè)置寬度
text-align: center;設(shè)置某一行文字與另一行文字的距離：
需要給這兩行文字都設(shè)置行高：行高=字的高度
line-height:28rpx;以及font-size:28rpx;讓子元素的圖片居中：
<view class='paid_shop'>
<view>即將到店</view>
<image src='../../imgs/icon_phone@2x.png'></image>
</view>
給外邊框的 paid_shop 設(shè)為flex布局之后 使用 align-items: center;就可以實(shí)現(xiàn)辐啄。
- view內(nèi)的文字垂直居中：
height: 58rpx;
line-height: 58rpx;
高度=行高
- 給小程序設(shè)定主體顏色
使用公共類名雏亚，然后在每一個(gè)用到這個(gè)顏色的地方使用這個(gè)類名，而不要使用單個(gè)寫背景色以及顏色的方法等孵。
/**app.wxss**/
/*主題色*/
.themeColor{color:#ffb12a;}
.themeBgcolor{background-color:#ffb12a;}
- 小程序支持多個(gè)類名寫在一起,用逗號(hào)隔開即可
.container,page{
width: 100%;
background: #ededed;
}
-
view下的image居中：
主軸是水平方向時(shí)（就是默認(rèn)的方向）：
水平居中，設(shè)為 flex 布局：display:flex;(目前沒發(fā)現(xiàn)需要兼容各個(gè)瀏覽器忆谓，所以先不寫)孙技，然后align-items:center;,即可。
垂直居中明棍，設(shè)為 flex 布局：display:flex;(目前沒發(fā)現(xiàn)需要兼容各個(gè)瀏覽器乡革，所以先不寫)，然后justify-content: center;,即可。
樣式的坑
-
不要使用行內(nèi)的背景圖片相對(duì)路徑設(shè)置署拟，安卓不顯示婉宰。
小三角效果
背景圖片只能使用base64或者url格式的圖片
-
小程序使用圖片名字有限制，不能使用非法字符推穷，否則心包，即使開發(fā)者工具上正常顯示，但是真機(jī)上無法顯示馒铃。
icon@2x.png正常顯示
icon_￥@2x.png真機(jī)無法顯示
具體有哪些字符屬于非法的蟹腾，還需要慢慢總結(jié)。
3 設(shè)置背景色
backgroundcolor在.json文件中設(shè)置区宇，是沒有用的娃殖。
page{
width:100%;
height:100%;
}
.container{
background-color: #f3f3f3;
width:100%;
height:100%;
}
直接設(shè)置margin 有的時(shí)候竟然無效。
4 input輸入框的幾個(gè)屬性
5 讓元素居中的方式
image.png
讓這個(gè)大白塊居中：
.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=負(fù)的自身高度的一半议谷。寬度也是這樣炉爆，然后就可以實(shí)現(xiàn)居中。
6 css漸變 線性漸變
background: linear-gradient(-18deg, #ffaf25, #ffc259);
- 注意的點(diǎn)：
+可以使用backgroud但是不能使用background-color.
7 中間虛線以及兩個(gè)半圓的實(shí)現(xiàn)：
分割線
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;
}
