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/01-html-structure/08-advanced-form-controls/answer.html
+++ b/01-html-structure/08-advanced-form-controls/answer.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>进阶表单控件</title>
+  </head>
+  <body>
+    <h1>学习偏好登记表</h1>
+
+    <form>
+      <div>
+        <label for="student-name">姓名</label>
+        <input id="student-name" name="studentName" type="text" />
+      </div>
+
+      <div>
+        <label for="track">学习方向</label>
+        <select id="track" name="track">
+          <option value="">请选择</option>
+          <option value="html">HTML</option>
+          <option value="css">CSS</option>
+          <option value="javascript">JavaScript</option>
+        </select>
+      </div>
+
+      <fieldset>
+        <legend>学习节奏</legend>
+        <label>
+          <input type="radio" name="pace" value="slow" />
+          慢节奏
+        </label>
+        <label>
+          <input type="radio" name="pace" value="normal" />
+          正常
+        </label>
+        <label>
+          <input type="radio" name="pace" value="fast" />
+          快节奏
+        </label>
+      </fieldset>
+
+      <fieldset>
+        <legend>感兴趣模块</legend>
+        <label>
+          <input type="checkbox" name="modules" value="layout" />
+          布局
+        </label>
+        <label>
+          <input type="checkbox" name="modules" value="animation" />
+          动画
+        </label>
+        <label>
+          <input type="checkbox" name="modules" value="project" />
+          项目实战
+        </label>
+      </fieldset>
+
+      <button type="submit">提交</button>
+    </form>
+  </body>
+</html>