zoukankan      html  css  js  c++  java
  • day03组件

    1、text   编写文本信息,等价于span

    2、view 等价于div

    3、image

    ============================wxml=======================
    <!--pages/index/index.wxml--> <view>实例一</view> <view class="menu1"> <image src="/pages/static/bird.jpg"></image> <image src="/pages/static/tiger.jpg"></image> <image src="/pages/static/flower.jpg"></image> <image src="/pages/static/horse.jpg"></image> </view> <view>实例二</view> <view class="menu2"> <view class="item"> <image src="/pages/static/bird.jpg"></image> <text>精品</text> </view> <view class="item"> <image src="/pages/static/tiger.jpg"></image> <text>精品</text> </view> <view class="item"> <image src="/pages/static/flower.jpg"></image> <text>精品</text> </view> <view class="item"> <image src="/pages/static/horse.jpg"></image> <text>精品</text> </view> </view>
    ======================xcss================================
    /* pages/index/index.wxss */
    .c1{
      color:red
    }
    image{
      width:100rpx;
      height:100rpx
    }
    .menu1{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
    .menu2{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }
    .menu{
      display: flex;
      /*规定主轴的方向 row row-reverse也是行但是反向显示*/
      /*规定主轴的方向 column*/
      flex-direction: row;
      /*规定元素在主轴方向上的显示方式*/
      justify-content: space-around;
        /*规定元素在副轴方向上的显示方式
          align-items: ;
          一般副轴不用排
        */
    }

    .item{
       display: flex;
       flex-direction: column;
       align-items: center;
    }

    4、flex布局

    一种通用性的布局方式,记着4个布局样式就可以了

    display:flex    使用flex布局

    flex-direction :row/column  规定主轴的布局方式

    justify-content:flex-start/flex-end/space-around/space-between元素在主轴方向的布局

    align-items:flex-start/flex-end/space-around/space-between元素在副轴上的布局方式

    5、样式:

        px和rpx:

    在官网上,需要看的就是全局和组件

  • 相关阅读:
    好看的WEB配色..留的美化界面用..
    为phpcms v9 后台增加按类别查找的功能,且不影响升级。
    OS开发过程中常用开源库
    stanford《Developing Apps for ios》第五课demo要点
    C语言简陋的播放mp3代码
    编译ffmpeg for iOS,并调试iFrameExtractor demo
    windows下配置nginx pathinfo模式,支持thinkphp
    初学GTK+2.0与glade的一些网络资源
    在Centos6.3中桥接方式配置vm virtualbox中的系统网络
    Foundation的基本操作—字符串、数组、字典、集合
  • 原文地址:https://www.cnblogs.com/sunflying/p/13195699.html
Copyright © 2011-2022 走看看