• 小程序一个大盒子里面的盒子内容居中对其显示wxss写法


    对小程序研究感兴趣的可加(交流QQ群:604788754)入群联系群主可得到小程序教学资源。

    这个案例只是想展示效果,内容部分未进行for循环绑定处理:

    WXML:

    <view class="maxbox">
      <!--星期-->
      <view class="weekday">
        <view class="weekday01">日</view>
        <view class="weekday01">一</view>
        <view class="weekday01">二</view>
        <view class="weekday01">三</view>
        <view class="weekday01">四</view>
        <view class="weekday01">五</view>
        <view class="weekday01">六</view>
      </view>
    <!---阳历阴历-->
      <view class="days">
        <view class="days01">
          <text>1</text>
          <text>初三</text>
        </view>
    
        <view class="days01">
          <text>2</text>
          <text>初八</text>
        </view>
    
        <view class="days01">
          <text>3</text>
          <text>初九</text>
        </view>
    
        <view class="days01">
          <text>4</text>
          <text>初十</text>
        </view>
    
        <view class="days01">
          <text>5</text>
          <text>十一</text>
        </view>
    
        <view class="days01">
          <text>6</text>
          <text>十二</text>
        </view>
    
        <view class="days01">
          <text>7</text>
          <text>十三</text>
        </view>
    
        <view class="days01">
          <text>8</text>
          <text>初七</text>
        </view>
      </view>
    
    </view>

    WXSS:

    .maxbox{
       90%;
      height: auto;
      margin-left: 5%;
      display: flex;
      flex-direction: column;
      border: 1px #000 solid;
    }
    /*星期*/
    .weekday{
       100%;
      height: 100rpx;
      line-height: 100rpx;
      background-color: #188eee;
      display: flex;
      flex-direction: row;
      color: #fff;
    
    }
    .weekday01{
       14.2%;
      height: 100%;
      text-align: center;
    }
    
    /*阳历阴历*/
    .days{
       100%;
      height: auto;
      /*display: flex;
      flex-direction: row;*/
      display: inline-block;
    }
    .days01{
       14.2%;
      height: 100rpx;
      display: flex;
      flex-direction: column;
      text-align: center;
      font-size: 16px;
      float: left;
      line-height: 40rpx;
    }

     效果如下:

  • 相关阅读:
    mysql常用函数
    mysql中utf8_bin、utf8_general_ci、utf8_general_cs编码区别
    JS 中的return false的作用
    css3 animation动画执行结束,停顿几秒后重新开始执行
    (原)人月神话-阅读笔记
    (原创)cocosStudio: text设置颜色问题
    (原创)cocos-js js调用android
    (原创)cocos-js 实现震屏效果
    (转)Cocos2d-js中使用Shader方法--以一个简单的波纹效果为例:
    (转)Cocos2dx-JS 在 Sprite 上使用 Shader
  • 原文地址:https://www.cnblogs.com/yiweiyihang/p/7043375.html
Copyright © 2020-2023  润新知