rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add CSS layout exercises and corresponding HTML files

Browse Source 
- 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.
This commit is contained in:
chali
2026-03-09 14:16:22 +08:00
commit 4495ae0e28
85 changed files with 2566 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
01-html-structure/05-final-project/README.md Normal file
View File

@@ -0,0 +1,48 @@
# 练习 5：综合项目
## 目标
把前面学过的结构知识拼成一个完整页面。
## 项目名称
个人前端学习主页
## 任务
请独立完成一个单页网站，要求至少包含：
- `header`
- `nav`
- `main`
- `section`
- `article`
- `aside`
- `footer`
- 一个列表
- 一张表格
- 一个表单
- 至少 3 个层级的标题
## 推荐页面拆分
- 页头：站点标题 + 导航
- 主要介绍区：你是谁、你在学什么
- 学习路线区：用列表展示
- 作品展示区：用 `article` 展示 2 个项目
- 学习进度区：用表格展示
- 联系我区：用表单收集信息
- 页脚：版权信息
## 自检标准
- 页面结构是否一眼能看懂
- 是否不是全都用 `div`
- 标题层级是否合理
- 列表、表格、表单是否嵌套正确
- 每个区域是否有明确职责
## 文件
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/05-final-project/starter.html)
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/01-html-structure/05-final-project/answer.html)

106
01-html-structure/05-final-project/answer.html Normal file
View File

@@ -0,0 +1,106 @@
<!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>
<header>
<h1>小周的前端学习主页</h1>
<nav>
<a href="#intro">自我介绍</a>
<a href="#roadmap">学习路线</a>
<a href="#projects">练习项目</a>
<a href="#contact">联系我</a>
</nav>
</header>
<main>
<section id="intro">
<h2>自我介绍</h2>
<p>我正在系统学习前端开发，目前优先掌握 HTML 结构、CSS 布局和 JavaScript 基础。</p>
</section>
<section id="roadmap">
<h2>学习路线</h2>
<ul>
<li>HTML 结构</li>
<li>CSS 布局与视觉</li>
<li>JavaScript 语言本体</li>
<li>DOM 与事件</li>
</ul>
</section>
<section id="projects">
<h2>练习项目</h2>
<article>
<h3>项目一：博客首页结构</h3>
<p>重点练习 `header`、`nav`、`main`、`section` 和 `article` 的页面组织方式。</p>
</article>
<article>
<h3>项目二：训练营报名页</h3>
<p>重点练习表格和表单的结构化写法。</p>
</article>
</section>
<section>
<h2>学习进度</h2>
<table>
<thead>
<tr>
<th>模块</th>
<th>状态</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML 结构</td>
<td>学习中</td>
<td>正在练习语义化标签</td>
</tr>
<tr>
<td>CSS</td>
<td>未开始</td>
<td>等 HTML 熟练后进入</td>
</tr>
</tbody>
</table>
</section>
<aside>
<h2>当前提醒</h2>
<p>先把结构写对，再考虑样式。先会拆页面，再会写页面。</p>
</aside>
<section id="contact">
<h2>联系我</h2>
<form>
<div>
<label for="visitor-name">姓名</label>
<input id="visitor-name" name="visitorName" type="text" />
</div>
<div>
<label for="visitor-email">邮箱</label>
<input id="visitor-email" name="visitorEmail" type="email" />
</div>
<div>
<label for="message">留言</label>
<textarea id="message" name="message" rows="4" cols="30"></textarea>
</div>
<button type="submit">发送</button>
</form>
</section>
</main>
<footer>
<p>2026 小周的前端学习主页</p>
</footer>
</body>
</html>

16
01-html-structure/05-final-project/starter.html Normal file
View File

@@ -0,0 +1,16 @@
<!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>
<!-- 任务：
1. 写完整语义化页面结构
2. 至少写 3 个 section
3. 加入 article、aside、table、form
4. 不要急着写 CSS，先保证 HTML 结构正确
-->
</body>
</html>