一、连续排列的链接图片样式及核心要点
1、实现效果
实现如下效果 , 在下面的布局中 , 水平放置 3 个图片链接 ;
每个图片链接 占 宽度的 1/3 ;
2、标签结构设置
将布局中的 三个 链接图片..., 放置在 单独的 标签中 , 每个 标签中放置一个 链接标签 , 在 链接标签中包裹一个 图片 ;
<!..., 三个链接图片水平排列在一起 , 并且中间没有缝隙 , 说明这是使用 浮动 进行设置的 , 为父容器的三个子元素都设置 左浮动 , 就可以实现上述效果 ;
设置浮动后 , 还需要设置子元素的宽度 ,...{
/* 设置 .brand 父容器下的 div 盒子左浮动
这样这些盒子可以在水平方向上紧密排列 */
float: left;
/* 要在水平方向上放置 3...;
height: 44px;
}
.search-btn::before {
/* 在 指定的标签元素内部的 前面 插入内容 */
/* 左侧按钮盒子中 插入 三 图片 */