修改技术文档网页。

TecDocPage/index.html

@@ -17,13 +17,9 @@
         height: 100%;
         border-right: solid;
         border-color: rgba(0, 22, 22, 0.4);
-        /* display: flex;
-        flex-direction: column;
-        align-items: center; */
     }
 
     header {
-        background-color: royalblue;
         color: black;
         margin: 10px;
         text-align: center;
@@ -53,7 +49,6 @@
 
     #navbar a {
         display: block;
-        /* background-color: royalblue; */
         color: #4d4e53;
         padding: 10px 30px;
         text-decoration: none;
@@ -61,7 +56,6 @@
     }
 
     #main-doc {
-        background-color: salmon;
         position: absolute;
         margin-left: 310px;
         margin-bottom: 110px;
@@ -83,46 +77,57 @@
     }
 
     code {
+        position: relative;
         display: block;
         text-align: left;
-        white-space: pre-line;
+        white-space: pre-wrap;
+        word-break: normal;
+        word-wrap: normal;
+        line-height: 2;
         background-color: rgb(247, 247, 247);
         margin: 10px;
         padding: 15px;
-        border-radius: 4px;
+        border-radius: 5px;
     }
 
+    @media only screen and (max-width:815px) {
+        #navbar ul {
+            border: 1px solid;
+            height: 207px;
+        }
 
+        #navbar {
+            background-color: white;
+            position: absolute;
+            top: 0px;
+            padding: 0;
+            margin: 0;
+            width: 100%;
+            border: none;
+            z-index: 1;
+            max-height: 275px; 
+        }
 
-
-
-    @media (max-width:800px) {
-        /* body {
-            display: flex;
-            flex-direction: column;
-            background-color: rgb(255, 255, 255);
-            color: rgb(78, 79, 84);
-            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-        } */
-
-        /* #navbar {
+        #main-doc {
             position: relative;
-            min-width: 290px;
-            top: 0px;
-            left: 0px;
-            width: 300px;
-            border: solid;
-            border-color: rgba(0, 22, 22, 0.4);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-        } */
+            margin-top: 270px;
+            margin-left: 0px;
+        }
+    }
+
+    @media only screen and (max-width:400px)  {
+        #main-doc {
+            margin-left: -10px;
+        }
 
-        /* #main-doc {
-            margin: auto;
-            padding: 20px;
-            margin-bottom: 110px;
-        } */
+        code {
+            margin-left: -20px;
+            width: 100%;
+            padding: 15px;
+            padding-left: 10px;
+            padding-right: 45px;
+            min-width: 233px;
+        }
     }
 </style>
 
@@ -183,12 +188,7 @@
             <header>Hello world</header>
             <article>
                 <p>To get started with writing JavaScript, open the Scratchpad and write your first "Hello world" JavaScript code:</p>
-                <code>
-                    function greetMe(yourName) 
-                    { alert("Hello " + yourName); 
-                    } 
-                    greetMe("World");
-                </code>
+                <code>function greetMe(yourName) <br>{ <br> alert("Hello " + yourName); <br>}<br>greetMe("World");</code>
                 <p>Select the code in the pad and hit Ctrl+R to watch it unfold in your browser!</p>
             </article>
         </section>
@@ -220,7 +220,7 @@
             <article>
                 <p>When you declare a variable outside of any function, it is called a global variable, because it is available to any other code in the current document. When you declare a variable within a function, it is called a local variable, because it is available only within that function.</p>
                 <p>JavaScript before ECMAScript 2015 does not have block statement scope; rather, a variable declared within a block is local to the function (or global scope) that the block resides within. For example the following code will log 5, because the scope of x is the function (or global context) within which x is declared, not the block, which in this case is an if statement.</p>
-                <code>if (true) { var x = 5; } console.log(x); // 5</code>
+                <code>if (true)<br>{<br>    var x = 5; <br>}<br>console.log(x); // 5</code>
                 <p>This behavior changes, when using the let declaration introduced in ECMAScript 2015.</p>
                 <code>if (true) { let y = 5; } console.log(y); // ReferenceError: y is not defined</code>
             </article>