banner区域图片背景注意点(移动端)

前提导航栏已经采用固定定位布局

如:

banner区域图片背景注意点(移动端)

 

 

方法一:banner(focus)背景图父盒子应该加上一个padding-top值

.focus {
    padding-top: 44px;
}

.focus img {
    width: 100%;
}

html代码如下:

<!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>

方法二:banner(focus)背景图父盒子设置宽和高

html代码如下:

 <div class="banner">
        <img src="upload/banner.gif" alt="">
    </div>

css如下:

.banner {
  width: 15rem;
  height: 7.36rem;
}
.banner img {
  width: 100%;
  height: 100%;
}

banner区域图片背景注意点(移动端)

上一篇:【iOS知识汇】view 点击位置获取


下一篇:安卓开发alpha的用法