引子
在常见的网站中,我们经常会看到一个页面的顶部(头部)以及底部都是一样的。那么,我们也就没有必要为每个页面去书写这样的代码了。
开始书写
先将页面中无用的东西删除。 默认的页面布局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>