Vue实现顶部导航栏设计

效果图：

完整代码：

<template><div class="title"><div class="title-left"><div class="title-left-image"></div><router-link to="/unusedOrder"><span class="">导航一</span></router-link><router-link to="/usedOrder"><span class="">导航二</span></router-link><router-link to="/usedOrder"><span class="">导航三</span></router-link><router-link to="/advices"><span class="">导航四</span></router-link><router-link to="/evaluate"><span class="">导航五</span></router-link></div><div></div><div class="serch"><div contenteditable class="inputType" placeholder='请输入文字'></div><div class="button">搜索</div></div><div class="title-right"><div class="title-right-image"></div><router-link to="/unusedOrder"><span class="">导航六</span></router-link><router-link to="/usedOrder"><span class="">导航七</span></router-link><router-link to="/advices"><span class="">导航八</span></router-link></div></div>
</template>
<script>
export default {name:'Title',
}
</script>
<style>
.title{margin-left: 0px;height: 48px;width: 100%;background-color:#fff;border-bottom: 1px solid #DCDCDC;display: flex;justify-content:space-between;
}
.title-left{width: 580px;height: 48px;margin-left: 0;background:#fff;display: flex;}
.title-left-image{height: 48px;width:120px
}
span{font-size: 16px
}a{width: 70px;height: 48px;color: black;margin: 0px 10px;text-decoration: none;line-height: 48px;text-align: center
}a:hover{background-color:  #BEBEBE;
}
.serch{height: 32px;width: 500px;background-color:#fff;margin: auto;display: flex;
}
.inputType{width:400px;height: 30px;text-indent: 1em;line-height: 34px;background-color: #fff;border: 1px solid black;border-top-left-radius: 17px;border-bottom-left-radius: 17px;font-size: 12px;
}
.inputType:focus{outline: none;   border: 1px solid rgb(230, 32, 213);
}
.button{color: #fff;text-align: center;background: rgba(204, 51, 0, 1);border-left:1px solid rgba(0, 0, 0, 0.45);width:100px;height: 32px;line-height: 34px;border-top-right-radius: 18px;border-bottom-right-radius: 18px
}
.title-right{width: 380px;height: 48px;display: flex;
}
.title-right-image{width: 40px;height: 40px;border: 1px solid black;border-radius: 20px;margin: auto ;margin-left: 40px;
}
</style>

Vue实现顶部导航栏设计相关推荐

页面最上方的搜索和logo叫什么_网页顶部导航栏设计总结
网页中顶部导航栏往往是用户进入网站后最先看到的地方,决定着用户对网页的第一印象,其重要性不言而喻. 网页中的header,一般我们称之为顶部导航栏,这里为了行文方便,以下都简称顶部栏.顶部栏对于一个网 ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...
VUE写一个顶部导航栏
最近一个实验要做一个中超足球联赛的数据库设计,我打算采用springboot+vue来完成,现在是从零开始学习vue的过程,先试着写一个顶部导航栏.效果如下: 新建一个navbar的组件首先在APP ...
vue实现仿DJI大疆官网顶部导航栏组件
页面进入时,导航栏背景色为透明: 鼠标移入时,导航栏背景变白,鼠标停留的标签字体颜色变换,出现底边框,若有二级下拉菜单,则平滑向下弹出菜单: gitee仓库地址:https://gitee.com/Y ...
Axure中如何快速设计左边导航栏，侧导航栏和顶部导航栏等？
Axure中如何快速设计侧导航栏和顶部导航栏? 1.下载侧导航栏和顶部导航栏组件参考<蚂蚁金服 ant design 中下载axure 菜单组件库> 2.导入组件下载保存为AntDes ...
Vue自定义网页顶部导航栏
Vue自定义web网页顶部导航栏说明:此组件是为论坛类项目定制的一个实用的顶部导航栏,当然也可以用于其他的Web项目,只需要稍作修改便可以达到想要的效果.其中导航栏包含了搜索栏,用户头像,以及基本的 ...
uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp添加顶部导航栏并且更换图标
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优 ...
【Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )
文章目录一.Scaffold 组件二.实现顶部导航栏三.DefaultTabController 导航标签控制组件四.TabBar 导航按钮组件五.Tab 标签组件六.TabBarView ...

Vue实现顶部导航栏设计

Vue实现顶部导航栏设计相关推荐

最新文章

热门文章