header { color: rgb(255, 255, 0); background-color: gold; width: 100%; height: 70px; position: fixed; top: 0; left: 0; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); font-family: 'Consolas'; display: flex; align-items: center; z-index: 1000; /* 确保导航栏在最上层 */ overflow: hidden; padding: 0 1rem; box-sizing: border-box; } .header-container { display: flex; align-items: center; width: 100%; height: 100%; } .logo { display: flex; align-items: center; height: 100%; white-space: nowrap; flex-shrink: 0; /* 防止Logo缩小 */ } .logo a { display: flex; align-items: center; height: 100%; } .logo2 { width: 50px; height: 50px; object-fit: contain; } .remove-decoration { text-decoration: none; } .logo-text { font-size: 1.5rem; color: rgb(0, 0, 0); padding-left: 10px; font-weight: bold; } .nav-container { flex-grow: 1; overflow-x: auto; overflow-y: hidden; margin-left: 20px; height: 100%; display: flex; align-items: center; /* 隐藏滚动条但保持功能 */ -ms-overflow-style: none; scrollbar-width: none; /* 添加左右阴影效果,提示可以滑动 */ position: relative; } /* 隐藏WebKit浏览器的滚动条 */ .nav-container::-webkit-scrollbar { display: none; } .bararrlist { font-size: 1.25rem; display: flex; align-items: center; padding: 0; margin: 0; height: 100%; min-width: max-content; } .bararrlist li { display: flex; align-items: center; height: 100%; margin: 0; padding: 0; } .bararrlistelements { color: rgb(0, 0, 0); margin: 0 15px; padding: 0 10px; height: 100%; display: flex; align-items: center; transition: background-color 0.2s ease; } .bararrlistelements:hover { background-color: rgba(255, 255, 255, 0.2); border-radius: 5px; } /* 响应式调整 */ @media (max-width: 768px) { header { height: 60px; } .logo2 { width: 40px; height: 40px; } .logo-text { font-size: 1.2rem; } .bararrlist { font-size: 1rem; } .bararrlistelements { margin: 0 10px; padding: 0 8px; } } @media (max-width: 480px) { .nav-container { margin-left: 10px; } .logo-text { font-size: 1rem; } .bararrlistelements { margin: 0 8px; padding: 0 6px; } } .header-offset { margin-top: 70px; }