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

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>