diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-15HTML+CSS5\347\232\204\347\254\254\344\270\211\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-15 CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213\347\232\204\347\254\254\344\270\211\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
similarity index 100%
rename from "\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-15HTML+CSS5\347\232\204\347\254\254\344\270\211\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
rename to "\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-15 CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213\347\232\204\347\254\254\344\270\211\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-16HTML+CSS5\347\232\204\347\254\254\345\233\233\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-16 \350\203\214\346\231\257\343\200\201\350\276\271\346\241\206\345\222\214\346\226\207\346\234\254\347\211\271\346\225\210\347\232\204\347\254\254\345\233\233\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
similarity index 100%
rename from "\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-16HTML+CSS5\347\232\204\347\254\254\345\233\233\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
rename to "\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-16 \350\203\214\346\231\257\343\200\201\350\276\271\346\241\206\345\222\214\346\226\207\346\234\254\347\211\271\346\225\210\347\232\204\347\254\254\345\233\233\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-18HTML+CSS5\347\232\204\347\254\254\344\272\224\346\254\241\350\257\276\344\275\234\344\270\232/demo0.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-18 CSS\345\270\203\345\261\200\347\232\204\347\254\254\344\272\224\346\254\241\350\257\276\344\275\234\344\270\232/demo0.html"
similarity index 100%
rename from "\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-18HTML+CSS5\347\232\204\347\254\254\344\272\224\346\254\241\350\257\276\344\275\234\344\270\232/demo0.html"
rename to "\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-18 CSS\345\270\203\345\261\200\347\232\204\347\254\254\344\272\224\346\254\241\350\257\276\344\275\234\344\270\232/demo0.html"
diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-18HTML+CSS5\347\232\204\347\254\254\344\272\224\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-18 CSS\345\270\203\345\261\200\347\232\204\347\254\254\344\272\224\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
similarity index 100%
rename from "\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-18HTML+CSS5\347\232\204\347\254\254\344\272\224\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
rename to "\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-18 CSS\345\270\203\345\261\200\347\232\204\347\254\254\344\272\224\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-22 Flex\345\270\203\345\261\200\347\232\204\347\254\254\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-22 Flex\345\270\203\345\261\200\347\232\204\347\254\254\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2a10811d8471fd0407db7a0895afda15e078b1e2
--- /dev/null
+++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-22 Flex\345\270\203\345\261\200\347\232\204\347\254\254\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"	
@@ -0,0 +1,193 @@
+<!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>骰子1-6</title>
+</head>
+<style>
+    .parent{
+        display: flex;
+        
+    }
+
+    .one,.two,.three,.four,.five,.six,.nine{
+        display: flex;
+        height: 150px;
+        width: 150px;
+        border: 1px solid white;
+        margin: auto;
+        border-radius: 20px;
+        background: #E7E7E7;
+    }
+
+    .one {
+        align-items: center;
+        justify-content: center;
+        box-shadow:4px 4px 3px 4px  #d7d7d7;
+
+
+    }
+
+    .point {
+        height: 30px;
+        width: 30px;
+        background: black;
+        border: 1px solid white;
+        border-radius: 50%;
+        margin: 7px;
+        box-shadow: 2px 2px 5px 2px #d7d7d7;
+    }
+
+    .two {
+        justify-content: space-between;
+        box-shadow:4px 4px 3px 4px #d7d7d7;
+    }
+
+    .two .point:nth-of-type(2) {
+        align-self: flex-end;
+        box-shadow: 2px 2px 5px 2px #d7d7d7;
+    }
+
+    .three {
+        justify-content: space-between;
+        box-shadow:4px 4px 3px 4px #d7d7d7;
+    }
+
+    .three .point:nth-of-type(2) {
+        align-self: center;
+        box-shadow: 2px 2px 5px 2px #d7d7d7;
+    }
+
+    .three .point:nth-of-type(3) {
+        align-self: flex-end;
+        box-shadow: 2px 2px 5px 2px #d7d7d7;
+    }
+
+    .four {
+        justify-content: space-between;
+        box-shadow:4px 4px 3px 4px #d7d7d7;
+    }
+
+    .four .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        
+    }
+
+    .four .point:nth-of-type(2) {
+        align-self: flex-end;
+        justify-content: space-start;
+        box-shadow: 2px 2px 5px 2px #d7d7d7;
+    }
+
+    .five {
+        justify-content: space-between;
+        box-shadow:4px 4px 3px 4px #d7d7d7;
+    }
+
+    .five .column {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+     
+    }
+
+    .five .column:nth-of-type(2) {
+        align-self: center;
+      
+    }
+    .six {
+        justify-content: space-between;
+        box-shadow:4px 4px 3px 4px #d7d7d7;
+    }
+    .six .column{
+        display: flex;
+        flex-direction: column;
+       justify-content: space-between;
+    }
+    .nine{
+        justify-content: space-between;
+        box-shadow:4px 4px 3px 4px  #d7d7d7;
+    }
+    .nine .column{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+</style>
+
+<body>
+    <div class="parent">
+        <div class=one>
+            <div class="point"></div>
+        </div>
+        <div class="two">
+            <div class="point"></div>
+            <div class="point"></div>
+        </div>
+        <div class="three">
+            <div class="point"></div>
+            <div class="point"></div>
+            <div class="point"></div>
+        </div>
+
+        <div class="four">
+            <div class="column">
+                <div class="point"></div>
+                <div class="point"></div>
+            </div>
+            <div class="column">
+                <div class="point"></div>
+                <div class="point"></div>
+            </div>
+        </div>
+        <div class="five">
+            <div class="column">
+                <div class="point"></div>
+                <div class="point"></div>
+            </div>
+            <div class="column">
+                <div class="point"></div>
+            </div>
+            <div class="column">
+                <div class="point"></div>
+                <div class="point"></div>
+            </div>
+        </div>
+        <div class="six">
+            <div class="column">
+                <div class="point"></div>
+                <div class="point"></div>
+                <div class="point"></div>
+            </div>
+            <div class="column">
+                <div class="point"></div>
+                <div class="point"></div>
+                <div class="point"></div>
+            </div>
+        </div>
+        <div class="nine">
+            <div class="column">
+                <div class="point"></div>
+                <div class="point"></div>
+                <div class="point"></div>
+            </div>
+            <div class="column">
+                <div class="point"></div>
+                <div class="point"></div>
+                <div class="point"></div>
+            </div>
+            <div class="column">
+                <div class="point"></div>
+                <div class="point"></div>
+                <div class="point"></div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-22 Flex\345\270\203\345\261\200\347\232\204\347\254\254\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/\345\244\247\347\245\236.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-22 Flex\345\270\203\345\261\200\347\232\204\347\254\254\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/\345\244\247\347\245\236.html"
new file mode 100644
index 0000000000000000000000000000000000000000..00a02146a31b18fac10af083ad94718d057a3210
--- /dev/null
+++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-22 Flex\345\270\203\345\261\200\347\232\204\347\254\254\344\270\203\346\254\241\350\257\276\344\275\234\344\270\232/\345\244\247\347\245\236.html"	
@@ -0,0 +1,163 @@
+<!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;
+        }
+
+        .main{
+            margin: auto;
+            margin-top: 200px;
+            background-color: darkgrey;
+            display: flex;
+            width: 750px;
+            height: 130px;
+        }
+
+        div[class $="face"]{
+            width: 105px;
+            height: 105px;
+            background-color: mintcream;
+            margin: 10px;
+            border-radius: 8px;
+        }
+
+        .dot{
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            background-color: black;
+            display: flex;
+            margin: 5px;
+        }
+
+        .first-face{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        .second-face{
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .second-face .dot:nth-of-type(2){
+            align-self: flex-end;
+        }
+
+        .third-face{
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .third-face .dot:nth-of-type(2){
+            align-self: center;
+        }
+
+        .third-face .dot:nth-of-type(3){
+            align-self: flex-end;
+        }
+
+        .fourth-face{
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .fourth-face .column{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }     
+
+        .fifth-face{
+            display: flex;
+            justify-content: space-between;
+        }
+        
+        .fifth-face .column{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        .fifth-face .column:nth-of-type(2){
+            align-self: center;
+        }
+
+        .sixth-face{
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .sixth-face .column .dot:nth-of-type(2){
+            margin-top: 12px;
+            margin-bottom: 12px;            
+        }
+    </style>
+</head>
+
+<body>
+    <div class="main">
+        <div class="first-face">
+            <span class="dot"></span>
+        </div>
+
+        <div class="second-face">
+            <span class="dot"></span>
+            <span class="dot"></span>
+        </div>
+
+        <div class="third-face">
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+        </div>
+
+        <div class="fourth-face">
+            <div class="column">
+                <span class="dot"></span>
+                <span class="dot"></span>
+            </div>
+            <div class="column">
+                <span class="dot"></span>
+                <span class="dot"></span>
+            </div>
+        </div>
+
+        <div class="fifth-face">
+            <div class="column">
+                <span class="dot"></span>
+                <span class="dot"></span>
+            </div>
+            <div class="column">
+                <span class="dot"></span>
+            </div>
+            <div class="column">
+                <span class="dot"></span>
+                <span class="dot"></span>
+            </div>
+        </div>
+
+        <div class="sixth-face">
+            <div class="column">
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+            </div>
+            <div class="column">
+                <span class="dot"></span>
+                <span class="dot"></span>
+                <span class="dot"></span>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-23 Grid\345\270\203\345\261\200\347\232\204\347\254\254\345\205\253\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-23 Grid\345\270\203\345\261\200\347\232\204\347\254\254\345\205\253\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..50be9cbbc5f29edd65e45149e08fbeb274441b18
--- /dev/null
+++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-23 Grid\345\270\203\345\261\200\347\232\204\347\254\254\345\205\253\346\254\241\350\257\276\344\275\234\344\270\232/demo01.html"	
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>grid布局骰子</title>
+</head>
+<body>
+    <style>
+        .parent{
+            display: grid;
+            grid-template-columns: repeat(auto-fill,190px);
+            justify-items: center;
+            align-items: center;
+        }
+        .point{
+            height: 30px;
+            width: 30px;
+            background: black;
+            border-radius: 50%;
+            border: 1px solid white;
+            margin: 8px;
+            box-shadow: 2px 2px 5px 2px #d7d7d7;
+ 
+        }
+        
+        .one,.two,.three,.four,.five,.six,.nine{
+            display: grid;
+            width: 150px;
+            height: 150px;
+            background-color:#E7E7E7 ;
+            border-radius: 20px;
+            border: 1px solid white;
+            grid-template-columns: repeat(3,33.33%);
+            grid-template-rows: repeat(3,33.33%);
+            align-items: center;
+            justify-items: center;
+            grid-template-areas: 'a b c'
+                                'd e f'
+                                'h i j';
+             box-shadow:4px 4px 3px 4px  #d7d7d7;
+            margin: 10px;
+        }
+        .one .point:nth-child(1){
+            /* grid-column: 2/3;
+            grid-row: 2/3; */
+            grid-area: e;
+            box-shadow:4px 4px 3px 4px  #d7d7d7;
+        }
+        .two .point:nth-child(2){
+            grid-area: j;
+        }
+        .three .point:nth-child(2){
+            grid-area: e;
+        }
+        .three .point:nth-child(3){
+            grid-area: j;
+        }
+        .four .point:nth-child(2){
+            grid-area: c;
+        }
+        .four .point:nth-child(3){
+            grid-area: h;
+        }
+        .four .point:nth-child(4){
+            grid-area: j;
+        }
+        .five .point:nth-child(2){
+            grid-area: c;
+        }
+        .five .point:nth-child(3){
+            grid-area: e;
+        }
+        .five .point:nth-child(4){
+            grid-area: h;
+        }
+        .five .point:nth-child(5){
+            grid-area: j;
+        }
+        .six .point:nth-child(2){
+            grid-area: d;
+        }
+        .six .point:nth-child(3){
+            grid-area: h;
+        }
+        .six .point:nth-child(4){
+            grid-area: c;
+        }
+        .six .point:nth-child(5){
+            grid-area: f;
+        }
+        .six .point:nth-child(6){
+            grid-area: j;
+        }
+    </style>
+    
+    <div class="parent">
+        <div class="one">
+            <div class="point"></div>
+        </div>
+        <div class="two">
+            <div class="point"></div>
+            <div class="point"></div>
+        </div>
+        <div class="three">
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+    </div>
+    <div class="four">
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+    </div>
+    <div class="five">
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+    </div>
+    <div class="six">
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+    </div>
+    <div class="nine">
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+        <div class="point"></div>
+    </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-23 Grid\345\270\203\345\261\200\347\232\204\347\254\254\345\205\253\346\254\241\350\257\276\344\275\234\344\270\232/demo02.html" "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-23 Grid\345\270\203\345\261\200\347\232\204\347\254\254\345\205\253\346\254\241\350\257\276\344\275\234\344\270\232/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fc089f18f93d607f9f73e2e96e69915832960b55
--- /dev/null
+++ "b/\345\215\242\351\224\246\350\261\252/\345\244\247\344\272\214\344\270\212\345\255\246\346\234\237HTML+CSS5\347\232\204\344\275\234\344\270\232/2021-11-23 Grid\345\270\203\345\261\200\347\232\204\347\254\254\345\205\253\346\254\241\350\257\276\344\275\234\344\270\232/demo02.html"	
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>实现基本网格布局</title>
+</head>
+<body>
+    <style>
+        body{
+            display: grid;
+            justify-items: center;
+            align-items: center;
+        }
+    </style>
+    <div style="width: 300px; height: 300px; display: grid; grid-template-rows: repeat(2,20%)60%;
+    color: white; font-size: 10px; ">
+    <div style="display: grid; grid-template-columns: repeat(2,50%);">
+        <div style="background-color: red;">50%</div>
+        <div style="background-color: green;">50%</div>
+    </div>
+    <div style="display: grid;grid-template-columns: repeat(3,1fr);">
+    <div style="background-color: teal;">33%</div>
+    <div style="background-color:yellow ;">33%^</div>
+    <div style="background-color:orange ;">33%</div>
+    </div>
+    <div style="display: grid;grid-template-columns: repeat(4,1fr);grid-template-rows:repeat(3,1fr);
+    grid-template-areas: 'a b c d' 'e e f f ' 'e e f f ';">
+   <div style="background-color: pink; grid-area: a;">25%</div>
+   <div style="background-color: purple; grid-area: b;">25%</div>
+   <div style="background-color: blue; grid-area: c;">25%</div>
+   <div style="background-color: black; grid-area: d;">25%</div>
+   <div style="background-color: red; grid-area: e ;">50%</div>
+   <div style="background-color: green; grid-area: f ;">50%</div>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file