fix新闻报道

WebNews/css/foucsreport.css

@@ -16,17 +16,20 @@
 
 }
 .reportbox{
-    width: 30%;
+    width: 33%;
     margin-top: 20px;
+    display: inline-block;
 }
 .boxtitle{
     height: 40px;
     background-color: skyblue;
     font-size: 18px;
+    line-height: 40px;
+    text-align: center;
 
 }
 .boxcover img{
-    width: 294px;
+    width: 100%;
     height:210px;
     overflow: hidden;
 }

WebNews/foucsreport.html

@@ -64,21 +64,64 @@
 
     </div>
     <div class="footer">web新闻网站</div>
-    <script>
+    <script>  
-        let totalHight;
+        let totalHeight;  
-        let Prostick; 
+        let Prostick;  
-
+  
-        document.addEventListener("DOMContentLoaded", function () {
+        document.addEventListener("DOMContentLoaded", function () {  
-            
+            let boxTitle = [  
-
+                { text: "新闻示例1" },  
-            
+                { text: "新闻示例2" },  
-            Prostick = document.querySelector('.Prostick'); 
+                { text: "新闻示例3" },  
-            totalHight = document.body.scrollHeight - window.innerHeight; 
+                { text: "新闻示例4" },  
-        });
+                { text: "新闻示例5" },  
-        window.addEventListener('scroll', function () {
+                { text: "新闻示例6" },  
-            let pro = (window.pageYOffset / totalHight) * 100;
+            ];  
-            Prostick.style.width = pro + '%';
+            let boxCover = [  
-        })
+                { src: "path/to/image1.jpg" },  
+                { src: "path/to/image2.jpg" },  
+                { src: "path/to/image3.jpg" },  
+                { src: "path/to/image4.jpg" },  
+                { src: "path/to/image5.jpg" },  
+                { src: "path/to/image6.jpg" },  
+            ];  
+            let boxInfo = [  
+                { text: "示例文本..." },  
+                { text: "示例文本..." },  
+                { text: "示例文本..." },  
+                { text: "示例文本..." },  
+                { text: "示例文本..." },  
+                { text: "示例文本..." },  
+            ];  
+  
+            const reportBoxes = document.querySelectorAll('.reportbox');  
+  
+            reportBoxes.forEach((box, index) => {  
+                const boxTitleContent = box.querySelector('.boxtitle');  
+                const boxCoverContent = box.querySelector('.boxcover');  
+                const boxInfoContent = box.querySelector('.boxinfo');  
+  
+                const h3 = document.createElement('h3');  
+                h3.textContent = boxTitle[index].text;  
+                boxTitleContent.appendChild(h3);  
+  
+                const img = document.createElement('img');  
+                img.src = boxCover[index].src;  
+                boxCoverContent.appendChild(img);  
+  
+                const p = document.createElement('p');  
+                p.textContent = boxInfo[index].text;  
+                boxInfoContent.appendChild(p);  
+            });  
+  
+            Prostick = document.querySelector('.Prostick');  
+            totalHeight = document.body.scrollHeight - window.innerHeight;  
+        });  
+  
+        window.addEventListener('scroll', function () {  
+            let pro = (window.pageYOffset / totalHeight) * 100;  
+            Prostick.style.width = pro + '%';  
+        });  
     </script>
 </body>
 </html>