优化框架

WebNews/css/common.css

@@ -0,0 +1,63 @@
+body{
+    margin: 0;
+    padding: 0;
+}
+a{
+    text-decoration: none;
+
+}
+
+.Progress {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    position: fixed;
+    top: 0px;
+    z-index: 1000;
+
+}
+
+.Prostick {
+    width: 0;
+    background-color: #0091EA;
+    height: 5px;
+}
+.navbar{
+    width: 100%;
+    height: 65px;
+    position: fixed;
+    background-color: lightgray;
+    top: 0;
+    box-shadow: 0px 6px 5px rgb(179, 175, 175);
+}
+.navinit{
+    width: 980px;
+    height: 100%;
+    margin: auto;
+
+}
+.navbtnpart{
+    float: right;
+}
+.logo{
+    float: left;
+    line-height: 65px;
+
+}
+.navbtn{
+    line-height: 65px;
+    float: left;
+    margin: 0 20px;
+}
+.navbtn a{
+    color: #000;
+}
+.navbtn a:hover{
+    color: #0091ea;
+}
+.footer{
+    height: 100px;
+    background-color: #3fa8ea;
+    line-height: 100px;
+    text-align: center;
+}

WebNews/css/foucsreport.css

@@ -1,59 +1,3 @@
-body{
-    margin: 0;
-    padding: 0;
-}
-a{
-    text-decoration: none;
-
-}
-.Progress {
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    position: fixed;
-    top: 0px;
-    z-index: 1000;
-
-}
-
-.Prostick {
-    width: 0;
-    background-color: #0091EA;
-    height: 5px;
-}
-.navbar{
-    width: 100%;
-    height: 65px;
-    position: fixed;
-    background-color: lightgray;
-    top: 0;
-    box-shadow: 0px 6px 5px rgb(179, 175, 175);
-}
-.navinit{
-    width: 980px;
-    height: 100%;
-    margin: auto;
-
-}
-.navbtnpart{
-    float: right;
-}
-.logo{
-    float: left;
-    line-height: 65px;
-
-}
-.navbtn{
-    line-height: 65px;
-    float: left;
-    margin: 0 20px;
-}
-.navbtn a{
-    color: #000;
-}
-.navbtn a:hover{
-    color: #0091ea;
-}
 .mainbody{
     width: 980px;
     height: 1200px;
@@ -92,9 +36,3 @@ a{
     font-size: 22px;
     text-indent: 2em;
 }
-.footer{
-    height: 100px;
-    background-color: #3fa8ea;
-    line-height: 100px;
-    text-align: center;
-}

WebNews/css/index.css

@@ -1,60 +1,3 @@
-body{
-    margin: 0;
-    padding: 0;
-}
-a{
-    text-decoration: none;
-
-}
-
-.Progress {
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    position: fixed;
-    top: 0px;
-    z-index: 1000;
-
-}
-
-.Prostick {
-    width: 0;
-    background-color: #0091EA;
-    height: 5px;
-}
-.navbar{
-    width: 100%;
-    height: 65px;
-    position: fixed;
-    background-color: lightgray;
-    top: 0;
-    box-shadow: 0px 6px 5px rgb(179, 175, 175);
-}
-.navinit{
-    width: 980px;
-    height: 100%;
-    margin: auto;
-
-}
-.navbtnpart{
-    float: right;
-}
-.logo{
-    float: left;
-    line-height: 65px;
-
-}
-.navbtn{
-    line-height: 65px;
-    float: left;
-    margin: 0 20px;
-}
-.navbtn a{
-    color: #000;
-}
-.navbtn a:hover{
-    color: #0091ea;
-}
 .mainbody{
     width: 980px;
     margin: auto;
@@ -108,9 +51,3 @@ a{
     line-height: 30px;
 
 }
-.footer{
-    height: 100px;
-    background-color: #3fa8ea;
-    line-height: 100px;
-    text-align: center;
-}

WebNews/css/newsclass.css

@@ -1,61 +1,3 @@
-body{
-    margin: 0;
-    padding: 0;
-}
-a{
-    text-decoration: none;
-
-}
-
-.Progress {
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    position: fixed;
-    top: 0px;
-    z-index: 1000;
-
-}
-
-.Prostick {
-    width: 0;
-    background-color: #0091EA;
-    height: 5px;
-}
-
-.navbar{
-    width: 100%;
-    height: 65px;
-    position: fixed;
-    background-color: lightgray;
-    top: 0;
-    box-shadow: 0px 6px 5px rgb(179, 175, 175);
-}
-.navinit{
-    width: 980px;
-    height: 100%;
-    margin: auto;
-
-}
-.navbtnpart{
-    float: right;
-}
-.logo{
-    float: left;
-    line-height: 65px;
-
-}
-.navbtn{
-    line-height: 65px;
-    float: left;
-    margin: 0 20px;
-}
-.navbtn a{
-    color: #000;
-}
-.navbtn a:hover{
-    color: #0091ea;
-}
 .mainbody{
     width: 980px;
     height: 1200px;
@@ -121,9 +63,3 @@ a{
     background-color: skyblue;
     margin: 0 10px;
 }
-.footer{
-    height: 100px;
-    background-color: #3fa8ea;
-    line-height: 100px;
-    text-align: center;
-}

WebNews/css/newsinfo.css

@@ -1,59 +1,3 @@
-body{
-    margin: 0;
-    padding: 0;
-}
-a{
-    text-decoration: none;
-
-}
-.Progress {
-    width: 100%;
-    padding: 0;
-    margin: 0;
-    position: fixed;
-    top: 0px;
-    z-index: 1000;
-
-}
-
-.Prostick {
-    width: 0;
-    background-color: #0091EA;
-    height: 5px;
-}
-.navbar{
-    width: 100%;
-    height: 65px;
-    position: fixed;
-    background-color: lightgray;
-    top: 0;
-    box-shadow: 0px 6px 5px rgb(179, 175, 175);
-}
-.navinit{
-    width: 980px;
-    height: 100%;
-    margin: auto;
-
-}
-.navbtnpart{
-    float: right;
-}
-.logo{
-    float: left;
-    line-height: 65px;
-
-}
-.navbtn{
-    line-height: 65px;
-    float: left;
-    margin: 0 20px;
-}
-.navbtn a{
-    color: #000;
-}
-.navbtn a:hover{
-    color: #0091ea;
-}
 .mainbody{
     width: 980px;
     margin: auto;
@@ -72,9 +16,3 @@ a{
     color: #FFF;
     font-size: 18px;
 }
-.footer{
-    height: 100px;
-    background-color: #3fa8ea;
-    line-height: 100px;
-    text-align: center;
-}

WebNews/foucsreport.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>专题报道</title>
     <link rel="stylesheet" href="css/foucsreport.css">
+    <link rel="stylesheet" href="css/common.css">
 </head>
 <body>
     <div class="Progress">

WebNews/index.html

@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>web新闻网站</title>
     <link rel="stylesheet" href="css/index.css">
+    <link rel="stylesheet" href="css/common.css">
 </head>
 
 <body>

WebNews/js/common.js

@@ -0,0 +1,10 @@
+let totalHight; 
+let moved;
+let Prostick;
+
+window.addEventListener('scroll', function () {  
+    if (totalHight && Prostick) { 
+        let pro = (moved / totalHight) * 100;  
+        Prostick.style.width = pro + '%';  
+    }  
+});  

WebNews/newsclass.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>新闻分类</title>
     <link rel="stylesheet" href="css/newsclass.css">
+    <link rel="stylesheet" href="css/common.css">
 </head>
 <body>
     <div class="Progress">

WebNews/newsinfo.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>新闻资讯</title>
     <link rel="stylesheet" href="css/newsinfo.css">
+    <link rel="stylesheet" href="css/common.css">
 </head>
 <body>
     <div class="Progress">