uniapp 小程序页面布局:首页样式
这种布局比较常见!其实就是一个banner 加上一个content,外面加一个container。container:让其宽高100%,显示模式为flex.container{width: 100%;height:100%;display: flex;flex-direction: column;background-color: #FF557F;}bananer:让其宽度100%...
这种布局比较常见!其实就是一个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>
}
更多推荐
所有评论(0)