Update

src/main/resources/templates/Buju.html

@@ -12,22 +12,22 @@
         body{
             background-color: gray;
         }
-        @media screen and (max-width: 790px){
+        @media screen and (max-width: 1900px){
             #content{
                 position: absolute;
-                left: 28%;
+                left: 40%;
                 float: left;
                 width: 40%;
                 background-color: white;
                 margin-left: 5px;
-                height: 600px;
+                height: 700px;
             }
             #text-content{
                 text-align: center;
-                margin: 0 auto;
+                margin-left: 10px;
                 padding-top: 50px;
                 overflow: scroll;
-                height: 600px;
+                height: 700px;
             }
         }
         @media screen and (max-width: 1071px){
@@ -42,29 +42,52 @@
             }
             #text-content{
                 text-align: center;
-               margin-left: 10px;
+                margin-left: 10px;
                 padding-top: 50px;
                 overflow: scroll;
                 height: 700px;
             }
         }
-        @media screen and (max-width: 1900px){
+        @media screen and (max-width: 790px){
             #content{
                 position: absolute;
-                left: 40%;
+                left: 28%;
                 float: left;
                 width: 40%;
                 background-color: white;
                 margin-left: 5px;
+                height: 600px;
+            }
+            #text-content{
+                text-align: center;
+                margin: 0 auto;
+                padding-top: 50px;
+                overflow: scroll;
+                height: 600px;
+            }
+        }
+        @media screen and (max-width: 500px){
+            #content{
+                position: absolute;
+                left: 10px;
+                width: 95%;
+                background-color: white;
+                margin-left: 5px;
                 height: 700px;
             }
             #text-content{
                 text-align: center;
-                margin-left: 10px;
                 padding-top: 50px;
                 overflow: scroll;
                 height: 700px;
             }
+            .aside{
+                /*float: left;*/
+                /*width: 300px;*/
+                /*height: 700px;*/
+                /*background-color: #bdd4e9;*/
+                visibility: hidden;
+            }
         }
         @media screen and (min-width: 790px) {
             body{
@@ -144,19 +167,6 @@
     </div><!-- /.container-fluid -->
 </nav>
 <div class="container">
-<!--    <div id="header">-->
-<!--        <div style="margin-top: 10px;padding-top:30px; ">-->
-<!--            <h1 style="color: red;">Web 课实验·页面布局</h1>-->
-<!--        </div>-->
-<!--    </div>-->
-<!--    <div id="nav">-->
-<!--        <a href="Home.html">御承扬</a>-->
-<!--        <a href="Home.html">首页</a>-->
-<!--        <a href="Person.html">个人页</a>-->
-<!--        <a href="#" class="active">页面布局</a>-->
-<!--        <a href="test4.html">圆角和阴影</a>-->
-<!--        <a href="useJavascript.html">Javascript1</a>-->
-<!--    </div>-->
     <div id="main">
         <div id="lp" class="aside">
             <br>