首页 > 技术文章 > 小程序---公共的样式(后续还有则继续添加)

yundeblog 2021-04-30 14:56 原文

/* 字体颜色 */
    .color-white { background-color: #ffffff; }
    .color-grey { background-color: #eeeeee; }
    
    /* 背景颜色 */
    .bg-color-white { background-color: #ffffff; }
    .bg-color-grey { background-color: #eeeeee; }
    
    /* 超出省略 */
    .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ell2 { display: -webkit-box; overflow: hidden;white-space: normal; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
    .ell3 { display: -webkit-box; overflow: hidden; white-space: normal; text-overflow: ellipsis; word-wrap: break-word; -webkit-line-clamp:3; -webkit-box-orient: vertical; }
    
    /* 字号 */ 
    .fs34 { font-size: 34rpx; }
    .fs32 { font-size: 32rpx; }
    .fs30 { font-size: 28rpx; }
    .fs28 { font-size: 28rpx; }
    .fs26 { font-size: 26rpx; }
    .fs24 { font-size: 24rpx; } 
    .box-s { box-sizing: border-box; }
    .strong { font-weight: bold; }
    
    /* 弹性盒子 */
    .fbox { display: flex; }
    .fg1 { flex-grow: 1 }
    .fbox-acenter { align-items: center; }
    .fbox-jcenter { justify-content: center; }
    .fbox-jbetween { justify-content: space-between; }
    .fbox-jaround { justify-content: space-around; }
    
    /*对齐方式 */
    .tl { text-align: left; }
    .tc { text-align: center; }
    .tr { text-align: right; }
    .tj { text-align: justify; }


    .font-del-line { text-decoration: line-through }
    .font-underline { text-decoration: underline; }


    /* 必填星号 */ 
    class::before {
        content: "*";
        color: red;
    }

 

写在app.vue(HBuilderX)或app.wxss(微信开发者工具)里面

 

推荐阅读