一、多排按钮导航栏样式及核心要点
1、实现效果
要实现下面的导航栏效果 ;
2、总体布局设计
该导航栏可使用 10 个 标签盒子 进行制作 ;
该导航栏的宽度自动充满整个屏幕 , 宽度为...100% , 高度也不需要设置 , 设置自适应即可 ;
具体控制每行显示多少个元素 , 需要进行精确的计算 , 每行有 5 个元素 , 每个元素占宽度的 20% , 这个计算必须精准到 1 像素 , 如果不精确...在链接中的文本 , 放在 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ;
将其设置为 block 块级元素 , 就可以放置在图片下方 ;
文本 span 样式为 :
nav...44px;
}
.search-btn::before {
/* 在 指定的标签元素内部的 前面 插入内容 */
/* 左侧按钮盒子中 插入 三 图片 */
content:.../* 要在水平方向上放置 3 个 为其设置 1/3 的宽度即可 */
width: 33.33%;
}
.brand div img {
/* 设置图片链接中的图片 在水平方向上充满父容器即可