feat: Add CSS layout exercises and corresponding HTML files

- Created multiple exercises under the CSS layout section, including: - Final page layout with CSS styles and HTML structure. - Display and flow concepts with examples of block, inline, and none display types. - Selectors and pseudo-classes with practical examples. - Overflow and sizing handling in CSS. - Grid layout basics for two-dimensional layouts. - Fixed and sticky positioning examples. - Centering techniques for common layout scenarios. - Added README files for each exercise to outline objectives and file structures. - Updated main README to include new sections and usage instructions.
2026-03-09 14:16:22 +08:00
commit 4495ae0e28
85 changed files with 2566 additions and 0 deletions
--- a/02-css-layout/05-final-page/answer.html
+++ b/02-css-layout/05-final-page/answer.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>前端学习路线页</title>
+    <link rel="stylesheet" href="./answer.css" />
+  </head>
+  <body>
+    <div class="page">
+      <header class="site-header">
+        <h1>前端学习路线</h1>
+        <nav class="nav">
+          <a href="#html">HTML</a>
+          <a href="#css">CSS</a>
+          <a href="#js">JavaScript</a>
+        </nav>
+      </header>
+
+      <main>
+        <section class="hero">
+          <div>
+            <p class="eyebrow">第 2 阶段</p>
+            <h2>CSS 布局与视觉</h2>
+            <p>目标是把已经写好的 HTML 页面排得更清晰、更稳定、更可读。</p>
+          </div>
+          <a class="hero-link" href="#tracks">开始练习</a>
+        </section>
+
+        <section class="tracks" id="tracks">
+          <article class="track-card" id="html">
+            <h3>盒模型</h3>
+            <p>理解 margin、padding、border 的区别。</p>
+          </article>
+          <article class="track-card" id="css">
+            <h3>Flex</h3>
+            <p>学会横向排列、间距和居中。</p>
+          </article>
+          <article class="track-card" id="js">
+            <h3>定位</h3>
+            <p>掌握相对定位和绝对定位的配合。</p>
+          </article>
+        </section>
+
+        <section class="contact">
+          <h3>练习登记</h3>
+          <form class="form">
+            <label for="name">姓名</label>
+            <input id="name" type="text" />
+
+            <label for="goal">今日目标</label>
+            <textarea id="goal" rows="4"></textarea>
+
+            <button type="submit">提交</button>
+          </form>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>