fix

css/styles.css

@@ -64,6 +64,9 @@ body {
     font-size: 16px;
     padding: 5px 10px;
     transition: color 0.3s ease;
+    position: relative; /* 添加相对定位 */  
+    display: flex;  
+    gap: 35px;
 }
 
 .navbar-right a:hover,
@@ -77,7 +80,7 @@ body {
     bottom: 0;
     width: 28px;
     height: 2px;
-    background-color: #FFD700;
+    background-color: #0091EA;
     transition: all .3s;
 
 }

index.html

@@ -19,7 +19,7 @@
         </div>
 
         <div class="navbar-right">
-            <a href="index.html" class="active">首页</a>
+            <a href="index.html" class="active">首页</a><div class="line"></div>
             <a href="news-categories.html">新闻分类</a>
             <a href="special-reports.html">专题报道</a>
             <a href="news-updates.html">新闻资讯</a>
@@ -57,12 +57,19 @@
         Web新闻网站
     </div>
     <script>
-        let totalhight = document.body.scrollHeight
+        let totalHight = document.body.scrollHeight
         const Prostick = document.querySelector('.Prostick')
         window.addEventListener('scroll', function () {
-            let pro = (window.pageYOffset / totalhight) * 100
+            let pro = (window.pageYOffset / totalhHght) * 100
             Prostick.style.width = pro + '%'
         })
+        const list =document.querySelector('.navbar-right')
+        const line = document.querySelector('.line')
+        list.addEventListener('click',function(e){
+            if (e.target.tagName === 'A'){
+                line.style.transform = `translateX(${e.target.tagName}px)`
+            }
+        })
         document.addEventListener("DOMContentLoaded", function () {
             const imgs = [
                 { src: "pics/1.png" },