chali 4495ae0e28 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

Front-End Study Workspace

这个工作区按知识点分目录,便于你后续继续加入 CSS、JavaScript、DOM、TypeScript 等内容。

目录规则

  • 01-html-structureHTML 结构
  • 02-css-layout:预留给 CSS
  • 03-javascript-core:预留给 JavaScript
  • 04-dom-events-async:预留给 DOM + 事件 + 异步
  • 05-typescript:预留给 TypeScript

当前可学内容

现在已经为你整理好 01-html-structure,里面包含:

  • 讲义
  • 分阶段练习
  • starter.html 起始代码
  • answer.html 参考答案

现在也已经整理好 02-css-layout,里面包含:

  • CSS 讲义
  • 分阶段案例
  • starter.html / starter.css 起始代码
  • answer.html / answer.css 参考答案

两部分现在都已经补充到“核心主线 + 常见细分知识点”。

使用方式

  1. 先阅读 [01-html-structure/README.md](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/README.md)
  2. 再阅读 [02-css-layout/README.md](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/README.md)
  3. 按顺序完成每个练习目录
  4. 先写 starter.htmlstarter.css
  5. 写完后再对照答案文件

如果你后面要继续学其他知识点,我可以按同样结构继续给你补 03-javascript-core04-dom-events-async 等目录。

Description
前端学习案例
Readme 290 KiB
Languages
HTML 55.9%
JavaScript 32.2%
TypeScript 7.1%
CSS 4.5%
Vue 0.3%