diff --git a/src/web/toManual/js/App.js b/src/web/toManual/js/App.js
index 4aad1c71..b318ce8d 100755
--- a/src/web/toManual/js/App.js
+++ b/src/web/toManual/js/App.js
@@ -570,7 +570,7 @@ class App extends React.Component {
                 document.documentElement.style.setProperty(`--scrollbar-div-background-color`, 'rgba(255,255,255,0.2)');
                 document.documentElement.style.setProperty(`--scrollbar-div-hover-background-color`, 'rgba(255,255,255,0.25)');
                 document.documentElement.style.setProperty(`--scrollbar-div-select-background-color`, 'rgba(255,255,255,0.3)');
-                document.documentElement.style.setProperty(`--index-h2-color`, 'rgba(255,255,255,0.05)');
+                document.documentElement.style.setProperty(`--index-h2-color`, 'rgba(255,255,255,0.1)');
                 document.documentElement.style.setProperty(`--search-button-background-color-start`, '#484848');
                 document.documentElement.style.setProperty(`--search-button-background-color-end`, '#414141');
                 document.documentElement.style.setProperty(`--search-button-hover-color-start`, '#676767');
diff --git a/src/web/toManual/sass/index.scss b/src/web/toManual/sass/index.scss
index 36ad38c1..f15f1530 100644
--- a/src/web/toManual/sass/index.scss
+++ b/src/web/toManual/sass/index.scss
@@ -8,7 +8,12 @@
   user-select: none;
   display: flex;
   flex-flow: column;
-  margin: -1px 117px -19px 117px;
+  margin-top: -1px;
+  margin-bottom: -19px;
+  margin-left: auto;  
+  margin-right: auto;  
+  width: calc(100% - 117px - 117px);
+  max-width: 1630px;
 
   &:after {
     content: '';
@@ -121,9 +126,9 @@
     left: -10px;
     width: calc(100% + 20px);
     // right:0px;
-    flex-flow: row;
+    // flex-flow: row;
     flex-wrap: wrap;
-    justify-content: flex-start;
+    // justify-content: flex-start;
     margin: 0 0 30px 0;
 
     .tooltip-wp {
@@ -242,7 +247,6 @@
         font-family: var(--nav-world-font-family);
         font-size: var(--span-font-size);
         font-weight: 500;
-        line-height: var(--span-line-height);
         color: var(--index-item-span-word-color);
 
         .title-wrapper {
@@ -251,6 +255,7 @@
           background-color: var(--tips-background-color);
           color: var(--nav-hove-word-color);
           max-width: 500px;
+          z-index: 10;
           padding: 2px 5px;
           border-radius: 18px;
           border: 1px solid var(--nav-hove-border-color);
@@ -280,4 +285,4 @@
       visibility: hidden;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/web_dist/toManual/index.css b/src/web_dist/toManual/index.css
index d20b8f7c..8be08251 100644
--- a/src/web_dist/toManual/index.css
+++ b/src/web_dist/toManual/index.css
@@ -275,7 +275,12 @@ div {
   user-select: none;
   display: flex;
   flex-flow: column;
-  margin: -1px 117px -19px 117px; }
+  margin-top: -1px;
+  margin-bottom: -19px;
+  margin-left: auto;
+  margin-right: auto;
+  width: calc(100% - 117px - 117px);
+  max-width: 1630px; }
   #index:after {
     content: '';
     display: block;
@@ -358,9 +363,7 @@ div {
     position: relative;
     left: -10px;
     width: calc(100% + 20px);
-    flex-flow: row;
     flex-wrap: wrap;
-    justify-content: flex-start;
     margin: 0 0 30px 0; }
     #index .items .tooltip-wp {
       position: fixed;
@@ -453,7 +456,6 @@ div {
         font-family: var(--nav-world-font-family);
         font-size: var(--span-font-size);
         font-weight: 500;
-        line-height: var(--span-line-height);
         color: var(--index-item-span-word-color); }
         #index .items .videoitem .title-div .title-wrapper {
           position: fixed;
@@ -461,6 +463,7 @@ div {
           background-color: var(--tips-background-color);
           color: var(--nav-hove-word-color);
           max-width: 500px;
+          z-index: 10;
           padding: 2px 5px;
           border-radius: 18px;
           border: 1px solid var(--nav-hove-border-color);
diff --git a/src/web_dist/toManual/index.js b/src/web_dist/toManual/index.js
index 1733ce1d..556e1d0e 100644
--- a/src/web_dist/toManual/index.js
+++ b/src/web_dist/toManual/index.js
@@ -650,7 +650,7 @@ var App = function (_React$Component) {
                     document.documentElement.style.setProperty('--scrollbar-div-background-color', 'rgba(255,255,255,0.2)');
                     document.documentElement.style.setProperty('--scrollbar-div-hover-background-color', 'rgba(255,255,255,0.25)');
                     document.documentElement.style.setProperty('--scrollbar-div-select-background-color', 'rgba(255,255,255,0.3)');
-                    document.documentElement.style.setProperty('--index-h2-color', 'rgba(255,255,255,0.05)');
+                    document.documentElement.style.setProperty('--index-h2-color', 'rgba(255,255,255,0.1)');
                     document.documentElement.style.setProperty('--search-button-background-color-start', '#484848');
                     document.documentElement.style.setProperty('--search-button-background-color-end', '#414141');
                     document.documentElement.style.setProperty('--search-button-hover-color-start', '#676767');
diff --git a/src/web_dist/toManual/resource/banner/learn-basic-operations.png b/src/web_dist/toManual/resource/banner/learn-basic-operations.png
index ea4f62da..c7a5297f 100644
Binary files a/src/web_dist/toManual/resource/banner/learn-basic-operations.png and b/src/web_dist/toManual/resource/banner/learn-basic-operations.png differ