慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第3章从一个简单的"欢迎"页面开始小程序之旅-使用flex(弹性盒子)快速布局

使用flex(弹性盒子)快速布局

1.进入目录 pages/welcome，修改文件 welcome.wxss

.user-avator {
  width: 200rpx;
  height: 200rpx;
}

2.进入目录 pages/welcome，修改文件 welcome.wxml

<!-- wxml用来编写页面骨架的文件 -->
<!-- <view>等同于<div>作用就是容器和分隔文档 -->
<view>
    <image class="user-avator" src="/images/avatar.png"></image>
    <text>Hello，七月</text>
    <!--按钮最好不要用小程序提供的<button></button>，用另外方式替代，这是经验-->
    <view>
        <text>开启小程序之旅</text>
    </view>      
</view>

3.测试调试

 4.进入目录 pages/welcome，修改文件 welcome.wxss

.user-avator {
  width: 200rpx;
  height: 200rpx;
  margin-top:160rpx;
}

5.测试调试

6.进入目录 pages/welcome，修改文件 welcome.wxss，添加 flex 布局

.container {
  display: flex;
}

.user-avator {
  width: 200rpx;
  height: 200rpx;
  margin-top:160rpx;
}

/*flex 布局 弹性盒子模型*/

7.进入目录 pages/welcome，修改文件 welcome.wxml

<!-- wxml用来编写页面骨架的文件 -->
<!-- <view>等同于<div>作用就是容器和分隔文档 -->
<view class="container">
    <image class="user-avator" src="/images/avatar.png"></image>
    <text>Hello，七月</text>
    <!--按钮最好不要用小程序提供的<button></button>，用另外方式替代，这是经验-->
    <view>
        <text>开启小程序之旅</text>
    </view>     
</view>

8.进入目录 pages/welcome，修改文件 welcome.wxss

.container {
  display: flex;
  flex-direction:column;
}

.user-avator {
  width: 200rpx;
  height: 200rpx;
  margin-top:160rpx;
}

/*flex 布局 弹性盒子模型*/

9.测试调试

10.进入目录 pages/welcome，修改文件 welcome.wxss

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

.user-avator {
  width: 200rpx;
  height: 200rpx;
  margin-top:160rpx;
}

/*flex 布局 弹性盒子模型*/

13.进入目录 pages/welcome，修改文件 welcome.wxml

<!-- wxml用来编写页面骨架的文件 -->
<!-- <view>等同于<div>作用就是容器和分隔文档 -->
<view class="container">
    <image class="user-avator" src="/images/avatar.png"></image>
    <text class="user-name">Hello，七月</text>
    <!--按钮最好不要用小程序提供的<button></button>，用另外方式替代，这是经验-->
    <view>
        <text>开启小程序之旅</text>
    </view>      
</view>

14.测试调试

 

15.进入目录 pages/welcome，修改文件 welcome.wxss

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

.user-avator {
  width: 200rpx;
  height: 200rpx;
  margin-top:160rpx;
}

.user-name {
  font-size:32rpx;
  font-weight:bold;
  font-family:MicroSoft Yahei; 
}

.meto {
  font-size:22rpx;
  font-weight:bold;
  font-family:MircoSoft Yahei;
}

/*flex 布局 弹性盒子模型*/

16.进入目录 pages/welcome，修改文件 welcome.wxml

<!-- wxml用来编写页面骨架的文件 -->
<!-- <view>等同于<div>作用就是容器和分隔文档 -->
<view class="container">
    <image class="user-avator" src="/images/avatar.png"></image>
    <text class="user-name">Hello，七月</text>
    <!--按钮最好不要用小程序提供的<button></button>，用另外方式替代，这是经验-->
    <view>
        <text class="meto">开启小程序之旅</text>
    </view>      
</view>

17.测试调试