rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
front-end-example/02-css-layout/05-final-page/README.md
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

1.0 KiB
Raw Permalink Blame History

练习 5：综合页面

目标

把前面的 CSS 知识拼起来，做一个完整页面。

项目名称

前端学习路线页

任务

请基于给定 HTML，把页面排成一个完整的学习介绍页，要求：

  • 页面有明显的内容容器
  • 页头、主视觉、课程卡片、进度表单区分明显
  • 使用 Flex 做卡片区布局
  • 使用颜色、留白、边框和圆角提升可读性
  • 不要为了排版去破坏 HTML 结构

建议顺序

  1. 先给 body 和主容器设置基础样式
  2. 再写 header、hero
  3. 再写课程卡片布局
  4. 最后写表单和按钮

文件

  • [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/starter.html)
  • [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/starter.css)
  • [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/answer.html)
  • [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/answer.css)