look

Html/apps/templates/navbar.html

@@ -1,100 +1,22 @@
-<!-- 页眉导航栏 -->
+<link rel="stylesheet" href="/static/css/navbar.css">
 <header class="navbar">
-    <style>
-        /* 页眉导航栏 */
-        .navbar {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            background-color: #2575fc;
-            padding: 10px 30px;
-            color: white;
-            border-radius: 10px;
-            margin: 20px;
-            margin-bottom: 30px;
-        }
-
-        .navbar .logo h1 {
-            font-size: 24px;
-            font-weight: bold;
-        }
-
-        .navbar-links a {
-            color: white;
-            text-decoration: none;
-            margin: 0 20px;
-            font-size: 16px;
-            transition: color 0.3s;
-        }
-
-        .navbar-links a:hover {
-            color: #f1c40f;
-        }
-
-        .navbar .avatar img {
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            border: 2px solid white;
-            cursor: pointer;
-        }
-
-        .avatar {
-            margin-left: 200px;
-        }
-
-        /* 控制浮框 */
-        .dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            right: 0;
-            background-color: white;
-            color: black;
-            min-width: 200px;
-            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
-            border-radius: 10px;
-            z-index: 1;
-            padding: 10px;
-            font-size: 14px;
-        }
-
-        .dropdown-content a {
-            color: black;
-            text-decoration: none;
-            padding: 10px;
-            display: block;
-            transition: background-color 0.3s;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #f1c40f;
-        }
-
-        /* 显示浮框 */
-        .dropdown:hover .dropdown-content {
-            display: block;
-        }
-
-    </style>
     <div class="logo">
         <h1>华实君：教学练评一体的虚拟助教</h1>
     </div>
     {% if role == 'teacher' %}
         <!-- 如果是教师角色 -->
-        <a href="/teacherindex">首页</a>
-        <a href="/teacherdashboard">课程</a>
-        <a href="/teachergrades">成绩</a>
+        <div class="navbar-links">
+            <a href="/teacherindex">首页</a>
+            <a href="/teacherdashboard">课程</a>
+            <a href="/teachergrades">成绩</a>
+        </div>
     {% else %}
         <!-- 如果是学生角色 -->
-        <a href="/">首页</a>
-        <a href="/dashboard">课程</a>
-        <a href="/grades">成绩</a>
-        
+        <div class="navbar-links">
+            <a href="/">首页</a>
+            <a href="/dashboard">课程</a>
+            <a href="/grades">成绩</a>
+        </div>
     {% endif %}
 
     <div class="avatar dropdown">
@@ -104,4 +26,4 @@
             <a href="/logout" id="logout">注销</a>
         </div>
     </div>
-</header>
+</header>