小程序：搭建index静态页面

1. 新建小程序项目demo1（不使用云服务、无模板）。
2. 项目根目录下新建文件夹：static，用于存放静态资源，比如图片等。
3. 通过根路径引入图片：将image的src属性指定为根路径（绝对路径）。
   <image class="avatarUrl" src="/static/images/nvsheng.jpg"></image>。
4. 元素标签不能使用id选择器，可以用class选择器、标签选择器。
5. 解决问题：背景色如何填满页面？

<!-- index.wxml -->
<view class="indexContainer">
  <image class="avatarUrl" src="/static/images/nvsheng.jpg"></image>
  <text class="userName">女神1号</text>
  <view class="box">
    <text>hello world</text>
  </view>
</view>

/* index.wxss */
.indexContainer{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: skyblue;
}
.avatarUrl{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin: 100rpx 0;
}
.userName{
  font-size: 32rpx;
  margin: 100rpx 0;
}
.box{
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border: 1rpx solid #333;
  border-radius: 10rpx;
  font-size: 28rpx;
}

解决方法是，给容器view.indexContainer设置height:100%，给page设置height:100%，修改如下。

/* index.wxss */
.indexContainer{
  display: flex;
  flex-direction: column;
  align-items: center;
  background: skyblue;
  height: 100%;   /*给容器设置100%的height*/
}
.avatarUrl{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin: 100rpx 0;
}
.userName{
  font-size: 32rpx;
  margin: 100rpx 0;
}
.box{
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border: 1rpx solid #333;
  border-radius: 10rpx;
  font-size: 28rpx;
}

/* app.wxss */
page{
  height: 100%; /*给page设置100%的height*/
}