一、多排按钮导航栏样式及核心要点
1、实现效果
要实现下面的导航栏效果 ;
2、总体布局设计
该导航栏可使用 10 个 标签盒子 进行制作 ;
该导航栏的宽度自动充满整个屏幕 , 宽度为...100% , 高度也不需要设置 , 设置自适应即可 ;
具体控制每行显示多少个元素 , 需要进行精确的计算 , 每行有 5 个元素 , 每个元素占宽度的 20% , 这个计算必须精准到 1 像素 , 如果不精确...: 10px 0;
}
5、设置文本
在链接中的文本 , 放在 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ;
将其设置为 block 块级元素 , 就可以放置在图片下方 ;...文本 span 样式为 :
nav a span {
/* 导航栏中的文本 设置为 块级元素 */
display: block;
}
二、完整代码实例
----
1、HTML 标签结构.../ 中部 对齐都可以 */
vertical-align: middle;
}
.app ul li:nth-child(3) {
/* 中间的 "打开京东APP, 实惠又轻松" 文本盒子的宽度