diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.24/demo.html" "b/\351\231\210\346\231\223\345\275\254/2021.11.24/demo.html"
index d163e36d199becd498a74e24862a1632bdb2a5f7..d55c6ad2446d720751a8ee56e6fff4b32abbd553 100644
--- "a/\351\231\210\346\231\223\345\275\254/2021.11.24/demo.html"
+++ "b/\351\231\210\346\231\223\345\275\254/2021.11.24/demo.html"
@@ -7,8 +7,8 @@
     <style>
         .box1{
             display: flex;
-            width:110px;
-            height:100px;
+            width:130px;
+            height:130px;
             background-color: #E7E7E7;
             box-shadow:0 5px 5px  #D6D6D6;
             align-items: center; 
@@ -24,8 +24,8 @@
         }
         .box2{
             display: flex;
-            width: 110px;
-            height: 100px;
+            width: 130px;
+            height: 130px;
             background-color: #E7E7E7;
             box-shadow: 0 5px 5px #D6D6D6;
             border-radius: 10px;
@@ -50,8 +50,8 @@
         }
         .box3{
             display: flex;
-            width: 110px;
-            height: 100px;
+            width: 130px;
+            height: 130px;
             background-color: #E7E7E7;
             box-shadow: 0 5px 5px #D6D6D6;
             border-radius: 10px;
@@ -73,8 +73,8 @@
         }
         .box4{
             display: flex;
-            width: 110px;
-            height: 100px;
+            width: 130px;
+            height: 130px;
             background-color: #E7E7E7;
             box-shadow: 0 5px 5px #D6D6D6;
             border-radius: 10px;
@@ -101,11 +101,14 @@
             bottom:0 ;
         }
         .box5{
-            width: 110px;
-            height: 100px;
+            display: flex;
+            width: 130px;
+            height: 130px;
             background-color: #E7E7E7;
             box-shadow: 0 5px 5px #D6D6D6;
             border-radius: 10px;
+            flex-direction: column;
+            position: relative;
         }
         .five1,.five2,.five3,.five4,.five5{
             width: 20px;
@@ -115,7 +118,133 @@
             box-shadow: 0 3px 3px #535353;
             margin: 5px 5px 5px 5px;
         }
