diff --git "a/\345\274\240\347\247\200\350\212\263/11.15H5+CSS3/demo.html" "b/\345\274\240\347\247\200\350\212\263/211115- CSS\344\275\234\344\270\232-Canvas/demo.html"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.15H5+CSS3/demo.html"
rename to "\345\274\240\347\247\200\350\212\263/211115- CSS\344\275\234\344\270\232-Canvas/demo.html"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.17H5+CSS3/demo01.html" "b/\345\274\240\347\247\200\350\212\263/211117-CSS\344\275\234\344\270\232-CSS \351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/demo01.html"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.17H5+CSS3/demo01.html"
rename to "\345\274\240\347\247\200\350\212\263/211117-CSS\344\275\234\344\270\232-CSS \351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213/demo01.html"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.18H5+CSS3/demo.html" "b/\345\274\240\347\247\200\350\212\263/211118-CSS\344\275\234\344\270\232-\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/demo.html"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.18H5+CSS3/demo.html"
rename to "\345\274\240\347\247\200\350\212\263/211118-CSS\344\275\234\344\270\232-\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210/demo.html"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.19H5+CSS3/demo01.html" "b/\345\274\240\347\247\200\350\212\263/211119-CSS\344\275\234\344\270\232-\345\200\274\344\270\216\345\215\225\344\275\215/demo01.html"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.19H5+CSS3/demo01.html"
rename to "\345\274\240\347\247\200\350\212\263/211119-CSS\344\275\234\344\270\232-\345\200\274\344\270\216\345\215\225\344\275\215/demo01.html"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.19H5+CSS3/demo02.html" "b/\345\274\240\347\247\200\350\212\263/211119-CSS\344\275\234\344\270\232-\345\200\274\344\270\216\345\215\225\344\275\215/demo02.html"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.19H5+CSS3/demo02.html"
rename to "\345\274\240\347\247\200\350\212\263/211119-CSS\344\275\234\344\270\232-\345\200\274\344\270\216\345\215\225\344\275\215/demo02.html"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/demo01.html" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/demo01.html"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/demo01.html"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/demo01.html"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/1.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/1.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/1.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/1.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/10.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/10.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/10.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/10.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/11.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/11.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/11.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/11.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/12.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/12.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/12.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/12.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/13.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/13.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/13.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/13.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/14.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/14.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/14.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/14.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/15.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/15.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/15.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/15.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/16.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/16.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/16.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/16.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/17.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/17.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/17.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/17.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/18.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/18.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/18.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/18.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/19.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/19.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/19.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/19.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/2.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/2.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/2.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/2.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/20.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/20.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/20.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/20.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/21.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/21.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/21.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/21.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/3.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/3.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/3.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/3.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/4.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/4.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/4.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/4.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/5.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/5.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/5.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/5.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/6.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/6.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/6.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/6.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/7.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/7.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/7.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/7.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/8.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/8.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/8.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/8.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/9.jpg" "b/\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/9.jpg"
similarity index 100%
rename from "\345\274\240\347\247\200\350\212\263/11.22H5+CSS3/img/9.jpg"
rename to "\345\274\240\347\247\200\350\212\263/211122-CSS\344\275\234\344\270\232-\345\270\203\345\261\200/img/9.jpg"
diff --git "a/\345\274\240\347\247\200\350\212\263/211124-CSS\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/demo01.html" "b/\345\274\240\347\247\200\350\212\263/211124-CSS\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5f79e09248287d9bde8293644f39e766612f728a
--- /dev/null
+++ "b/\345\274\240\347\247\200\350\212\263/211124-CSS\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/demo01.html"
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+  
+        .all{
+            display: flex;
+            width: 600px;
+            height: 300px;
+            margin: auto;
+            
+            flex-direction: row;
+            flex-wrap: wrap;
+            
+        }
+        .box{
+            
+            width: 95px;
+            height: 95px;
+            background-color: #E7E7E7;
+            
+            border-radius: 10%;
+            box-shadow: 0px  5px  2px #888888  ;
+            object-fit: contain;
+            margin: 16px;
+            padding: 4px;
+            
+        }
+        .item{
+            display: block;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background-color: black;
+            box-shadow: inset 0 3px #111, inset 0 -3px #555;
+          }
+          #box1 {
+            display: flex; /*弹性布局*/
+            justify-content: center; /*上下居中*/
+          }
+          #box1 .item{
+              align-self: center;/*左右居中*/
+          } 
+          #box2 {
+              display: flex;
+              flex-direction: row; /*作为一行，水平地显示弹性项目。*/
+              justify-content: space-between;
+          }
+          #box2 .item:nth-child(2){
+              align-self: flex-end;
+          }
+          #box3 {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+          }
+          #box3 .item:nth-child(2){
+              align-self: center;
+          }
+          #box3 .item:nth-child(3){
+            align-self: flex-end;
+          }
+          #box4 {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: space-between; 
+          }
+           #box4 .item:nth-child(1) {
+            margin-right: 40px;
+            margin-bottom: 50px;
+            }
+           #box4 .item:nth-child(3) {
+            margin-right: 40px;
+        }
+           #box5{
+               display: flex;
+               flex-direction: row;
+                flex-wrap: wrap;
+                justify-content: space-between;
+                align-self: center;
+           }
+           #box5 .item:nth-child(1){
+            margin-right: 40px; 
+           }
+           #box5 .item:nth-child(3){
+               margin-left: 36px;
+               margin-right: 36px;
+               align-self: center;
+           }
+           #box6 {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+            justify-content: space-between; 
+            align-content: space-around;  
+           }
+         
+
+        #box9 {
+            display: flex;
+            flex-wrap: wrap;
+            flex-direction: column;
+            align-content: space-around;
+            justify-content: space-between;
+        }
+      
+          
+
+
+            
+            
+    </style>
+</head>
+<body>
+    <div class="all">
+        <div class="box" id="box1">
+            <div class="item"></div>
+        </div>
+        <div class="box" id="box2">
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+        <div class="box" id="box3">
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+        <div class="box" id="box4">
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+        <div class="box" id="box5">
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+        <div class="box" id="box6">
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+        <div class="box" id="box9">
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+         </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\347\247\200\350\212\263/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo01.html" "b/\345\274\240\347\247\200\350\212\263/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e119f1d43716a467ec687ad329f172c0f5bdda23
--- /dev/null
+++ "b/\345\274\240\347\247\200\350\212\263/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo01.html"
@@ -0,0 +1,234 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <style>
+    #box{ 
+        width:150px; 
+        height:150px; 
+        border-radius: 15px; 
+        margin:10px;
+        border:2px black solid; 
+        background-color: gray;
+        display: grid;
+        grid-template-rows: repeat(3 , 1fr);
+        grid-template-columns: repeat(3 , 1fr);
+        grid-template-areas:
+        "a1 a2 a3"
+        "a4 a5 a6"
+        "a7 a8 a9";
+        justify-items: center;
+        align-items: center;
+    }
+    #box div{ 
+        width:20px; 
+        height:20px; 
+        border-radius: 50%; background:black;
+        grid-area: a5;
+    }
+
+    #box2 { 
+        width:150px; 
+        height:150px; 
+        border-radius: 15px; 
+        margin:10px;
+        border:2px black solid;
+        background-color: gray; 
+        display: grid;
+        grid-template-rows: repeat(3 , 1fr);
+        grid-template-columns: repeat(3 , 1fr);
+        grid-template-areas:
+        "a1 a2 a3"
+        "a4 a5 a6"
+        "a7 a8 a9";
+        justify-items: center;
+        align-items: center;
+    }
+    #box2 div{ 
+        width:20px; 
+        height:20px; 
+        border-radius: 50%; 
+        background:black;
+    }
+    #box2 div:nth-of-type(2){ 
+        grid-area: a9; 
+    }
+
+    #box3{ 
+        width:150px; 
+        height:150px;
+        border-radius: 15px; 
+        margin:10px;
+        border:2px black solid; 
+        background-color: gray;
+        display: grid;
+        grid-template-rows: repeat(3 , 1fr);
+        grid-template-columns: repeat(3 , 1fr);
+        grid-template-areas:
+        "a1 a2 a3"
+        "a4 a5 a6"
+        "a7 a8 a9";
+        justify-items: center;
+        align-items: center;
+    }
+    #box3 div{ 
+        width:20px; 
+        height:20px; 
+        border-radius: 50%; 
+        background: black;
+    }
+    #box3 div:nth-of-type(2){ 
+        grid-area: a5; 
+    }
+    #box3 div:nth-of-type(3){ 
+        grid-area: a9; 
+    }
+
+    #box4{ 
+        width:150px; 
+        height:150px; 
+        border-radius: 15px; 
+        margin:10px;
+        border:2px black solid; 
+        background-color: gray;
+        display: grid;
+        grid-template-rows: repeat(3 , 1fr);
+        grid-template-columns: repeat(3 , 1fr);
+        grid-template-areas:
+        "a1 a2 a3"
+        "a4 a5 a6"
+        "a7 a8 a9";
+        justify-items: center;
+        align-items: center;
+    }
+    #box4 div{ 
+        width:20px; 
+        height:20px; 
+        border-radius: 
+        50%; background:black;
+    }
+    #box4 div:nth-of-type(2){ 
+        grid-area: a3; 
+    }
+    #box4 div:nth-of-type(3){ 
+        grid-area: a7; 
+    }
+    #box4 div:nth-of-type(4){ 
+        grid-area: a9; 
+    }
+    #box5{ 
+        width:150px; 
+        height:150px;
+        border-radius: 15px; 
+        margin:10px; 
+        border:2px black solid; 
+        background-color: gray;
+        display: grid;
+        grid-template-rows: repeat(3 , 1fr);
+        grid-template-columns: repeat(3 , 1fr);
+        grid-template-areas:
+        "a1 a2 a3"
+        "a4 a5 a6"
+        "a7 a8 a9";
+        justify-items: center;
+        align-items: center;
+    }
+    #box5 div{ 
+        width:20px; 
+        height:20px; 
+        border-radius: 50%; 
+        background:black;
+    }
+    #box5 div:nth-of-type(2){ 
+        grid-area: a3; 
+    }
+    #box5 div:nth-of-type(3){ 
+        grid-area: a5;
+    }
+    #box5 div:nth-of-type(4){ 
+        grid-area: a7; 
+    }
+    #box5 div:nth-of-type(5){ 
+        grid-area: a9; 
+    }
+    #box6{ 
+        width:150px; 
+        height:150px; 
+        border:2px black solid; 
+        background-color: gray;
+        border-radius: 15px; 
+        margin:10px;
+        display: grid;
+        grid-template-rows: repeat(3 , 1fr);
+        grid-template-columns: repeat(3 , 1fr);
+        grid-template-areas:
+        "a1 a2 a3"
+        "a4 a5 a6"
+        "a7 a8 a9";
+        justify-items: center;
+        align-items: center;
+    }
+    #box6 div{ 
+        width:20px; 
+        height:20px; 
+        border-radius: 50%; 
+        background:black;
+    }
+    #box6 div:nth-of-type(2){ 
+        grid-area: a3; 
+    }
+    #box6 div:nth-of-type(3){ 
+        grid-area: a4; 
+    }
+    #box6 div:nth-of-type(4){ 
+        grid-area: a6; 
+    }
+    #box6 div:nth-of-type(5){ 
+        grid-area: a7; 
+    }
+    #box6 div:nth-of-type(6){ 
+        grid-area: a9; 
+    }
+    </style>
+</head>
+<body>
+    <div id="box">
+        <div></div>
+    </div>
+    <div id="box2">
+        <div></div>
+        <div></div>
+    </div>
+    <div id="box3">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div id="box4">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div id="box5">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div id="box6">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\347\247\200\350\212\263/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo02.html" "b/\345\274\240\347\247\200\350\212\263/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..36fc37f143168d1410b0fd16f8d2ea0ca850156a
--- /dev/null
+++ "b/\345\274\240\347\247\200\350\212\263/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo02.html"
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .box{
+        width: 35%;
+        height: 450px;
+        font-size: 50px;
+        color: white;
+        margin: auto;
+        display: grid;
+        grid-template-columns: repeat(12,1fr);
+        grid-template-rows: repeat(3,0.25fr);
+    }
+    .box div:nth-child(1){
+        background-color: red;
+        grid-row: 1/2;
+        grid-column: 1/7;
+        
+    }
+    .box div:nth-child(2){
+        background-color: green;
+        grid-column: 7/13;
+        grid-row: 1/2;
+    }
+    .box div:nth-child(3){
+        background-color: #008080;
+        grid-row: 2/3;
+        grid-column: 1/5;
+        
+    }
+    .box div:nth-child(4){
+        background-color: yellow;
+        grid-column: 5/9;
+        grid-row: 2/3;
+    }
+    .box div:nth-child(5){
+        grid-column: 9/13;
+        grid-row: 2/3;
+        background-color: orange;
+    }
+    .box div:nth-child(6){
+        background-color: rgb(255,192,203);
+        grid-row: 3/4;
+        grid-column: 1/4;
+    }
+    .box div:nth-child(7){
+        grid-column: 4/7;
+        grid-row: 3/4;
+        background-color: purple;
+    }
+    .box div:nth-child(8){
+        background-color: blue;
+        grid-row: 3/4;
+        grid-column: 7/10;
+        
+    }
+    .box div:nth-child(9){
+        background-color: black;
+        grid-column: 10/13;
+        grid-row: 3/4;
+    }
+    .box div:nth-child(10){
+        background-color: red;
+        grid-column: 1/7;
+    }
+    .box div:nth-child(11){
+        background-color: green;
+        grid-column: 7/13;
+    }
+</style>
+<body>
+    <div class="box">
+        <div class="item">50%</div>
+        <div class="item">50%</div>
+        <div class="item">33%</div>
+        <div class="item">33%</div>
+        <div class="item">33%</div>
+        <div class="item">25%</div>
+        <div class="item">25%</div>
+        <div class="item">25%</div>
+        <div class="item">25%</div>
+        <div class="item">50%</div>
+        <div class="item">50%</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\347\247\200\350\212\263/211126-CSS\344\275\234\344\270\232-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo.html" "b/\345\274\240\347\247\200\350\212\263/211126-CSS\344\275\234\344\270\232-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d8186af9ff8b595fa88f50fb87ad0868c4e5e733
--- /dev/null
+++ "b/\345\274\240\347\247\200\350\212\263/211126-CSS\344\275\234\344\270\232-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo.html"
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+        .clock {
+            width: 250px;
+            height: 250px;
+            border-radius: 50%;
+            border: 5px solid #000;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50% ,-50%);
+            z-index: 1;
+        }
+        .center {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: black;
+            position: absolute;
+            left: 50%;
+            top:50%;
+            transform: translate(-50%, -50%);
+            z-index: 6;
+        }
+        .hours {
+            width: 8px;
+            height: 50px;
+            background-color: black;
+            border-radius: 50%;
+            position: absolute;
+            top: 75px;
+            left: 121px;
+            z-index: 3;
+
+            transform-origin: bottom;
+            animation: clockrotate 43200s steps(43200) infinite;
+            }
+        .minutes {
+            width: 5px;
+            height: 80px;
+            background-color: gray;
+            border-radius: 50%;
+            position: absolute;
+            top: 45px;
+            left: 122px;
+            z-index: 4;
+
+            transform-origin: bottom;
+            animation: clockrotate 3600s steps(3600) infinite;
+            
+        }
+        .seconds{
+            width: 3px;
+            height: 100px;
+            background-color: red;
+            border-radius: 50%;
+            position: absolute;
+            top: 25px;
+            left: 123px;
+            z-index: 5;
+
+            transform-origin: bottom;
+            animation: clockrotate 60s steps(60) infinite;
+        }
+        .bar {
+           width: 10px;
+           height: 250px;
+           background-color: gray; 
+           position: absolute;
+           left: 120px;
+           background-color: rgb(180,175,175);
+        }
+        .clock div:nth-child(2){
+            transform: rotate(30deg);
+        }
+        .clock div:nth-child(3) {
+            transform: rotate(60deg);
+        }
+
+        .clock div:nth-child(4) {
+            transform: rotate(90deg);
+            ;
+        }
+
+        .clock div:nth-child(5) {
+            transform: rotate(120deg);
+        }
+
+        .clock div:nth-child(6) {
+            transform: rotate(150deg);
+        }
+        .inner {
+            width: 220px;
+            height: 220px;
+            border-radius: 50%;
+            background-color: white;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50% ,-50%);
+            z-index: 2;
+
+        }
+        @keyframes clockrotate {
+            form {}
+            to {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="clock">
+        <!-- 时间刻度 -->
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+        <div class="bar"></div>
+
+        <div class="inner"></div>
+        <div class="center"></div>
+        <div class="hours"></div>
+        <div class="minutes"></div>
+        <div class="seconds"></div>
+
+        
+    </div>
+</body>
+</html>
\ No newline at end of file