一、多排按钮导航栏样式及核心要点
1、实现效果
要实现下面的导航栏效果 ;
2、总体布局设计
该导航栏可使用 10 个 标签盒子 进行制作 ;
该导航栏的宽度自动充满整个屏幕 , 宽度为..., 宁可少 1 像素 , 也不能多 1 像素 , 如果设置浮动后 , 宽度超过了布局宽度 , 则会自动换行 ;
3、设置浮动及宽度
该布局距离上面的布局有 5 像素的上外边距 ;
如果要令 10 个坐标..., 水平排成两排 , 每排 5 个 , 为其设置左浮动即可实现 , 同事设置其宽度为 20 像素 ;
除了图片外 , 每个链接中还有一行文字 , 设置文字水平对对齐
nav {
/* 整个导航布局距离顶部...该布局最大 640 像素 */
max-width: 640px;
}
.search-btn {
/* 左侧按钮布局 */
/* 左侧按钮需要设置到左侧 使用绝对定位进行设置.../* 设置图片链接中的图片 在水平方向上充满父容器即可 */
width: 100%;
}
/* 多排按钮导航栏 */
nav {
/* 整个导航布局距离顶部 5 像素 */