Files
front-end-example/02-css-layout/01-selectors-and-text
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选择器与文本样式

目标

掌握最基础的 CSS 选择器和文字样式。

你要练什么

  • 元素选择器
  • 类选择器
  • color
  • font-size
  • font-weight
  • line-height
  • background-color

任务

请把页面排成一个简洁的学习卡片,要求:

  • 页面背景换成浅色
  • 主标题颜色更明显
  • 介绍段落提高可读性
  • 给提示文字单独加一个背景色块
  • 给列表中的重点项单独强调

文件

  • [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/01-selectors-and-text/starter.html)
  • [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/01-selectors-and-text/starter.css)
  • [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/01-selectors-and-text/answer.html)
  • [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/01-selectors-and-text/answer.css)