-    </style>
+        .five1{
+            position: absolute;
+           top: 50px;
+            left: 50px;
+        }
+        .five2{
+            align-self: flex-end;
+            right:0;
+            position: absolute;
+        }
+        .fiv3{
+            position: absolute;
+        }
+        .five4{
+            position: absolute;
+            align-self: flex-end;
+           right: 0;
+            bottom:0;
+        }
+        .five5{
+            position: absolute;
+            bottom: 0;
+        }
+        .box6{
+            display: flex;
+            width: 130px;
+            height: 130px;
+            background-color: #E7E7E7;
+            box-shadow: 0 5px 5px #D6D6D6;
+            border-radius: 10px;
+            position: relative;
+        }
+        .six1,.six2,.six3,.six4,.six5,.six6{
+            width: 20px;
+            height: 20px;
+            background-color: #333333;
+            border-radius: 10px;
+            box-shadow: 0 3px 3px #535353;
+            margin: 5px 5px 5px 5px; 
+        }
+        .six1{
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+        .six2{
+            position: absolute;
+           left:100px;
+           top: 0;
+        }
+        .six3{
+            position: absolute;
+            align-self: center;
+        }
+        .six4{
+            position: absolute;
+            left: 100px;
+         align-self: center;
+        }
+        .six5{
+            position: absolute;
+            align-self: flex-end;
+            bottom: 0;
+        }
+        .six6{
+            position: absolute;
+           align-self: flex-end;
+           left: 100px;
+           bottom: 0;
+        }
+        .box9{
+            display: flex;
+            width: 130px;
+            height: 130px;
+            background-color: #E7E7E7;
+            box-shadow: 0 5px 5px #D6D6D6;
+            border-radius: 10px; 
+            position: relative;
+        }
+        .nine1,.nine2,.nine3,.nine4,.nine5,.nine6,.nine7,.nine8,.nine9{
+            width: 20px;
+            height: 20px;
+            background-color: #333333;
+            border-radius: 10px;
+            box-shadow: 0 3px 3px #535353;
+            margin: 5px 5px 5px 5px; 
+        }
+        .nine2{
+            position: absolute;
+            left: 50px;
+        }
+        .nine3{
+            position: absolute;
+            left:100px ;
+        }
+        .nine4{
+            position: absolute;
+            top:50px;
+        }
+        .nine5{
+            position: absolute;
+            top:50px;
+            left: 50px;
+        }
+        .nine6{
+            position: absolute;
+            top:50px;
+            left: 100px;
+        }
+        .nine7{
+            position: absolute;
+            align-self: flex-end;
+            bottom: 0;
+        }
+        .nine8{
+            position: absolute;
+            align-self: flex-end;
+            left: 50px;
+            bottom: 0;
+        }
+        .nine9{
+            position: absolute;
+            align-self: flex-end;
+            left: 100px;
+            bottom: 0;
+        }
+  </style>
 </head>
 <body>
     <div class="box1">
@@ -147,5 +276,26 @@
         <div class="five4"></div>
         <div class="five5"></div>
     </div>
+    <br>
+    <div class="box6">
+        <div class="six1"></div>
+        <div class="six2"></div>
+        <div class="six3"></div>
+        <div class="six4"></div>
+        <div class="six5"></div>
+        <div class="six6"></div>
+    </div>
+    <br>
+    <div class="box9">
+        <div class="nine1"></div>
+        <div class="nine2"></div>
+        <div class="nine3"></div>
+        <div class="nine4"></div>
+        <div class="nine5"></div>
+        <div class="nine6"></div>
+        <div class="nine7"></div>
+        <div class="nine8"></div>
+        <div class="nine9"></div>
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.25/demo.html" "b/\351\231\210\346\231\223\345\275\254/2021.11.25/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0c092f3d89c1e2c6c49b7580aa1e4684c72406dd
--- /dev/null
+++ "b/\351\231\210\346\231\223\345\275\254/2021.11.25/demo.html"
@@ -0,0 +1,229 @@
+<!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>
+        .box{
+            display: grid;
+            width: 130px;
+            height: 130px;
+            border-radius: 10px;
+            background-color: aquamarine;
+            position: relative;
+        }
+        .one1{
+            width: 20px;
+            height: 20px;
+            border-radius: 50px;
+            background-color: black;
+            align-self: center;
+            justify-self: center;
+        }
+        .two1,.two2{
+            width: 20px;
+            height: 20px;
+            border-radius: 50px;
+            background-color: black;
+            margin: 5px 5px 5px 5px;
+        }
+        .two2{
+            align-self: flex-end;
+            justify-self: flex-end;
+        }
+        .three1,.three2,.three3{
+            width: 20px;
+            height: 20px;
+            border-radius: 50px;
+            background-color: black;
+            margin: 5px 5px 5px 5px;
+        }
+        .three2{
+            align-self: center;
+            justify-self: center;
+        }
+        .three3{
+            align-self: self-end;
+            justify-self: self-end;
+        }
+        .four1,.four2,.four3,.four4{
+            width: 20px;
+            height: 20px;
+            border-radius: 50px;
+            background-color: black;
+            margin: 5px 5px 5px 5px;
+        }
+        .four2{
+            justify-self: self-end;
+            position: absolute;
+            top: 0;
+        }
+        .four3{
+            position: absolute;
+            align-self:flex-end;
+            bottom: 0;
+        }
+        .four4{
+            position: absolute;
+            justify-self: self-end;
+            bottom: 0;
+        }
+        .five1,.five2,.five3,.five4,.five5{
+            width: 20px;
+            height: 20px;
+            border-radius: 50px;
+            background-color: black;
+            margin: 5px 5px 5px 5px;
+        }
+        .five2{
+            position: absolute;
+            justify-self: self-end;
+            top: 0;
+        }
+        .five3{
+            position: absolute;
+            align-self: center;
+            justify-self: center;
+        }
+        .five4{
+            position: absolute;
+            align-self: flex-end;
+            bottom: 0;
+        }
+        .five5{
+            position: absolute;
+            justify-self: self-end;
+            bottom: 0;
+        }
+        .six1,.six2,.six3,.six4,.six5,.six6{
+            width: 20px;
+            height: 20px;
+            border-radius: 50px;
+            background-color: black;
+            margin: 5px 5px 5px 5px;
+        }
+        .six2{
+            position: absolute;
+            justify-self: flex-end;
+            top: 0;
+        }
+        .six3{
+            position: absolute;
+            align-self: center;
+        }
+        .six4{
+            position: absolute;
+            justify-self: flex-end;
+            align-self: center;
+        }
+        .six5{
+            position: absolute;
+            align-self: flex-end;
+        }
+        .six6{
+            position: absolute;
+            justify-self: flex-end;
+            bottom: 0;
+        }
+        .nine1,.nine2,.nine3,.nine4,.nine5,.nine6,.nine7,.nine8,.nine9{
+            width: 20px;
+            height: 20px;
+            border-radius: 50px;
+            background-color: black;
+            margin: 5px 5px 5px 5px; 
+        }
+        .nine2{
+            position: absolute;
+            justify-self: center;
+            top: 0;
+        }
+        .nine3{
+            position: absolute;
+            justify-self:flex-end;
+            top: 0;
+        }
+        .nine4{
+            position: absolute;
+            align-self: center;
+        }
+        .nine5{
+            position: absolute;
+            justify-self: center;
+            align-self:center;
+        }
+        .nine6{
+            position: absolute;
+            align-self: center;
+            justify-self:flex-end;
+        }
+        .nine7{
+            position: absolute;
+            bottom: 0;
+            align-self: flex-end;
+        }
+        .nine8{
+            position: absolute;
+             bottom: 0;
+            justify-self:center;
+        }
+        .nine9{
+            position: absolute;
+            justify-self: flex-end;
+            bottom: 0;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="one1"></div>
+    </div>
+    <br>
+    <div class="box">
+        <div class="two1"></div>
+        <div class="two2"></div>
+    </div>
+    <br>
+    <div class="box">
+        <div class="three1"></div>
+        <div class="three2"></div>
+        <div class="three3"></div>
+    </div>
+    <br>
+    <div class="box">
+        <div class="four1"></div>
+        <div class="four2"></div>
+        <div class="four3"></div>
+        <div class="four4"></div>
+    </div>
+    <br>
+    <div class="box">
+        <div class="five1"></div>
+        <div class="five2"></div>
+        <div class="five3"></div>
+        <div class="five4"></div>
+        <div class="five5"></div>
+    </div>
+    <br>
+    <div class="box">
+        <div class="six1"></div>
+        <div class="six2"></div>
+        <div class="six3"></div>
+        <div class="six4"></div>
+        <div class="six5"></div>
+        <div class="six6"></div>
+    </div>
+    <br>
+    <div class="box">
+        <div class="nine1"></div>
+        <div class="nine2"></div>
+        <div class="nine3"></div>
+        <div class="nine4"></div>
+        <div class="nine5"></div>
+        <div class="nine6"></div>
+        <div class="nine7"></div>
+        <div class="nine8"></div>
+        <div class="nine9"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.25/demo1.html" "b/\351\231\210\346\231\223\345\275\254/2021.11.25/demo1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..359b32e5fc8f2965c5c6c5968abde13bd2872c46
--- /dev/null
+++ "b/\351\231\210\346\231\223\345\275\254/2021.11.25/demo1.html"
@@ -0,0 +1,110 @@
+<!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>
+        .box{
+            display: grid;
+            width: 400px;
+            height: 400px;
+            grid-template-rows:repeat(2,20%) 60%;
+        }
+		.box1{
+			display: grid;
+			grid-template-columns: repeat(2,50%);
+		}
+		.box2{
+			 display: grid;
+			 grid-template-columns: repeat(3,1fr);
+		}
+		.box3{
+			   display: grid;
+			   grid-template-columns: repeat(4,1fr);
+			   grid-template-rows: repeat(3,1fr);
+			   grid-template-areas: 'a b c d'
+			                        'A A C C'
+			                        'A A C C';
+		}
+        .item1{
+            background-color: red;
+            color: white;
+            font-size:50px;
+        }
+        .item2{
+            background-color: green;
+            color: white;
+            font-size:50px;
+        }
+        .item3{
+            background-color: #008080;
+			color: white;
+			font-size:50px;
+        }
+		.item4{
+			background-color: yellow;
+			color: white;
+			font-size:50px;
+		}
+		.item5{
+			background-color: orange;
+			color: white;
+			font-size:50px;
+		}
+        .item6{
+            background-color: #FFC0CB;
+            color: white;
+            font-size:50px;
+        }
+        .item7{
+            background-color: #800080;
+            color: white;
+            font-size:50px;
+        }
+        .item8{
+            background-color: #0000FF;
+            color: white;
+            font-size:50px;
+        }
+        .item9{
+            background-color: #000000;
+            color: white;
+            font-size:50px;
+        }
+		.item10{
+			background-color:red;
+			color: white;
+			font-size:50px;
+			grid-area: A;
+		}
+		.item11{
+			background-color:green;
+			color: white;
+			font-size:50px;
+			grid-area: C;
+		}
+    </style>
+</head>
+<body>
+   <div class="box">
+		<div class="box1">
+			<div class="item1">50%</div>
+			<div class="item2">50%</div>
+		</div>
+		<div class="box2">
+			<div class="item3">33%</div>
+			<div class="item4">33%</div>
+			<div class="item5">33%</div>
+		</div>
+		<div class="box3">
+			<div class="item6">25%</div>
+			<div class="item7">25%</div>
+			<div class="item8">25%</div>
+			<div class="item9">25%</div>
+			<div class="item10">50%</div>
+			<div class="item11">50%</div>
+		</div>
+    </div>
+</body>
+</html>
\ No newline at end of file