Merge branch 'main' of https://gitea.lililibra.cn/rou/front-end-example

2026-03-13 11:09:44 +08:00
parent 877acb5a8f 710852d8d0
commit 69a4ae3178
9 changed files with 425 additions and 11 deletions
--- a/02-css-layout/02-box-model-card/starter.html
+++ b/02-css-layout/02-box-model-card/starter.html
@@ -4,7 +4,59 @@
    <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(226, 239, 251);
+         display: flex;
+        justify-content: center;
+      }
+
+      .course-card{
+       
+        background-color: white;
+        border-radius: 20px;
+        margin-top: 50px;
+        width: 400px;
+        height: 300px;
+      }
+
+      .tag{
+        background-color: rgba(85, 128, 177, 0.223);
+        border-radius: 20px;
+        margin-top: 30px;
+        margin-left: 30px;
+        padding-top: 5px;
+        padding-left: 8px;
+        padding-bottom: 5px;
+        padding-right: 5px;
+        width: 90px;
+        color: blue;
+      }
+
+      h1{
+        margin-left: 30px;
+      }
+
+      p{
+        margin-left: 30px;
+      }
+
+      .actions{
+        background-color: blue;
+        width: 90px;
+        height: 35px;
+        margin-left: 30px;
+        padding-top: 13px;
+        border-radius: 10px;
+      }
+
+      a{
+        color: white;
+        text-decoration: none;
+        padding-left: 13px;
+        
+      }
+    </style>
  </head>
  <body>
    <article class="course-card">
--- a/02-css-layout/03-flex-layout/starter.html
+++ b/02-css-layout/03-flex-layout/starter.html
@@ -4,7 +4,40 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Flex 布局</title>
-    <link rel="stylesheet" href="./starter.css" />
+    <style>
+      body{
+        background-color: rgb(244, 247, 251);
+      }
+     
+      .panel{
+        display: flex;
+        justify-content: space-around;
+        align-content: center;
+        padding: 40px;
+        gap: 20px;
+      }
+
+      .item{
+        flex:1;
+        background-color: white;
+        border: 1px solid rgba(102, 95, 95, 0.11);
+        border-radius: 20px;
+        padding: 20px 10px 15px 20px;
+        margin-top: 250px;
+        
+      }
+
+      a{
+        text-decoration: none;
+        color: green;
+        font-weight: 600;
+        margin-bottom: 20px;
+      }
+
+      p{
+        margin-bottom: 30px;
+      }
+    </style>
  </head>
  <body>
    <section class="panel">
--- a/02-css-layout/04-position-badge/starter.html
+++ b/02-css-layout/04-position-badge/starter.html
@@ -4,7 +4,55 @@
    <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(247, 240, 230);
+        display: flex;
+        justify-content: center;
+      }
+
+      .card{
+        border: 1px solid rgba(254, 184, 114, 0.469);
+        border-radius: 15px;
+        background-color: white;
+        width: 400px;
+        height: 230px;
+        box-shadow: 10px 10px 15px rgba(252, 219, 186, 0.469);
+        margin-top: 150px;
+       position: relative;
+      }
+
+      .badge{
+        background-color: rgb(253, 133, 21);
+        color: white;
+        padding: 5px 8px 5px 10px;
+        border-radius: 20px;
+        width: 40px;
+        position: absolute;
+        right: 20px;
+        top: -10px;
+        
+      }
+      
+      h1{
+        margin-left: 20px;
+        margin-top: 50px;
+      }
+
+      p{
+        margin-left: 20px;
+        margin-bottom: 50px;
+      }
+
+      a{
+        text-decoration: none;
+        color: rgb(165, 75, 42);
+        font-weight: 800;
+        margin-bottom: 5px;
+        margin-left: 20px;
+        padding-bottom: 5px;
+      }
+    </style>
  </head>
  <body>
    <article class="card">
