Merge pull request #5 from ghcloudai/dev/xiaoli

fixed the layout code
ghcloudai · Jan 31, 2024 · 506636b · 506636b
2 parents cf47e12 + 30e41c0
commit 506636b
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 18 deletions.
diff --git a/_assets/main.css b/_assets/main.css
@@ -1,16 +1,45 @@
-/* _assets/main.css */
-/* Your styles go here */
+/* main.css */
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+header {
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
+}
+
+nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+nav ul li {
+  display: inline;
+  margin-right: 10px;
+}
+
 .container {
-    display: flex;
-  }
-
-  .sidebar {
-    background-color: #f4f4f4;
-    padding: 20px;
-    width: 200px;
-  }
-
-  main {
-    flex: 1;
-    padding: 20px;
-  }
+  display: flex;
+}
+
+.sidebar {
+  background-color: #f4f4f4;
+  padding: 20px;
+  width: 200px;
+}
+
+main {
+  flex: 1;
+  padding: 20px;
+}
+
+footer {
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  padding: 10px;
+}
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -7,7 +7,13 @@
 </head>
 <body>
   <header>
-    <!-- Your header content goes here -->
+    <nav>
+      <ul>
+        <li><a href="#section1">Section 1</a></li>
+        <li><a href="#section2">Section 2</a></li>
+        <li><a href="#section3">Section 3</a></li>
+      </ul>
+    </nav>
   </header>
 
   <div class="container">
@@ -20,12 +26,23 @@
     </nav>
 
     <main>
-      {{ content }}
+      <section id="section1">
+        <h2>Section 1</h2>
+        <p>This is the content of section 1.</p>
+      </section>
+      <section id="section2">
+        <h2>Section 2</h2>
+        <p>This is the content of section 2.</p>
+      </section>
+      <section id="section3">
+        <h2>Section 3</h2>
+        <p>This is the content of section 3.</p>
+      </section>
     </main>
   </div>
 
   <footer>
-    <!-- Your footer content goes here -->
+    <p>Footer content goes here</p>
   </footer>
 </body>
 </html>