老师你好 ~~头部样式不对，而且浮动了与底部重叠，代码如下，请问如何修改

同学你好，关于你的问题，回答如下：

1、如下，老师课程的代码，写的就是如下这个效果。并没有“搜索框”。

如下：这个有搜索框的是展示的。不是实际开发的代码。开发的代码效果是浏览器中的第二个，效果图如上，没有搜索框。

老师使用同学的代码进行测试，与课程中开发的代码，效果是一致的。

若是要第二个效果图，就是有这个搜索框的这个展示的效果的话，这个不是样式不一样，是还需要引入一个组件，search-box，这个组件在首页开发的时候有写过，可以查看回顾下。header的书写可以参考如下：

2、老师有看到图片中顶部与中间部分有重合，但是测试之前的部分代码是没有这个效果的，所以是希望同学提供下其他的代码。

同学之前描述的是浮动与底部重叠，以为是一个其他的问题，但是测试的效果没有这个问题，所以之前是建议能够描述清楚。

另，顶部与头部指的是同一个区域，都是顶部，所以不存在这两者之间的重叠。

看同学的图片时顶部与中间部分重合，所以下面老师按照这个问题来进行答复，若不是指这个，可以再次详细的描述下进行提问。

（1）如下，使用同学再次提供的代码进行测试，依然是没有重合的。

（2）不过中间部分能够不与顶部重合是因为有设置上内边距，如下在scss文件中，可以参考下图，查看下是否有设置这个上内边距。

祝学习愉快~

<template>

  <div class="category">

    <header class="g-header-container">

      <category-header/>

    </header>

    <div class="g-content-container">

      <div class="sidebar">

        <category-tab @switch-tab="getCurrentId"/>

      </div>

      <div class="main">

        <category-content :curId="curId"/>

      </div>

    </div>

  </div>

</template>

<script>

  import CategoryHeader from './header';

  import CategoryTab from './tab';

  import CategoryContent from './content';

  export default {

    name: 'Category',

    components: {

      CategoryHeader,

      CategoryTab,

      CategoryContent

    },

    data() {

      return {

        curId: ''

      };

    },

    methods: {

      getCurrentId(id) {

        this.curId = id;

      }

    }

  };

</script>

<style lang="scss" scoped>

  @import "~assets/scss/mixins";

  .category {

    overflow:hidden;

    width:100%;

    height:100%;

    background-color: $bgc-theme;

  }

  .g-content-container {

    display: flex;

  }

  .sidebar {

    width: 80px;

    height: 100%;

  }

  .main {

    flex: 1;

    height: 100%;

  }

</style>

<template>

  <!-- <div>

    content

  </div> -->

  <div class="content-wrapper">

    <div class="loading-container" v-if="isLoading">

      <!-- <me-loading/> -->

      <div class="loading-wrapper">

        <me-loading/>

      </div>

    </div>

    <me-scroll

      ref="scroll"

    >

      <div class="content">

        <div class="pic" v-if="content.banner">

          <a :href="content.banner.linkUrl" class="pic-link">

            <img @load="updateScroll" :src="content.banner.picUrl" alt="" class="pic-img">

          </a>

        </div>

        <div

          class="section"

          v-for="(section, index) in content.data"

          :key="index"

        >

          <h4 class="section-title">{{section.name}}</h4>

          <ul class="section-list">

            <li

              class="section-item"

              v-for="(item, i) in section.itemList"

              :key="i"

            >

              <a href="" class="section-link">

                <p class="section-pic" v-if="item.picUrl">

                  <img v-lazy="item.picUrl" alt="" class="section-img" />

                </p>

                <p class="section-name">{{item.name}}</p>

              </a>

            </li>

          </ul>

        </div>

      </div>

    </me-scroll>

  </div>

</template>

