uniapp 小程序页面布局：首页样式

这种布局比较常见！其实就是一个banner 加上一个content ,外面加一个container。

container：

         让其宽高100%，显示模式为flex

.container{    
    width: 100%;
    height:100%;
    display: flex;
    flex-direction: column;
    background-color: #FF557F;
    }

在contain设置背景色为banner的颜色,这样的下面的条框上移时即显示叠加效果!

bananer：

        让其宽度100%,高度200rpx(视情况而定)

.banner1{
    width: 100%;
    height: 330rpx;
}

content:

        让其宽度100%,高度余下占完,即 flex:1.显示模式为flex(关键),align-items: center;

.content{
    width: 100%;
    flex:1;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    align-items: center;
     
    }

绿线框:

        是在content中包裹着的. 设置个宽度90%,因父元素设置了居中,则自动居中,高度可不用设置,会根据内部元素自动撑起.

第一个框:margin-top:-50rpx 这个是向上位移了的.

    <view class="d-flex just-content-center border-base "
                  style="height:220rpx;width:90%;border-radius: 25rpx;margin-top:-50rpx">
            </view>
     
    }

下面的框是

 <view class="d-flex just-content-center border-base "
                  style="height:220rpx;width:90%;border-radius: 25rpx;margin-top:20rpx">
            </view>
     
    }