Vue实战第3章：主页设计之顶部导航栏

最新推荐文章于 2024-08-03 23:22:49 发布

因吹斯听的Sun同学

最新推荐文章于 2024-08-03 23:22:49 发布

阅读量9.5k

点赞数 6

分类专栏： Vue 前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Mr_Sun88/article/details/128841703

版权

Vue 同时被 2 个专栏收录

10 篇文章 5 订阅

订阅专栏

前端

9 篇文章 0 订阅

订阅专栏

主页设计之顶部导航栏

前言

本篇在讲什么

本篇文章主要来制作一个导航栏，具体效果就按照下图来处理吧

本篇适合什么

适合初学Vue的小白
想了解建站的同学

本篇需要什么

对Html语法有简单认知
对CSS语法有简单认知
对Vue有简单认知
依赖VS Code编辑器

本篇的特色

具有全流程的图文教学
重实践，轻理论，快速上手
提供全流程的源码内容

★提高阅读体验★

👉 ♠ 一级标题 👈

👉 ♥ 二级标题 👈

👉 ♣ 三级标题 👈

👉 ♦ 四级标题 👈

♠ 样式

在这里插入图片描述

♠ 新建组件

在第一章Vue-router的基础上，我们首先在components内新建一个名为NavBar的vue脚本，我们将在这个脚本内编写和顶部导航栏相关的内容

在这里插入图片描述

很简单的一个脚本，我们在App.vue内引用新脚本页面，然后直接显示在页面的最顶端

♠ 设计显示

首先我们要明确我们自己的需求，然后再去逐步的实现我们的需求

有一个带颜色的长条框框置顶
左上角有一个Logo标志
右上角存放各个跳转按钮
跳转按钮左侧带一个小图标样式

♥ 导航栏背景

我们先做一个上居中的长条框框，设置好背景颜色，和框线粗细

<template>
    <div>
        <div class="header">
            <!-- todo -->
        </div>
    </div>
</template>

<script>
    export default {
        name: "NavBar"
    }
</script>

<style>
    .header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        background-color:#F0F0F0;
        color: #F0F0F0;
        border: 1px solid #2c2c2c;
    }
</style>

在这里插入图片描述

如上述代码所示，我们做了一个名为header的的div组件，在style内给其设置了css的样式，高度、填充颜色、变现粗细等，最终得到了上图所示的效果

在这里插入图片描述

注意：默认下组件是没有贴顶部的，这里把App.vue下的margin-top属性删除或设置为0就好了

♥ 设置Logo的显示

我们在导航栏的左侧做一个Logo和title的显示

<template>
    <div>
        <div class="header">
            <div class="box">
                <h1>
                    <img src="../assets/logo.png">
                    <span>Sun</span>
                </h1>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "NavBar"
    }
</script>

<style>
    .header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        background-color:#F0F0F0;
        color: #F0F0F0;
        border: 1px solid #2c2c2c;
    }
    .box{
        display: flex;
        align-items: center;
    }
    h1{
        display: flex;
        align-items: center;
        font: normal 30px Cookie;
        padding: 0px 20px;
        color:#2c2c2c;
        font-family:"Microsoft YaHei";
    }
</style>

在这里插入图片描述

如上述代码所示，我们新建了一个box的div模块，里面包含了一个h1组件，并且h1组件内包含了一张图片和一个title，在下方style设计好css的显示样式,即得到了上述图片演示的样子

♥ 制作右侧导航按钮

需求比较简单，我们不需要搜索框和其他组件，简单的图片+文字的导航按钮即可，整理下需求和资源

需求
- 个人介绍
- 工作经历
- 作品介绍
- 能力介绍
资源（小logo）

在这里插入图片描述

<template>
    <div>
        <div class="header">
            <div class="box">
                <h1>
                    <img src="../assets/logo.png" class="img_title">
                    <span>Sun</span>
                </h1>
            </div>
            <div class="box">
                <nav class="nav_link">
                    <img src="../assets/home.png" class="img_btn">
                    <router-link class="link_btn" active-class="active" to="/home">首页</router-link>
                </nav>
                <nav class="nav_link">
                    <img src="../assets/data.png" class="img_btn">
                    <router-link class="link_btn" active-class="active" to="/data">个人介绍</router-link>
                </nav>
                <nav class="nav_link">
                    <img src="../assets/work.png" class="img_btn">
                    <router-link class="link_btn" active-class="active" to="/work">作品介绍</router-link>
                </nav>
                <nav class="nav_link">
                    <img src="../assets/power.png" class="img_btn">
                    <router-link class="link_btn" active-class="active" to="/power">能力介绍</router-link>
                </nav>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "NavBar"
    }
</script>

<style>
    .header{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        background-color:#ffffff;
        color: #ffffff;
        border: 1px solid #2c2c2c;
    }
    .box{
        display: flex;
        align-items: center;
    }
    h1{
        display: flex;
        align-items: center;
        font: normal 30px Cookie;
        padding: 0px 20px;
        color:#2c2c2c;
        font-family:"Microsoft YaHei";
    }
    .img_title{
        width: 40px;
        height: 40px;
    }

    .nav_link{
        display: flex;
        align-items: center;
        padding: 0 30px;
    }
    .link_btn{
        text-decoration:none;
        color: #7F7F7F;
        font-size: 25px;
        font-weight: normal;
    }
    .img_btn{
        width: 30px;
        height: 30px;
    }
</style>