vue框架header固定导航header

vue单文件

<template> <div> <header> <nav> <router-link to="/" class="logo">Vue博客</router-link> <ul class="nav-links"> <li><router-link to="/">首页</router-link></li> <li><router-link to="/questions">问题</router-link></li> <li><a href="#">关于</a></li> </ul> </nav> </header> </div> </template> <script> export default { name: 'Home', data() { return {} } } </script>

style.css文件

:root { --primary-color: #3498db; --secondary-color: #2ecc71; --background-color: #f5f5f5; --text-color: #333; --border-color: #e0e0e0; --card-background: #fff; --header-height: 60px; --footer-height: 80px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--background-color); } #app { min-height: 100vh; display: flex; flex-direction: column; } header { background-color: var(--card-background); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: sticky; top: 0; z-index: 100; } nav { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: var(--header-height); display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); text-decoration: none; } .nav-links { display: flex; list-style: none; gap: 20px; } .nav-links a { text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.3s ease; } .nav-links a:hover { color: var(--primary-color); }