一、多排按钮导航栏样式及核心要点
1、实现效果
要实现下面的导航栏效果 ;
2、总体布局设计
该导航栏可使用 10 个 标签盒子 进行制作 ;
该导航栏的宽度自动充满整个屏幕 , 宽度为...个坐标 , 水平排成两排 , 每排 5 个 , 为其设置左浮动即可实现 , 同事设置其宽度为 20 像素 ;
除了图片外 , 每个链接中还有一行文字 , 设置文字水平对对齐
nav {
/* 整个导航布局距离顶部...span> 标签中 , 该标签宽度默认充满父容器 , 高度自适应 ;
将其设置为 block 块级元素 , 就可以放置在图片下方 ;
文本 span 样式为 :
nav a span {
/* 导航栏中的文本...width: 33.33%;
}
.brand div img {
/* 设置图片链接中的图片 在水平方向上充满父容器即可 */
width: 100%;
}
/* 多排按钮导航栏...*/
nav {
/* 整个导航布局距离顶部 5 像素 */
padding-top: 5px;
}
nav a {
/* 设置左浮动 宽度为 20% 正好能放下 5 个