一、多排按钮导航栏样式及核心要点
1、实现效果
要实现下面的导航栏效果 ;
2、总体布局设计
该导航栏可使用 10 个 标签盒子 进行制作 ;
该导航栏的宽度自动充满整个屏幕 , 宽度为..., 宁可少 1 像素 , 也不能多 1 像素 , 如果设置浮动后 , 宽度超过了布局宽度 , 则会自动换行 ;
3、设置浮动及宽度
该布局距离上面的布局有 5 像素的上外边距 ;
如果要令 10 个坐标..., 水平排成两排 , 每排 5 个 , 为其设置左浮动即可实现 , 同事设置其宽度为 20 像素 ;
除了图片外 , 每个链接中还有一行文字 , 设置文字水平对对齐
nav {
/* 整个导航布局距离顶部...5 像素 */
padding-top: 5px;
}
nav a {
/* 设置左浮动 宽度为 20% 正好能放下 5 个 */
float: left;
width...宽度占布局宽度 / 设备宽度 的 8% */
width: 8%;
}
.app ul li:nth-child(1) img {
/* 设置关闭按钮的图像宽度 该图片自动水平 /