前言：
头部主要重要是组件抽离,有一些主页和其他页面头部都是一样的,所以我们需要把他抽出来,作为组件就行服用,也可以方便管理修改本文里面还会要到scss抽离.

创建scss文件：

配置：

/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;

/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色

/* 边框颜色 */
$uni-border-color:#c8c7cc;

/* 尺寸变量 */

/* 文字尺寸 */
$uni-font-size-sm:24upx;
$uni-font-size-base:28upx;
$uni-font-size-lg:32upx;

/* 图片尺寸 */
$uni-img-size-sm:40upx;
$uni-img-size-base:52upx;
$uni-img-size-lg:80upx;

/* Border Radius */
$uni-border-radius-sm: 4upx;
$uni-border-radius-base: 6upx;
$uni-border-radius-lg: 12upx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10px;
$uni-spacing-row-base: 20upx;
$uni-spacing-row-lg: 30upx;

/* 垂直间距 */
$uni-spacing-col-sm: 8upx;
$uni-spacing-col-base: 16upx;
$uni-spacing-col-lg: 24upx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:40upx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:36upx;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:30upx;

接下来创建规划nav-header组件：
<template>

<div class="header">
    <!-- 顶部 -->
    <div class="nav-topbar">
        <!-- 布局div -->
        <div class="container">
            <!-- 菜单 -->
            <div class="topbar-menu">
                <!-- a标签javascrips:;代表不刷新 -->
                <a href="javascrips:;">小米商城</a>
                <a href="javascrips:;">MUI</a>
                <a href="javascrips:;">云服务</a>
                <a href="javascrips:;">用户手册</a>
            </div>
            <!-- 用户登陆 -->
            <div class="topbar-user"></div>
        </div>
    </div>

    <div class="nav-head"></div>

</div>

</template>

示例：

开始编写style样式这里引用scss(scss的好处是我们的style可以嵌套,而原生的css不可以):

<style lang="scss"> //声明lang为scss
    .header{
        .nav-topbar{
            height: 39px;  //高度跟行高是一样的
            line-height: 39px;
            background-color: #333333;
            color: #b0b0b0;
        }
        
        .container{
            width: 1226px;  //宽度
            margin-right: auto;  //盒子模型的左右留白
            margin-left: auto;
        }
    }
</style>

这里有个需要注意的点：会报错是scss转换不了css,是因为安装的node-sass和sass-loader转换版本不一样导致转换不了语法不兼容,这里建议采用都是@5.0.0

示例：

引入scss文件：
app.vue

<style>
@import './assets/scss/reset.scss'  //用@import语法导入
</style>

reset.scss源代码：

body,div,p,h1,h2,h3,h4,h5,h6,ul,li,dl,dt,a,input,button,textarea,select{
    margin: 0;
    padding: 0;
    outline: none;
  }
  html,body{
    font-family:Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color: #333333;
    background-color: #ffffff;
    min-width: 1226px;
    font-size: 12px;
  }
  a{
    text-decoration: none;
  }
  ul,li{
    list-style: none;
  }
  input{
    font: normal;
  }
  input:focus,a:focus{
    outline: none;
  }

全部导航栏css样式：

<style lang="scss">
    .header{
        //导航条
        .nav-topbar{
            height: 39px;  //高度跟行高是一样的
            line-height: 39px;
            background-color: #333333;
            color: #b0b0b0;
        }
        
        //布局容器
        .container{
            width: 1226px;  //宽度
            margin-right: auto;  //盒子模型的左右留白
            margin-left: auto;
            display: flex; //flex布局
            justify-content: space-between; //水平方向剧中
            align-items: center; //垂直方向剧中
        
        //a标签
        a{
            display: inline-block;
            color: #b0b0b0;
            margin-right: 17px;
        }
        //购物车
        .my-cart{
            width: 110px;  //宽度
            background-color: #FF6600;  //背景色
            text-align: center;  //剧中
            color: #ffffff;
            //购物车图标
            .icon-cart{
                display: inline-block; //span是内联标签如设置宽高要转换成块
                width: 16px;
                height: 12px;
                background: url('/src/imgs/cart.png') no-repeat center; //引入图标 剧中 
                background-size: contain;
        
            }
        }
    }
}
</style>

示例：

RN%T2{5DMWW5B$1OLIM2SOB.png

总结：
css样式布局,需要一定的审美,并且需要一定的基础,熟话说得好前端好看很有用啊,这个布局对css和审美要有很多的想法,包括我们抽离的scss组件,也是很重要的,比如后的抽离公用css样式做成函数,之后调用等.