Update index.html

Author: ProMetaDev

index.html

@@ -5,6 +5,33 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>Fairy 的百宝箱</title>
   <style>
+    
+  /* 让点击按钮后，页面平滑滚动到对应区块，不是瞬间跳 */
+  html {
+    scroll-behavior: smooth;
+  }
+  /* 给跳转区块加和首页卡片统一的样式，不突兀 */
+  .content-section {
+    max-width: 1200px;
+    margin: 60px auto;
+    padding: 40px 20px;
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+  }
+  .content-section h2 {
+    color: #333;
+    font-size: 28px;
+    margin-bottom: 20px;
+    border-bottom: 2px solid #007bff;
+    padding-bottom: 10px;
+  }
+  .content-section p {
+    color: #666;
+    line-height: 1.8;
+    font-size: 16px;
+  }
+
     * {
       margin: 0;
       padding: 0;
@@ -117,30 +144,56 @@ <h1>Fairy 的百宝箱</h1>
     <div class="card">
       <h3>项目以及小工具</h3>
       <p>这里包含Fairy自制的好玩的小工具：）</p>
-      <a href="#">开始参观 →</a>
+      <a href="#projects">开始参观 →</a>
     </div>
 
     <div class="card">
       <h3>机器学习模型</h3>
       <p>构建分类与回归模型，数据处理、训练、评估与可视化。</p>
-      <a href="#">查看项目 →</a>
+      <a href="#machine_learning">查看项目 →</a>
     </div>
 
     <div class="card">
       <h3>Fairy的成就栏</h3>
       <p>记录Fairy获得的巨大进步</p>
-      <a href="#">查看成就 →</a>
+      <a href="#skills">查看成就 →</a>
     </div>
 
     <div class="card">
       <h3>算法与代码模板</h3>
       <p>Fairy对常用算法实现、代码模板库与测试用例整理。</p>
-      <a href="#">查看项目 →</a>
+      <a href="#models">查看项目 →</a>
     </div>
   </main>
-
+<!-- 1. 对应「项目以及小工具」按钮 #projects -->
+<section id="projects" class="content-section">
+  <h2>技术练习与作品合集</h2>
+  <p>这里是Fairy自制的各种好玩、实用的小工具项目，后续会持续更新更多有趣的功能~</p>
+  <p>比如：在线计算器、待办清单、天气查询小工具等，都可以放在这里详细展示哦！</p>
+</section>
+
+<!-- 2. 对应「机器学习模型」按钮 #machine_learning -->
+<section id="machine_learning" class="content-section">
+  <h2>机器学习模型</h2>
+  <p>这里展示Fairy构建的分类、回归机器学习模型，包含数据处理、模型训练、评估与可视化全流程。</p>
+  <p>比如：房价预测模型、图像分类模型、用户行为分析模型等，都可以在这里详细介绍项目细节~</p>
+</section>
+
+<!-- 3. 对应「Fairy的成就栏」按钮 #skills -->
+<section id="skills" class="content-section">
+  <h2>Fairy的成就栏</h2>
+  <p>记录Fairy在学习、开发过程中获得的每一个进步、每一项技能掌握情况~</p>
+  <p>比如：前端技能、Python技能、机器学习技能、证书、竞赛获奖等，都可以在这里分类展示！</p>
+</section>
+
+<!-- 4. 对应「算法与代码模板」按钮 #models -->
+<section id="models" class="content-section">
+  <h2>算法与代码模板</h2>
+  <p>这里是Fairy整理的常用算法实现、代码模板库与测试用例，方便自己和他人快速复用~</p>
+  <p>比如：排序算法、动态规划模板、数据结构实现、爬虫模板等，都可以在这里分类整理！</p>
+</section>
   <footer>
     © 2026 fairy | 个人作品展示站
   </footer>
 </body>
-</html>
+</html>