导航栏适配了移动设备

static/styles.css

@@ -10,6 +10,59 @@ body {
     align-items: center;
     /* 确保 body 至少占据整个视口的高度 */
     min-height: 100vh;
+    margin: 0;
+    padding-top: 80px;
+    /* 增加顶部内边距避免内容被导航栏遮挡 */
+    min-height: calc(100vh - 80px);
+    /* 补偿导航栏高度 */
+}
+
+
+/* 导航栏样式 */
+nav {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: #f8f9fa;
+    padding: 1rem 2rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .nav-left .logo {
+        font-weight: 700;
+        font-size: 1.5rem;
+        color: #2c3e50;
+        text-decoration: none;
+    }
+
+    .nav-links {
+        display: flex;
+        gap: 2rem;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .nav-links a {
+        text-decoration: none;
+        color: #34495e;
+        font-weight: 500;
+        transition: color 0.3s ease;
+    }
+
+    .nav-links a:hover {
+        color: #3498db;
+    }
+
+    .menu-toggle {
+        display: none;
+        cursor: pointer;
+        padding: 10px 15px;
+        font-size: 24px;
+    }
 }
 
 main {
@@ -26,6 +79,28 @@ main {
 }
 
 @media (max-width: 768px) {
+    nav {
+        .menu-toggle {
+            display: block;
+        }
+
+        .nav-links {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: #ffffff;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+            flex-direction: column;
+            padding: 10px;
+        }
+
+        .nav-links.active {
+            display: flex;
+        }
+    }
+
     main {
         width: 95%;
         /* 全屏展示 */
@@ -65,52 +140,4 @@ main {
         border-radius: 4px;
         cursor: pointer;
     }
-}
-
-/* 导航栏样式 */
-nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: #f8f9fa;
-    padding: 1rem 2rem;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.nav-left .logo {
-    font-weight: 700;
-    font-size: 1.5rem;
-    color: #2c3e50;
-    text-decoration: none;
-}
-
-.nav-links {
-    display: flex;
-    gap: 2rem;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-
-.nav-links a {
-    text-decoration: none;
-    color: #34495e;
-    font-weight: 500;
-    transition: color 0.3s ease;
-}
-
-.nav-links a:hover {
-    color: #3498db;
-}
-
-body {
-    margin: 0;
-    padding-top: 80px;
-    /* 增加顶部内边距避免内容被导航栏遮挡 */
-    min-height: calc(100vh - 80px);
-    /* 补偿导航栏高度 */
 }

templates/base.html

@@ -20,10 +20,11 @@
         <div class="nav-left">
             <a href="/" class="logo">PsychoScales</a>
         </div>
+        <div class="menu-toggle" onclick="document.querySelector('.nav-links').classList.toggle('active')">☰ </div>
         <ul class="nav-links">
             {% for key,value in tags.items() %}
             <li><a href="/tag/{{ key }}"">{{ value }}</a></li>
-                    {% endfor %}
+            {% endfor %}
         </ul>
     </nav>