微信小程序--窗口背景颜色铺满页面

编写一个页面 welcome.wxml文件:


  
  
  hello,world
  
    开启小程序之旅
  

welcome.wxss文件:

/*静态样式,建议写在wxss文件中,动态样式可以写在wxml中用style*/

.container{
    display: flex;
    flex-direction:column;
    align-items: center;
    background-color:#b3d4db;
}
.user-avatar{
  height:200rpx;
  width:200rpx;
  margin:30rpx;
}

.user-name{
  margin-top: 200rpx;
  font-size: 42rpx;
  font-weight: bold;
}

.moto{
  font-size: 32rpx;
  font-weight: bold;
  line-height: 80rpx;
  color:#405f80;
}

.moto-container{
  margin-top: 200rpx;
  border: 1rpx solid #405f80;
  width:250rpx;
  height:80rpx;
  border-radius: 5px;
  text-align: center;
}

welcome.json:

{
  "navigationBarBackgroundColor": "#b3d4db"
}

显式的效果如下

微信小程序--窗口背景颜色铺满页面_第1张图片

设置了background-color,但是效果不是我想要的那样

微信小程序--窗口背景颜色铺满页面_第2张图片

此处background-color设置的只是标签里边container的背景,通过调试工具可以看到,其实wxml页面还有一个隐藏的page标签,所以在wxss中加上以下代码:

page{
  height:100%;
  background-color: #b3d4db; 
}

效果如图:

微信小程序--窗口背景颜色铺满页面_第3张图片

你可能感兴趣的:(微信小程序,前端)