帮我用vue写一个顶部导航栏的页面代码
时间: 2023-08-28 13:19:43 浏览: 163
手机移动端固定在顶部的导航栏代码
5星 · 资源好评率100%
好的,下面是一个简单的 Vue 顶部导航栏页面的代码示例:
```html
<template>
<div class="nav-bar">
<div class="logo">My Logo</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</template>
<style>
.nav-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f8f8f8;
padding: 10px;
}
.logo {
font-size: 24px;
}
.nav-links {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links li {
margin: 0 10px;
}
.nav-links li a {
color: #333;
text-decoration: none;
font-size: 16px;
}
</style>
```
这个示例包含一个顶部导航栏的 HTML 结构和 CSS 样式,并且使用了 Vue 的模板语法。您可以在 Vue 项目中将此组件导入并在其他页面中使用。
阅读全文