移动端|常见布局之京东首页开发 (品牌日区域)

237 阅读1分钟

效果图

image

做法

  1. 一个大盒子,里面分三个小盒子
  2. 插三张图片标签,要加浮动
  3. 每个盒子width 百分之33
  4. 图片百分百
       <!-- xxx活动日 -->
        <div class="brand">
            <div>
                <a href="#">
                    <img src="upload/1.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/2.dpg" alt="">
                </a>
            </div>
            <div>
                <a href="#">
                    <img src="upload/3.dpg" alt="">
                </a>
            </div>
        </div>

css

/* 品牌日 */

.brand {
    overflow: hidden;
    background-color: #fff;
    border-radius: 10px 10px 0 0  ;
}
.brand div {
    float: left;
    width: 33.33%;
}

.brand div img {
    width: 100%;
}