/* 页眉导航栏 */ .navbar { background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue)); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 0.8rem 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; } .navbar .logo h1 { color: rgb(245, 245, 245); font-size: 18px; font-weight: bold; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } .navbar-links { display: flex; justify-content: center; flex: 1; margin: 0 20px; } .navbar-links a { color: rgb(235, 235, 235); text-decoration: none; margin: 0 15px; font-size: 18px; transition: color 0.3s; } .navbar-links a:hover { color: #f1c40f; } .navbar .avatar img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid white; } /* 下拉浮框 基础定位 */ .dropdown { position: relative; display: inline-block; } /* 下拉浮框 内容样式(默认隐藏) */ .dropdown-content { display: none; position: absolute; right: 0; background-color: white; min-width: 160px; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); border-radius: 6px; z-index: 1; padding: 8px 0; font-size: 14px; } /* 下拉浮框 链接样式 */ .dropdown-content a { color: #4b5563; text-decoration: none; padding: 8px 12px; display: block; transition: background-color 0.3s; } .dropdown-content a:hover { background-color: #f3f4f6; } /* 下拉浮框 hover 显示 */ .dropdown:hover .dropdown-content { display: block; } /* 响应式设计 */ @media (max-width: 768px) { .navbar { flex-direction: column; gap: 1rem; } .navbar-links { margin: 0; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .navbar-links a { margin: 0 0.75rem; font-size: 16px; } .navbar .logo h1 { font-size: 16px; max-width: 250px; } } @media (max-width: 480px) { .navbar .logo h1 { font-size: 14px; max-width: 200px; } .navbar-links a { margin: 0 0.5rem; font-size: 14px; } }