base.html初步凑合用

SinkDark/publicStatic/css/base.css

@@ -17,48 +17,25 @@ a:hover { text-decoration: none; color: #000; }
 .blank { height: 20px; overflow: hidden; width: 100%; margin: auto; clear: both }
 .f_l { float: left }
 .f_r { float: right }
-article {
+.grid-container {
-    width: 1000px;
+  display: grid;
-    margin: 80px auto 0;
+  grid-template-columns: 1fr 3fr 1fr; /* 左侧和右侧各占1份空间，中间占2份 */
-    overflow: hidden;
+  grid-gap: 10px; /* 网格间隙 */
-    transform: scale(1);
+  width: 90%; /* 确保容器宽度为父元素的100% */
-}
+  margin: 80px
-.l_box {
-    /* 左边栏CSS样式规则 */
-    float: left; /* 让这个aside元素向左浮动 */
-    width: 20%; /* 设置宽度为父容器的25% */
-    margin-right: 10px; /* 设置右边距为20px */
-    background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
-    /* 您可以添加更多的样式规则 */
-    overflow: hidden;
-    display: block;
-    position: relative;
-    z-index: 1
-}
-.rt_box {
-    /* 右边栏CSS样式规则 */
-    float: right; /* 让这个aside元素向右浮动 */
-    width: 20%; /* 设置宽度为父容器的20% */
-    margin-left: 10px; /* 设置右边距为20px */
-    background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
-    /* 您可以添加更多的样式规则 */
-    overflow: hidden;
-    display: block;
-    position: relative;
-    z-index: 1
-}
-.m_box {
-/* 主体CSS样式规则 */
-    float: center; /* 让这个aside元素向右浮动 */
-    width: 60%; /* 设置宽度为父容器的20% */
-    background-color: #f0f0f0; /* 设置背景颜色为浅灰色 */
-    margin-left: 1000px; /* 设置右边距为20px */
-    overflow: hidden;
-    display: block;
-    position: relative;
-    z-index: 2
 }
 
+.l_box {
+  /* 左侧内容样式 */
+}
+
+.r_box {
+  /* 中间主体内容样式，这里不需要特别指定宽度，因为Grid已经分配了空间 */
+}
+
+.rt_box {
+  /* 右侧内容样式 */
+}
 main { overflow: hidden; width: 68%; float: right; display: block; }
 .container { width: 1000px; margin: auto }
 nav { width: 1000px; margin: auto }

SinkDark/templates/base.html

@@ -27,8 +27,8 @@
 </header>
 
 {% block body %}
-<article>
+<div class="grid-container">
-  <aside class="l_box">
+  <div class="l_box">
       <div class="about_me">
         <h2>关于我</h2>
         <ul>
@@ -70,20 +70,13 @@
           <a href="https://zhihu.com" target="new">知乎</a>
         </ul>
       </div>
-  </aside>
-  <aside class="rt_box">
-    <div class="tools">
-        <h2>小工具</h2>
-        <ul>
-          tools
-        </ul>
   </div>
-  </aside>
+  <div class="m_box">
+      {% block content %}{% endblock %}
+  </div>
+  <div class="r_box">右侧内容</div>
   {% endblock %}
 
-{% block content %}{% endblock %}
-
-</article>
 <a href="#" class="cd-top">Top</a>
 {% block script %}{% endblock %}
 </body>