4495ae0e28
- 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.
107 lines
2.8 KiB
HTML
107 lines
2.8 KiB
HTML
<!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>
|