导航栏高亮

WebNews/css/common.css

@@ -46,6 +46,7 @@ a{
 }
 .navbtn{
     line-height: 65px;
+    height: 60px;
     float: left;
     margin: 0 20px;
 }
@@ -60,4 +61,26 @@ a{
     background-color: #3fa8ea;
     line-height: 100px;
     text-align: center;
+}
+.DStyle {
+    position: relative;
+    width: fit-content;
+
+}
+
+.DStyle::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 3px;
+    position: absolute;
+    bottom: -5px;
+    background: #0091ea;
+    transition: all 0.3s ease-in-out;
+    transform: scale3d(0, 1, 1);
+    transform-origin: 50% 0;
+}
+
+.DStyle:hover::after {
+    transform: scale3d(1, 1, 1);
 }

WebNews/foucsreport.html

@@ -118,8 +118,9 @@
   
         window.addEventListener('scroll', function () {  
             let pro = (window.pageYOffset / totalHeight) * 100;  
-            Prostick.style.width = pro + '%';  
+            Prostick.style.width = pro + '%';
-        });  
+        }); 
+        
     </script>
 </body>
 </html>

WebNews/index.html

@@ -18,11 +18,11 @@
         <div class="navinit">
             <div class="logo">web新闻网站</div>
             <div class="navbtnpart">
-                <div class="navbtn"><a href="index.html">首页</a></div>
+                <div class="navbtn DStyle"><a href="index.html">首页</a></div>
-                <div class="navbtn"><a href="newsclass.html">新闻分类</a></div>
+                <div class="navbtn DStyle"><a href="newsclass.html">新闻分类</a></div>
-                <div class="navbtn"><a href="foucsreport.html">专题报道</a></div>
+                <div class="navbtn DStyle"><a href="foucsreport.html">专题报道</a></div>
-                <div class="navbtn"><a href="newsinfo.html">新闻资讯</a></div>
+                <div class="navbtn DStyle"><a href="newsinfo.html">新闻资讯</a></div>
-                <div class="navbtn"><a href="#">互动交流</a></div>
+                <div class="navbtn DStyle"><a href="#">互动交流</a></div>
             </div>
         </div>
     </div>