感覺可以閒幾天，存了備份，還未整理許多項目中遇到的實際問題，先把的wxss(即css)公共樣式整理上來（後期自己會搭建自己的網站）
如果各位有什麼建議和問題，歡迎留言，看到一定會及時反饋
注：個人喜歡在公共樣式加區別類的前綴（比如：app- 、 maskCom-等）
話不多說：先附代碼了（爲了方便複製，分開寫了，複製即可用，裏面含備註，可刪）
樣式會及時整理更新~~~
基本公共樣式
page {color: #000;background-color: #f2f2f2;} /*全局設置所有頁面屬性*/
image {width: 100%;height: 100%;}
text {color: #000;} /*text可複製類顏色*/
rich-text {color: #000;} /* 需要轉碼文本（行數間需要空格則後臺轉碼div便籤間加<br />）*/
/* 表單類 */
input {color: #000;}
textarea {color: #000;width: 100%;}
.input-placeholder {color: #DEDFE5;} /*表單placeholder默認樣式*/
button:after{border:none;} /* 處理button默認邊框 */
button[disabled] {background-color: #D0CBC5!important;color: #ECE9E6!important;}/*按鈕不可點擊時的默認樣式，必須強制改;*/
其實 H5 css也可用的樣式
.app-dn {display: none;}
.app-db {display: block;}
.app-fl {float: left;}
.app-fr {float: right;}
.app-overflow {overflow: hidden;}
/* 設置一致性按鈕 */
.app-btn {height: 92rpx;font-size: 36rpx;color: #fff;background-color: #FFBA17;border-radius: 100rpx;line-height: 92rpx;border: none;}
/* 最多顯示幾行 */
.app-maxRow {text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;
/* -webkit-line-clamp: 2; 行數單獨設置 */
文本大小，爲了自適應，也爲了方便複製，畢竟一個一個大也費事兒 （基本上除了突出顯示的文本，其它都是需要用自適應字體大小的）
/* 文字 rpx */
.app-fz16 {font-size: 16rpx;}
.app-fz18 {font-size: 18rpx;}
.app-fz20 {font-size: 20rpx;}
.app-fz22 {font-size: 22rpx;}
.app-fz24 {font-size: 24rpx;}
.app-fz26 {font-size: 26rpx;}
.app-fz28 {font-size: 28rpx;}
.app-fz30 {font-size: 30rpx;}
.app-fz32 {font-size: 32rpx;}
.app-fz36 {font-size: 36rpx;}
.app-fz40 {font-size: 40rpx;}
.app-fz48 {font-size: 48rpx;}
/* 背景顏色 */
.app-bg-mainTonal {background-color: #FFBA17;} /*主背景色*/
一些工具類的公共樣式，後期會單獨整理（暫時會放這）
——————————————————————————————————————————————————————
下面是一些類似於工具的樣式（含wxml）
<view class='app-my-list list-單個名字' catchtap='goWhatPage'>
<view class='app-list-l'>
<image src='/img/mm.png'></image>
<text>單個list名字</text>
</view>
<view class='app-list-r'>
<image src='/img/right.png' class='appp-list-r'></image>
</view>
</view>
wxml ↑↑↑ wxss↓↓↓
/* 個人中心list WXSS*/
.app-my-list {width: 100%; height: 90rpx;font-size: 32rpx;display: flex;justify-content: space-between;padding: 20rpx 40rpx;background-color: #fff;color:#1D1507;align-items: center;box-sizing:border-box;margin-bottom: 35rpx;}
/* 右箭頭 */
.app-rightIcon {width: 10rpx;height: 18rpx;margin-left:15rpx;}
.app-list-l {}
.app-list-l image {width: 40rpx;height: 40rpx;vertical-align: middle;margin-right: 15rpx;}
.app-list-l text {vertical-align: middle;}
.app-list-r {}
.app-list-r image{width: 20rpx;height: 20rpx;}
list 也可自己定義data 然後循環顯示，需要注意的是，必須傳入自定義屬性data-id="{{區別ID}}" 具體方法就不寫了 這裏是寫公共樣式代碼的
自定義彈窗
wxml(html)
<view class='app-mask-bg {{"是否顯示"?"db":"dn"}}' wx:if="{{1==1}}">
<view class='app-mask-box'>
<view class='app-mask-content overflow maskNameClass'>
maskNameClass 爲單獨彈窗類名 寬高需自己設置，可改是否居中（56%）
</view>
<image src='/pages/img/closeMask.png' class='app-closeImg mask01-close' catchtap='closeMask01'></image>
</view>
</view>
wxss(css)
.app-mask-bg { position: fixed;width: 100%;height: 100%;top: 0;left: 0;background-color:rgba(0, 0, 0, 0.7);z-index: 600;}/* 背景遮罩層 */
.app-mask-box {position: absolute;top: 56%;left: 50%;transform: translate(-50%,-50%);z-index: 900;}/* 盒子BOX */
.app-mask-content {background-color: #fff;border-radius: 10rpx;color: #000;overflow: hidden;} /* 內容 */
.app-closeImg {width: 65rpx;height: 65rpx;display: block;margin: 0 auto;margin-top: 30rpx;}/* 關閉彈窗按鈕 */
附微信小程序默認設置：
text
除了文本節點以外的其他節點都無法長按選中。
button
input
textarea
image
canvas
另外，swiper等組件 必須有寬高
後期可能會把工具類拆出來 單獨整理一個博客
//-----------------------------------------------------------------------------------------------------------
// 以上含圖片的都需要自己加入圖片看效果（代碼直複製即可，注意改圖片名就好）
--------------轉載請註明出處，著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。----------------------------