一、横向导航栏实现核心要点
需求 : 实现如下布局 ;
上一篇博客中 , 已经实现了顶部的搜索栏 , 本篇博客开始实现后续部分 ;
1、固定定位下面的布局设置
在上一篇博客中实现的搜索栏 , 使用...固定定位 设置该搜索栏位置 , 不管网页如何滚动 , 最上方始终显示该搜索栏 ;
搜索栏下方的 Banner 轮播图 , 如果以 标准流 显示 , 会被 搜索栏 覆盖 , 此处为 Banner 轮播图设置一个上外边距..., 避免显示在搜索栏下方 ;
.banner {
/* 上面的搜索栏是固定定位的 如果使用默认设置 该 Banner 栏会被搜索栏盖住
因此这里设置一个 44 像素的上外边距 *...;
在该横向导航栏中 设置了 5 个元素 , 这里可以使用百分比布局实现 , 也可以使用 Flex 弹性布局实现 ;
将父容器设置为 Flex 弹性布局 , 同时为子项目设置 flex: 1; 样式...{
/* 5 个 li , 每个占据宽度的 1/5 */
flex: 1;
}
3、弹性布局主轴和侧轴设置
在下面的布局中 , 上下显示两个元素 , 并且这两个元素水平居中 ;
使用