UPDATE

2026-03-12 22:56:33 +08:00
parent 4495ae0e28
commit 710852d8d0
9 changed files with 425 additions and 11 deletions
--- a/02-css-layout/05-final-page/starter.html
+++ b/02-css-layout/05-final-page/starter.html
@@ -4,7 +4,167 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端学习路线页</title>
-    <link rel="stylesheet" href="./starter.css" />
+    <style>
+      body{
+        background-color: rgb(236, 244, 250);
+        display: flex;
+        justify-content: center;
+      }
+
+      .page{
+        margin-top: 30px;
+        margin-left: 10px;
+        margin-right: 10px;
+        padding-left: 5%;
+        padding-right: 5%;
+      }
+
+      .site-header{
+        background-color: rgb(252, 253, 255);
+        border: 1px solid rgb(215, 231, 254);
+        border-radius: 20px;
+        display: flex;
+        justify-content: space-between;
+        padding: 20px;
+      }
+
+      a{
+        text-decoration: none;
+        color: blue;
+        font-weight: 800;
+        margin-right: 10px;
+      }
+
+      .nav{
+         margin-top: 32px;
+         display: flex;
+         justify-content: space-around;
+      }
+      
+      main{
+        margin-top: 30px;
+      }
+
+      .hero{
+        background-color: rgb(35, 89, 224);
+        border-radius: 20px;
+        padding-top: 0px;
+        padding-bottom: 20px;
+        padding-left: 10px;
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .eyebrow{
+        color: aliceblue;
+        margin-top: 13px;
+
+      }
+
+      h2{
+        color: white;
+        font-size: 35px;
+        font-weight: 800;
+        margin-top: -5px;
+        padding-top: 0px;
+        padding-left: 15px;
+      }
+
+      .eye-p{
+        color: white;
+        margin-top: -10px;
+        padding-top: 0px;
+        margin-bottom: 20px;
+        margin-left: 15px;
+      }
+
+      .hero-link{
+        background-color: white;
+        padding: 10px 15px 10px 15px;
+        border-radius: 10px;
+        height: 23px;
+        width: 75px;
+       margin-top: 65px;
+       margin-right: 30px;
+       text-align: center;
+      }
+
+      .tracks{
+        display: flex;
+        justify-content: space-between;
+        margin-top: 25px;
+        gap: 30px;
+        padding-bottom: 20px;
+      }
+
+      .track-card{
+        background-color: rgb(252, 253, 255);
+        border: 1px solid rgb(215, 231, 254);
+        border-radius: 20px;
+        flex: 1;
+      }
+
+      h3{
+        margin-left: 20px;
+        margin-top: 40px;
+      }
+
+      p{
+        color: black;
+        margin-left: 20px;
+        padding-top: 15px;
+        margin-right: 20px;
+      }
+
+      .contact{
+        background-color: rgb(252, 253, 255);
+        border: 1px solid rgb(215, 231, 254);
+        border-radius: 20px;
+        margin-top: 25px;
+      }
+
+      label{
+        width: 100%;
+    
+      }
+
+      form{
+        padding-left: 20px;
+        padding-right: 20px;
+      }
+
+      #name{
+        border-radius: 10px;
+        width: 95%;
+        border: 1px solid rgb(215, 231, 254);
+        padding: 15px;
+        margin-top: 10px;
+        font-size: 18px;
+        margin-bottom: 10px;
+      }
+
+      #goal{
+        width: 95%;
+        border: 1px solid rgb(215, 231, 254);
+        border-radius: 10px;
+        padding: 10px;
+        margin-top: 10px;
+        font-size: 18px;
+      }
+
+      button{
+        background-color: rgb(11, 98, 11);
+        border-radius: 10px;
+        color: white;
+        margin-top: 10px;
+        margin-left: 20px;
+        width: 140px;
+        height: 50px;
+        margin-bottom: 20px;
+        font-size: 18px;
+        font-weight: 600;
+      }
+    </style>
  </head>
  <body>
    <div class="page">
@@ -22,7 +182,7 @@
          <div>
            <p class="eyebrow">第 2 阶段</p>
            <h2>CSS 布局与视觉</h2>
-            <p>目标是把已经写好的 HTML 页面排得更清晰、更稳定、更可读。</p>
+            <p class="eye-p">目标是把已经写好的 HTML 页面排得更清晰、更稳定、更可读。</p>
          </div>
          <a class="hero-link" href="#tracks">开始练习</a>
        </section>