VUE写一个顶部导航栏

最近一个实验要做一个中超足球联赛的数据库设计，我打算采用springboot+vue来完成，现在是从零开始学习vue的过程，先试着写一个顶部导航栏。效果如下：

新建一个navbar的组件

首先在APP.VUE中写好header的样式

<template><div id="app"><header><Navbar /></header></div>
</template><script>
import Navbar from '@/views/Navbar'
export default {name: 'app',components: {Navbar}
}
</script><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: 'Avenir', Helvetica, Arial, sans-serif;}header {background: dimgrey;width: auto;height: 80px;}
</style>

然后在navbar中写好导航栏样式

<template><nav><div class="logo"><img src="../assets/logo.png"></div><div class="el-menu-item" href="#">首页</div><div class="el-menu-item" href="#">积分榜</div><div class="el-menu-item" href="#">射手榜</div><div class="el-menu-item" href="#">赛程</div><div class="el-menu-item" href="#">球队</div></nav>
</template>
<script>
export default {name: "Navbar"
}
</script><style lang="css">
nav {display: flex;align-items: center;justify-content: center;
}
nav .el-menu-item {color: #FFFFFF;padding: 15px 100px;position: relative;text-align: center;border-bottom: transparent;display: flex;transition: 0.4s;font-size: larger;font-weight: bold;
}
nav .el-menu-item:hover {background-color: darkgray;border-bottom: solid 6px;border-bottom-color: brown;height: 80px;
}
</style>

运行结果就是开头的样子

VUE写一个顶部导航栏相关推荐

Vue自定义网页顶部导航栏
Vue自定义web网页顶部导航栏说明:此组件是为论坛类项目定制的一个实用的顶部导航栏,当然也可以用于其他的Web项目,只需要稍作修改便可以达到想要的效果.其中导航栏包含了搜索栏,用户头像,以及基本的 ...
vue2+element-ui创建顶部导航栏及下拉菜单
vue2+element-ui创建顶部导航栏及下拉菜单引入顶部导航栏使用下拉菜单获取Vuex store数据配置Vuex store 定义logout方法引入顶部导航栏创建client/s ...
仿写小米网站首页顶部导航栏部分
说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...
vue实现仿DJI大疆官网顶部导航栏组件
页面进入时,导航栏背景色为透明: 鼠标移入时,导航栏背景变白,鼠标停留的标签字体颜色变换,出现底边框,若有二级下拉菜单,则平滑向下弹出菜单: gitee仓库地址:https://gitee.com/Y ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
uniapp添加顶部导航栏并且更换图标
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优 ...
react native 之自定义顶部导航栏，实现标题居中可控
本来一直用的都是RN自带的组件react-navigation,但是后面需求有变,需要顶部导航栏目的标题可以自己控制,同一页面的标题根据数据库查出来的内容变化.因此自定义了一个导航栏目,实现需求. 关 ...
android开发(49) android 使用 CollapsingToolbarLayout ，可折叠的顶部导航栏
概述在很app上都见过可折叠的顶部导航栏效果.google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下: 实现步骤 1. 写 ...
uni-app开发：tabar组件与顶部导航栏（功能开发篇）
uni-app开发:tabar组件与顶部导航栏(含右侧icon点击功能)[结合:案例Demo截图] 一.效果图 · 截图: 二. tabar组件 + 顶部导航栏(含右侧icon点击功能) 组件的代码调 ...

VUE写一个顶部导航栏

VUE写一个顶部导航栏相关推荐

最新文章

热门文章