简述
一个页面，我们先做整理布局，将页面分成几个大块。假如这样：
整体分割
我们把页面分成三个部分，
- 上面是幻灯片，
- 中间是一些分类导航功能，
- 下面是新闻列表或商品详情等
整个页面布局
page{
display: flex;
flex-direction: column;
height: 100%;
}
先控制整个页面布局
- page：表示整个页面
- display: flex; 表示整个页面采用flex方式
- flex-direction: column; 方向当然是竖着了
单独设置每一个
.swiper{
flex: 3;
background: #f3f6fe;
}
.sort{
flex: 1;
background: #f3d3e4;
}
.newsList{
flex:4;
background-color: #d3a433;
}
- flex:3 表示所占比例，这个回根据手机动态调整，占屏幕的 3/3+1+4，即八分之三
- 设置背景颜色以区分
总结
综上，就可以把整个页面分割出来了，再去填充每一部分就好了。
网友评论