zoukankan      html  css  js  c++  java
  • 微信小程序常用样式汇总

    本文系转载:
    原文作者:chenzheng8975
    原文地址:https://www.cnblogs.com/chenzheng8975/p/9605186.html


    ## 微信小程序常用样式汇总

    小程序特点:用完即走、低频使用、性能要求低,不支持webview;

    • 以iphone6尺寸(750*1334)为视觉稿进行设计;
    • iphone6下1px=1rpx=0.5pt     iphone6 plux下1px=0.6rpx;
    • 使用rpx,小程序会自动在不同的分辨率下进行转换,而使用px为单位不会;

    1.设置全局字体样式app.wxss:

    text{
    font-family:MicroSoft yahei;
    }

    2.设置弹性盒子模型:

    .container{
    /*弹性模型*/
    display:flex;
    /*垂直方向 列方向 排布*/
    flex-direction:column;
    /*居中*/
    align-items:center;
    /*要从整体解决排布的问题是最好的方案*/
    }

    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;

     13.设置子元素Image样式:

    .circle-img image{
        width:90rpx;
        height: 90rpx
    }

    14.最底层垂直居中横线样式:

    .horizon{
        width:660rpx;
        height: 2rpx;
        background-color: #e5e5e5;
        vertical-align: middle;
        position:relative;
        top:46rpx;
        margin: 0 auto;
        z-index: -99
    }

    15.图片居中覆盖:

    .audio{
        width:102rpx;
        height:110rpx;
        position: absolute;
        left: 50%;
        margin-left: -51rpx;//经典水平居中方式
        top:180rpx;
        margin-top: 20rpx;
        opacity:0.6;//透明度
    }
  • 相关阅读:
    数据库中Schema(模式)概念的理解
    debug --- 使用Eclipse
    pgsql 相关函数
    浏览器显示页面排版错误
    jqury 属性
    节点互换需要克隆
    mysql数据库允许远程访问
    request与response的编码和解码
    文本和属性 radio,checkbox,select
    js 和 JQuery 获取iframe的父子值
  • 原文地址:https://www.cnblogs.com/mmzs/p/11027260.html
Copyright © 2011-2022 走看看