【学习笔记】【领券联盟】前端(Nuxt.js)——3.编写公共头部

引子

在常见的网站中，我们经常会看到一个页面的顶部（头部）以及底部都是一样的。那么，我们也就没有必要为每个页面去书写这样的代码了。

开始书写

先将页面中无用的东西删除。 默认的页面布局vue文件在layouts的default.vue中。将header分为三个部分：

• logo
• 目录
• 搜索栏

即有如下代码：

<!--  顶部 -->
    <div id="header">
      <div class="center-box">
        <div class="header-logo">
          <span>科皮子菊-券场</span>
        </div>
        <div class="header-menu"></div>
        <div class="header-search-box"></div>
      </div>
    </div>

为了使内容能够居中，书写相关的css样式，如下：

.center-box{
  width: 1124px;
  margin: 0 auto;
}

设置logo的样式：

  .header-logo{
    font-size: 24px;
    font-weight: 600;
    color: #c9302c;
  }

等等，后面就需要慢慢调了。调好的结果如图：

整个代码页面（layouts/default.vue）代码如下：

<template>
  <div>
<!--  顶部 -->
    <div id="header">
      <div  class="center-box clear-fix">
        <div class="header-logo float-left">
          <span>科皮子菊-券场</span>
        </div>
        <div class="header-menu float-left">
          <ul class="float-left">
            <li class="menu-active">券场</li>
            <li>发现</li>
            <li>特惠</li>
          </ul>
        </div>
        <div class="header-search-box float-left">
          <el-input placeholder="复制（淘宝的标题或者关键字）找优惠券" size="small"></el-input>
        </div>
        <div class="header-search-btn float-left">
          <el-button type="danger" size="small" icon="el-icon-search">搜索</el-button>
        </div>
      </div>
    </div>
    <Nuxt />
  </div>
</template>

<style>
  .menu-active{
    background: #0000000a;
  }
  #header{
    height: 70px;
    background: #fff;
    box-shadow: 0px 5px 10px #d4d4d4;
  }
  .header-search-box, .header-search-btn{
    line-height: 70px;
  }
  .header-search-btn .el-button{
    width: 100px;
  }
  .header-search-btn{
    margin-left: 20px;
  }
  .header-search-box .el-input{
    width: 300px;
  }
  .header-search-box{
    margin-left: 20px;
  }
  .header-menu ul{
    list-style: none;
  }
  .header-menu li:hover{
    background: #0000000a;
  }
  .header-menu li{
    cursor: pointer;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    line-height: 70px;
    color: #000;
    font-size: 16px;
    font-weight: 600;
  }
  .float-left{
    float: left;
  }
  .clear-fix{
    zoom: 1;
    overflow: auto;
  }
  .header-logo{
    font-size: 24px;
    font-weight: 600;
    color: #c9302c;
    line-height: 70px;
  }
html {
  font-family:
    'Source Sans Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 16px;
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
*,  *:before,  *:after {
  box-sizing: border-box;
  margin: 0;
}
.center-box {
  width: 1140px;
  margin: 0 auto;
}
</style>