diff --git "a/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/flex.html" "b/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/flex.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d01f779ffe857c350a556704ae244cec10844ce0
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/flex.html"
@@ -0,0 +1,11 @@
+<!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>
+<body>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/\351\252\260\345\255\220.html" "b/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/\351\252\260\345\255\220.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7fa3df50292a43f86d3242082698e1f3f66532a7
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/\351\252\260\345\255\220.html"
@@ -0,0 +1,235 @@
+<!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>
+         body{
+            background-color:aliceblue;
+        }
+        /* 点 */
+        .item{
+            width:24px;
+            height: 24px;
+            border-radius: 50%;
+            margin:4px;
+            background-color: #333;
+            /* box-shadow: 5px 5px rgb(153, 153, 153); */
+            /* flex-basis: 50%;
+            justify-content: space-between;
+            display: flex; */
+        }
+
+        /* 第一个骰子 */
+       
+        .box1{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;  /*阴影*/
+            display: flex;
+            justify-content: center; /*居中*/
+            align-items: center; /*垂直居中对齐*/
+
+        }
+       
+
+        /*第二个骰子  */
+        .box2{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+            display: flex;
+            justify-content: space-between; /*两端对齐。between是中间的意思*/
+        }
+
+        .box2 .item:nth-child(2){
+            align-self: flex-end;
+        }
+
+        /* 第三个骰子 */
+        .box3{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+            display: flex;
+            justify-content: space-between;  /*两端对齐。between是中间的意思*/
+        }
+
+        .item:nth-child(2){
+            align-self: center;
+        }
+        .item:nth-child(3){
+            align-self: flex-end;
+        }
+
+        /* 第四个骰子 */
+        .box4{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+            display: flex;
+            justify-content: space-around;
+           
+        }
+        .box4-top{
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+            
+        }
+        .box4-buttom{
+            display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+        }
+        <!--  /* 第五个骰子 */ -->
+        .box5{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+           align-content: space-between;
+           display: flex;
+        }
+        .box5-top{
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+            
+        }
+        .box5-center{
+            align-self: center;
+        }
+        .box5-buttom{
+            display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+        }
+
+
+        <!--  /* 第六个骰子 */ -->
+        .box6{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;/*宽度不足时，换行显示。但是是从下往上开始，原本换行在下面的子项仙子啊跑到上面。*/
+            align-content: space-between;
+            flex-direction: column;
+        }
+
+        <!--  /* 第九个骰子 */ -->
+        .box9{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;/*宽度不足时，换行显示。但是是从下往上开始，原本换行在下面的子项仙子啊跑到上面。*/
+            align-content: space-between;
+            flex-direction: column;
+        }
+          
+    </style>
+</head>
+<body>
+    <!--  /* 第一个骰子 */ -->
+    <div class="">
+    <div class="box1">
+        <div class="item"></div>
+    </div>
+
+    <!--  /* 第二个骰子 */ -->
+    <div class="box2">
+        <div class="item"></div>
+        <div class="item"></div>
+    </div>
+
+    <!--  /* 第三个骰子 */ -->
+    <div class="box3">
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+    </div>
+
+    <!--  /* 第四个骰子 */ -->
+    <div class="box4">
+        <div class="box4-top"> 
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>    
+        <div class="box4-buttom"> 
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+    </div>
+
+    <!--  /* 第五个骰子 */ -->
+    <div class="box5">
+        <div class="box5-top"> 
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+        <div class="box5-center">
+            <div class="item"></div>
+        </div>    
+        <div class="box5-buttom"> 
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+    </div>
+
+    <!--  /* 第六个骰子 */ -->
+    <div class="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="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/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\347\275\221\346\240\274.html" "b/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\347\275\221\346\240\274.html"
new file mode 100644
index 0000000000000000000000000000000000000000..13f6ecd9ad12b6f01d720ddf07889b25fb7565c2
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\347\275\221\346\240\274.html"	
@@ -0,0 +1,62 @@
+<!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>
+        *{
+            padding: 0;
+            margin: 0;
+            font-size: 50px;
+            color: #fff;
+        }
+        .couten{
+            display: grid;
+            width: 600px;
+            height: 700px;
+            background-color: #f2f2f2;
+        }
+        .one{
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }
+        .two{
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+        .three{
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+        }
+        .four{
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }
+    </style>
+  
+</head>
+<body>
+    <div class="couten">
+        <div class="one">
+            <div style="background-color: red;">50%</div>
+            <div style="background-color: green;">50%</div>
+        </div>
+        <div class="two">
+            <div style="background-color: yellow;">33%</div>
+            <div style="background-color: brown;">33%</div>
+            <div style="background-color: blue;">33%</div>
+        </div>
+        <div class="three">
+            <div style="background-color: skyblue;">25%</div>
+            <div style="background-color: pink;">25%</div>
+            <div style="background-color: plum;">25%</div>
+            <div style="background-color: purple;">25%</div>
+        </div>
+        <div class="four">
+            <div style="background-color: orange;">50%</div>
+            <div style="background-color: royalblue;">50%</div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\351\252\260\345\255\220.html" "b/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\351\252\260\345\255\220.html"
new file mode 100644
index 0000000000000000000000000000000000000000..77f709b37e53151de6037aef7e73a7be24da486b
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\351\252\260\345\255\220.html"	
@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .item{
+            width: 20px;
+            height: 20px;
+            background-color:black;
+            border-radius: 50%;
+            margin: 5px;
+            align-items: center;
+            justify-items: center;
+       }
+        .box1{
+            border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i";
+            margin: 2px;
+        }
+        .box1 div{
+            grid-area: e;
+        }
+       .box2{
+        border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i";
+            margin: 2px;
+        }
+        .box2 div:nth-of-type(2){
+            grid-area: i;
+        }
+
+        .box3{
+            border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            margin: 2px;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i";
+           
+        }
+        .box3 div:nth-of-type(2){
+            grid-area: e;
+        }
+        .box3 div:nth-of-type(3){
+            grid-area: i;
+        }
+
+        .box4{
+            border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            margin: 2px;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i"; 
+        }
+        .box4 div:nth-of-type(2){
+            grid-area: c;
+            
+        }
+        .box4 div:nth-of-type(3){
+            grid-area: g;  
+        }
+        .box4 div:nth-of-type(4){
+            grid-area: i;  
+        }
+
+        .box5{
+            border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            margin: 2px;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i"; 
+        }
+        .box5 div:nth-of-type(2){
+            grid-area: c;
+            
+        }
+        .box5 div:nth-of-type(3){
+            grid-area: e;  
+        }
+        .box5 div:nth-of-type(4){
+            grid-area: g;  
+        }
+        .box5 div:nth-of-type(5){
+            grid-area: i;  
+        }
+
+        .box6{
+            border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            margin: 2px;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i"; 
+        }
+        .box6 div:nth-of-type(2){
+            grid-area: c;
+            
+        }
+        .box6 div:nth-of-type(3){
+            grid-area: d;  
+        }
+        .box6 div:nth-of-type(4){
+            grid-area: f;  
+        }
+        .box6 div:nth-of-type(5){
+            grid-area: g;  
+        }
+        .box6 div:nth-of-type(6){
+            grid-area: i;  
+        }
+    </style>
+</head>
+<body>
+    <div class="">
+        <div class="box1">
+            <div class="item"></div>
+        </div>
+    
+        <!--  /* 第二个骰子 */ -->
+        <div class="box2">
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+    
+        <!--  /* 第三个骰子 */ -->
+        <div class="box3">
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+    
+        <!--  /* 第四个骰子 */ -->
+        <div class="box4">
+                <div class="item"></div>
+                <div class="item"></div>
+                <div class="item"></div>
+                <div class="item"></div>
+        </div>
+    
+        <!--  /* 第五个骰子 */ -->
+        <div class="box5">
+                <div class="item"></div>
+                <div class="item"></div>
+                <div class="item"></div> 
+                <div class="item"></div>
+                <div class="item"></div>
+        </div>
+    
+        <!--  /* 第六个骰子 */ -->
+        <div class="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> 
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\345\277\203\351\222\260/2021.11.26 CSS3\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273_09/\346\227\266\351\222\237.html" "b/\351\273\204\345\277\203\351\222\260/2021.11.26 CSS3\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273_09/\346\227\266\351\222\237.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4b14e73067277b555864e5398895a7f0766e5896
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.11.26 CSS3\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273_09/\346\227\266\351\222\237.html"	
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .clock{
+            width: 300px;
+            height: 300px;
+            border-radius: 50%;
+            margin: 10px auto;
+            position: absolute;
+            border: 1px solid black;
+        }
+        .d{
+            width: 30px;
+            height: 30px;
+            background-color: pink;
+            border-radius: 50px;
+            position: absolute;
+            transform: translate(130px,130px);
+        }
+        .x{
+            width: 10px;
+            height: 50px;
+            background-color: blue;
+            position: absolute;
+            transform: translate(140px,145px);
+        }
+        .f{
+            width: 6px;
+            height: 80px;
+            background-color: bisque;
+            position: absolute;
+            transform: translate(140px,145px);
+        }
+        .m{
+            width: 2px;
+            height: 100px;
+            background-color: beige;
+            position: absolute;
+            left: 145px;
+            top: 50px;
+            transform-origin: bottom;
+            animation: mz 60s steps(60) infinite;
+        }
+        @keyframes mz{
+            from{}
+            to{
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="clock">
+        <div class=" d"></div>
+        <div class="x"></div>
+        <div class="f"></div>
+        <div class="m"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