--- 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>
--- a/02-css-layout/06-display-and-flow/starter.html
+++ b/02-css-layout/06-display-and-flow/starter.html
@@ -4,7 +4,41 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Display 与文档流</title>
-    <link rel="stylesheet" href="./starter.css" />
+    <style>
+      body{
+        background-color: rgb(247, 251, 253);
+        display: flex;
+        justify-content: center;
+      }
+
+      .wrap{
+        padding: 40px 0px ;
+        margin-left: 0px;
+        width: min(800px, calc(100% - 40px));
+      }
+
+      .tag{
+        background-color: rgb(210, 231, 251);
+        border-radius: 20px;
+        width: 120px;
+        height: 80px;
+        padding: 8px 15px 8px 15px;
+        margin-left: 0px;
+      }
+
+      .hide-me{
+        visibility: hidden;
+      }
+
+      .box{
+        border: 1px solid rgb(202, 212, 222);
+        width: 100%;
+        padding: 15px;
+        margin-left: 0px;
+        margin-top: 23px;
+        background-color: white;
+      }
+    </style>
  </head>
  <body>
    <section class="wrap">
--- a/02-css-layout/07-selectors-and-pseudo-classes/starter.html
+++ b/02-css-layout/07-selectors-and-pseudo-classes/starter.html
@@ -4,7 +4,23 @@
    <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{
+        padding: 30px 30px;
+      }
+
+      a{
+        text-decoration: none;
+        color: rgb(87, 81, 81);
+        font-weight: 700;
+        margin-right: 20px;
+      }
+
+      .li{
+        color: rgb(167, 113, 13);
+        font-weight: 700;
+      }
+    </style>
  </head>
  <body>
    <nav class="menu">
@@ -16,7 +32,7 @@
    <section class="list">
      <p>学习建议</p>
      <ul>
-        <li>先学结构</li>
+        <li class="li">先学结构</li>
        <li>再学布局</li>
        <li>最后学交互</li>
      </ul>
--- a/02-css-layout/08-overflow-and-sizing/starter.html
+++ b/02-css-layout/08-overflow-and-sizing/starter.html
@@ -4,7 +4,31 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Overflow 与尺寸</title>
-    <link rel="stylesheet" href="./starter.css" />
+    <style>
+      body{
+        background-color: rgb(241, 247, 250);
+        display: flex;
+        justify-content: center;
+        padding-top: 40px;
+      }
+
+      .panel{
+        border: 1px solid rgb(207, 216, 227);
+        border-radius: 20px;
+        background-color: white;
+        width: 300px;
+        height: 170px;
+        padding-top: 20px;
+        padding-left: 20px;
+        padding-right: 20px;
+        overflow-y: auto;
+      }
+
+      p{
+        height: 150px;
+        letter-spacing: 1px;
+      }
+    </style>
  </head>
  <body>
    <div class="panel">
--- a/02-css-layout/09-grid-layout/starter.html
+++ b/02-css-layout/09-grid-layout/starter.html
@@ -4,7 +4,32 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid 布局</title>
-    <link rel="stylesheet" href="./starter.css" />
+    <style>
+      body{
+        background-color: aliceblue;
+        display: flex;
+        justify-content: center;
+      }
+      
+      .grid{
+        display: grid;
+        grid-template-columns: repeat(2,1fr);
+        column-gap: 10px;
+        row-gap: 20px;
+        padding-top: 150px;
+      }
+
+      .cell{
+        background-color: white;
+        border: 1px solid rgb(208, 228, 252);
+        border-radius: 20px;
+        text-align: center;
+        width: 300px;
+        padding-top: 25px;
+        padding-bottom: 25px;
+        font-weight: 700;
+      }
+    </style>
  </head>
  <body>
    <section class="grid">
--- a/02-css-layout/10-fixed-and-sticky/starter.html
+++ b/02-css-layout/10-fixed-and-sticky/starter.html
@@ -4,7 +4,29 @@
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fixed 与 Sticky</title>
-    <link rel="stylesheet" href="./starter.css" />
+    <style>
+      body{
+        background-color: rgb(248, 252, 255);
+        display: flex;
+        justify-content: center;
+      }
+
+      a{
+        text-decoration: none;
+        color: white;
+        background-color: rgb(5, 94, 5);
+        border-radius: 20px;
+        padding: 10px 20px;
+        position: fixed;
+        right: 20px;
+        bottom: 20px;
+        font-size: 18px;
+      }
+
+      .page{
+        wi
+      }
+    </style>
  </head>
  <body>
    <a class="help" href="#">帮助</a>