From d0331d93619e31c019817566065f509d004780e1 Mon Sep 17 00:00:00 2001 From: CakeCN Date: Sat, 13 Dec 2025 21:47:10 +0800 Subject: [PATCH] navbar adjust --- Html/apps/static/css/navbar.css | 56 +++++++++++++++++++++++++++++++-- Html/apps/templates/navbar.html | 3 +- 2 files changed, 55 insertions(+), 4 deletions(-) diff --git a/Html/apps/static/css/navbar.css b/Html/apps/static/css/navbar.css index 69c8e96..0093ceb 100644 --- a/Html/apps/static/css/navbar.css +++ b/Html/apps/static/css/navbar.css @@ -3,13 +3,28 @@ 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: 24px; + 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 { @@ -69,4 +84,41 @@ /* 下拉浮框 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; + } } \ No newline at end of file diff --git a/Html/apps/templates/navbar.html b/Html/apps/templates/navbar.html index 5614166..14b7730 100644 --- a/Html/apps/templates/navbar.html +++ b/Html/apps/templates/navbar.html @@ -1,7 +1,6 @@ - - +