<script>

  import MeLoading from 'base/loading';

  import MeScroll from 'base/scroll';

  import MeBacktop from 'base/backtop';

  import {getCategoryContent} from 'api/category';

  import storage from 'assets/js/storage';

  import {CATEGORY_CONTENT_KEY, CATEGORY_CONTENT_UPDATE_TIME_INTERVAL} from './config';

  export default {

    name: 'CategoryContent',

    components: {

      MeLoading,

      MeScroll,

      MeBacktop

    },

    props: {

      curId: {

        type: String,

        default: ''

      }

    },

    data() {

      return {

        content: {},

        isBacktopVisible: false,

        isLoading: false

      };

    },

    watch: {

      curId(id) {

        this.isLoading = true;

        this.getContent(id).then(() => {

          this.isLoading = false;

        });

      }

    },

    methods: {

      getContent(id) {

        let contents = storage.get(CATEGORY_CONTENT_KEY);

        let updateTime;

        const curTime = new Date().getTime();

        if (contents && contents[id]) {

          updateTime = contents[id].updateTime || 0;

          if (curTime - updateTime <= CATEGORY_CONTENT_UPDATE_TIME_INTERVAL) { // localstorage

            return this.getContentByLocalStorage(contents[id]);

          } else { // HTTP

            return this.getContentByHTTP(id).then(() => {

              this.updateLocalStorage(contents, id, curTime);

            });

          }

        } else { // HTTP

          return this.getContentByHTTP(id).then(() => {

            this.updateLocalStorage(contents, id, curTime);

          });

        }

      },

      updateLocalStorage(contents, id, curTime) {

        contents = contents || {};

        contents[id] = {};

        contents[id].data = this.content;

        contents[id].updateTime = curTime;

        storage.set(CATEGORY_CONTENT_KEY, contents);

      },

      getContentByLocalStorage(content) {

        this.content = content.data;

        return Promise.resolve();

      },

      getContentByHTTP(id) {

        return getCategoryContent(id).then(data => {

          return new Promise(resolve => {

            if (data) {

              this.content = data;

              resolve();

            }

          });

        });

      },

      updateScroll() {

        this.$refs.scroll && this.$refs.scroll.update();

      }

    }

  };

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

  .content-wrapper {

    position: relative;

    height: 100%;

  }

  .loading-container {

    position: absolute;

    top: 0;

    left: 0;

    z-index: $category-popup-z-index;

    @include flex-center();

    width: 100%;

    height: 100%;

    /*background-color: $modal-bgc;*/

    .mine-loading {

      color: #fff;

      font-size: 14px;

    }

  }

  .loading-wrapper {

    width: 50%;

    padding: 30px 0;

    background-color: $modal-bgc;

    border-radius: 4px;

  }

  .content {

    padding: 10px;

  }

  .pic {

    margin-bottom: 12px;

    &-link {

      display: block;

    }

    &-img {

      width: 100%;

    }

  }

  .section {

    margin-bottom: 12px;

    &:last-child {

      margin-bottom: 0;

    }

    &-title {

      height: 28px;

      line-height: 28px;

      color: #080808;

      font-weight: bold;

    }

    &-list {

      display: flex;

      flex-wrap: wrap;

      background-color: #fff;

      padding: 10px 10px 0;

    }

    &-item {

      width: (100% / 3);

    }

    &-link {

      display: block;

    }

    &-pic {

      position: relative;

      width: 80%;

      padding-bottom: 80%;

      margin: 0 auto;

    }

    &-img {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

    }

    &-name {

      height: 36px;

      line-height: 36px;

      text-align: center;

      @include ellipsis();

    }

  }

  .g-backtop-container {

    bottom: 10px;

  }

</style>

<template>

  <me-scroll :scrollbar="false">

    <ul class="tab">

      <li

        class="tab-item"

        :class="{'tab-item-active': item.id === curId}"

        v-for="(item, index) in items"

        :key="index"

        @click="switchTab(item.id)"

      >{{item.name}}</li>

    </ul>

  </me-scroll>

</template>

<script>

  import MeScroll from 'base/scroll';

  import {categoryNames} from './config';

  export default {

    name: 'CategoryTab',

    components: {

      MeScroll

    },

    data() {

      return {

        curId: ''

      };

    },

    created() {

      this.init();

      this.switchTab(this.items[0].id);

    },

    methods: {

      init() {

        this.items = categoryNames;

      },

      switchTab(id) {

        if (this.curId === id) {

          return;

        }

        this.curId = id;

        this.$emit('switch-tab', id);

      }

    }

  };

</script>

<style lang="scss" scoped>

@import "~assets/scss/mixins";

  $tab-item-height: 46px;

  .tab {

    width: 100%;

    &-item {

      height: $tab-item-height;

      background-color: #fff;

      border-right: 1px solid $border-color;

      border-bottom: 1px solid $border-color;

      color: #080808;

      font-size: $font-size-l;

      font-weight: bold;

      text-align: center;

      line-height: $tab-item-height;

      @include ellipsis();

      &:last-child {

        border-bottom: none;

      }

    }

    &-item-active {

      background: none;

      border-right: none;

      color: #f23030;

    }

  }

</style>