标签：top focus height width 移动 banner 100% 图片

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

如：

.search-index {     display: flex;     /* 固定定位跟父级没有关系 它以屏幕为准 */     position: fixed;     top: 0;     left: 50%;     /* 固定的盒子应该有宽度 */     -webkit-transform: translateX(-50%);     transform: translateX(-50%);     width: 100%;     min-width: 320px;     max-width: 540px;     height: 44px;     /* pink; */     background-color: #F6F6F6;     border-top: 1px solid #ccc;     border-bottom: 1px solid #ccc; }

 

 

方法一：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%;
}

标签：top,focus,height,width,移动,banner,100%,图片
来源： https://www.cnblogs.com/clarehjh/p/14771320.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。