diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.15/demo.html" "b/\351\231\210\346\231\223\345\275\254/2021.11.15/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..13c7769fdf62f50eb4d1a8eefd2770bed1957187
--- /dev/null
+++ "b/\351\231\210\346\231\223\345\275\254/2021.11.15/demo.html"
@@ -0,0 +1,74 @@
+<!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;   
+        }   
+                    
+            #mycanvas {   
+                background: black;   
+            }  
+    </style>
+</head>
+<body>
+    <canvas id="mycanvas">
+        您的浏览器不支持canvas画布
+    </canvas>
+    <script>
+           //获取mycanvas画布   
+           var can = document.getElementById("mycanvas");   
+            var ctx = can.getContext("2d");   
+            //画布宽度   
+            var wid = window.innerWidth;   
+            //画布高度   
+            var hei = window.innerHeight;   
+            can.width = wid;   
+            can.height = hei;   
+            //雪花数目   
+            var snow = 100;   
+            //雪花坐标、半径   
+            var arr = []; //保存各圆坐标及半径   
+            for (var i = 0; i < snow; i++) {   
+                arr.push({   
+                    x: Math.random() * wid,   
+                    y: Math.random() * hei,   
+                    r: Math.random() * 10 + 1   
+                })   
+            }   
+            //画雪花   
+            function DrawSnow() {   
+                ctx.clearRect(0, 0, wid, hei);   
+                ctx.fillStyle = "white";   
+                ctx.beginPath();   
+                for (var i = 0; i < snow; i++) {   
+                    var p = arr[i];   
+                    ctx.moveTo(p.x, p.y);   
+                    ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
+                }   
+                ctx.fill();   
+                SnowFall();   
+                ctx.closePath();   
+            }   
+            //雪花飘落   
+            function SnowFall() {   
+                for (var i = 0; i < snow; i++) {   
+                    var p = arr[i];   
+                    p.y += Math.random() * 2 + 1;   
+                    if (p.y > hei) {   
+                        p.y = 0;   
+                    }   
+                    p.x += Math.random() * 2 + 1;   
+                    if (p.x > wid) {   
+                        p.x = 0;   
+                    }   
+                }   
+            }   
+            setInterval(DrawSnow, 50);   
+     </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.17/demo.html" "b/\351\231\210\346\231\223\345\275\254/2021.11.17/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e8025000b428799a214711dce0e47c140dc8b72b
--- /dev/null
+++ "b/\351\231\210\346\231\223\345\275\254/2021.11.17/demo.html"
@@ -0,0 +1,48 @@
+<!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>
+        .yinyang{
+            width:100px;
+            height: 200px;
+            border: 1px solid black; 
+            border-left-width: 100px;
+            border-radius: 100px;
+            position: relative;
+            cursor: pointer;
+            transition: 100s;
+        }
+        .yinyang:hover{
+            transform: rotate(20000deg);
+        }
+        .yinyang:before{
+            content: "";
+            position:absolute;
+            width:20px;
+            height: 20px;
+            border: 40px solid white;
+            left: -50px;
+            top: 100px;
+          border-radius: 50px;
+            background:black;
+        }
+        .yinyang::after{
+            content: "";
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border: 40px solid black;
+            right: 50px;
+            top: 0px;
+            border-radius: 50px;
+            background:white ;
+        }
+    </style>
+</head>
+<body>
+    <div class="yinyang"></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.18/demo.html" "b/\351\231\210\346\231\223\345\275\254/2021.11.18/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7c7f8dac119a8355887cfb3152cea3dbd54861cb
--- /dev/null
+++ "b/\351\231\210\346\231\223\345\275\254/2021.11.18/demo.html"
@@ -0,0 +1,47 @@
+<!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>
+    #whs{
+        width: 120px;
+        height: 120px;
+        border: 1px solid black;
+        white-space:pre-wrap;
+    }
+    #wob{
+        width: 120px;
+        height: 120px;
+        border: 1px solid black;
+        word-break:break-all;
+    }
+    #wow{
+        width: 120px;
+        height: 120px;
+        border: 1px solid black;
+        word-wrap:break-word;
+    }
+    #wos{
+        width: 120px;
+        height: 120px;
+        border: 1px solid black;
+        word-spacing:initial;
+    }
+    #les{
+        width: 120px;
+        height: 120px;
+        border: 1px solid black;
+        letter-spacing:normal;
+    }
+    </style>
+</head>
+<body> 
+     <div id="whs">oj hfosdhnflsdjn jlfnln</div>
+     <div id="wob">oj客户家hfosdhnflsdjnjlfnln</div>
+     <div id="wow">sdfsdgsadgfsfsdgbsag</div>
+     <div id="wos">gsadgs adgass fdfsd</div>
+     <div id="les">gsd奋斗ghsdafsa水电费fgsdafg</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.19/demo.html" "b/\351\231\210\346\231\223\345\275\254/2021.11.19/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b1d55203cdfe7db752d0ab046718d5c26f86a545
--- /dev/null
+++ "b/\351\231\210\346\231\223\345\275\254/2021.11.19/demo.html"
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+ <style>
+		:root {
+		  --red: 44;
+		  --green: 135;
+		  --blue: 255;
+		  --threshold: 0.5;
+		  --border-threshold: 0.8;
+		}
+
+		.btn {
+		  font-size: 150%;
+		  padding: .5em 2em;
+		}
+		.btn {
+		  background: rgb(var(--red), var(--green), var(--blue));
+		  --r: calc(var(--red) * 0.2126);
+		  --g: calc(var(--green) * 0.7152);
+		  --b: calc(var(--blue) * 0.0722);
+		  --sum: calc(var(--r) + var(--g) + var(--b));
+		  --lightness: calc(var(--sum) / 255);
+		  color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
+		  --border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
+		  border: .2em solid;
+		  border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
+		}
+    </style>
+	</head>
+		<body>
+	<button class="btn">我是按钮</button>
+	<p>拖动滑块，改变RGB变量：</p>
+	<p>R：<input type="range" min="0" max="255" value="44" name="red"></p>
+	<p>G：<input type="range" min="0" max="255" value="135" name="green"></p>
+	<p>B：<input type="range" min="0" max="255" value="255" name="blue"></p>
+	<script type="text/javascript">
+		var eleRanges = document.querySelectorAll('input[type="range"]');
+		Array.from(eleRanges).forEach(function (range) {
+		    range.addEventListener('input', function () {
+		        document.documentElement.style.setProperty('--' + this.name, this.value);    
+		    });
+		});
+	</script>
+	</body>
+</html>
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.22/demo.html" "b/\351\231\210\346\231\223\345\275\254/2021.11.22/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7f8821a2d8ff865baf268539940c31627335236e
--- /dev/null
+++ "b/\351\231\210\346\231\223\345\275\254/2021.11.22/demo.html"
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			.containers{
+						column-width: 400px;
+			            column-gap: 5px;
+						width: 100%;
+			}
+			.container{
+							background-color:blue;
+				            border: 1px solid plum;
+				            padding: 25px;
+				            margin: 2px;
+			}
+			img {
+			            width: 100%;
+			            padding-bottom: 0.5em;  
+			            margin-bottom:1em;   
+			        }
+		</style>
+	</head>
+	<body>
+		<div class="containers">
+			<div class="container"><img src="img/1.jpg" alt="" class="src"></div>
+			<div class="container"><img src="img/2.jpg" alt="" class="src"></div>
+			<div class="container"><img src="img/3.jpg" alt="" class="src"></div>
+			<div class="container"><img src="img/4.jpg" alt="" class="src"></div>
+			<div class="container"><img src="img/5.jpg" alt="" class="src"></div>
+			<div class="container"><img src="img/6.jpg" alt="" class="src"></div>
+			
+		</div>
+	</body>
+</html>
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.22/img/1.jpg" "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..32060bd7ae2f9b099f402c9d57827c3478297a9a
Binary files /dev/null and "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/1.jpg" differ
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.22/img/2.jpg" "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..c5af1b0db970701913fdda879ed446e86961c998
Binary files /dev/null and "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/2.jpg" differ
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.22/img/3.jpg" "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..44797792d77ddf2e62d7d0c65f233dcd9dd6ea43
Binary files /dev/null and "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/3.jpg" differ
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.22/img/4.jpg" "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4e8cd7ddd8d0cf35d937b94882bcd66f92ef414a
Binary files /dev/null and "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/4.jpg" differ
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.22/img/5.jpg" "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2506b2b4402fa5fac95557e743f883a55027ff9b
Binary files /dev/null and "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/5.jpg" differ
diff --git "a/\351\231\210\346\231\223\345\275\254/2021.11.22/img/6.jpg" "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7ec3fd7bee55736043bef6a52d9949ce39c644b5
Binary files /dev/null and "b/\351\231\210\346\231\223\345\275\254/2021.11.22/img/6.jpg" differ
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"
new file mode 100644
index 0000000000000000000000000000000000000000..d163e36d199becd498a74e24862a1632bdb2a5f7
--- /dev/null
+++ "b/\351\231\210\346\231\223\345\275\254/2021.11.24/demo.html"
@@ -0,0 +1,151 @@
+<!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>
+        .box1{
+            display: flex;
+            width:110px;
+            height:100px;
+            background-color: #E7E7E7;
+            box-shadow:0 5px 5px  #D6D6D6;
+            align-items: center; 
+            justify-content: center;
+            border-radius: 10px;
+        }
+        .one{
+            width: 20px;
+            height: 20px;
+            background-color: #333333;
+            border-radius: 10px;
+            box-shadow: 0 3px 3px #535353;
+        }
+        .box2{
+            display: flex;
+            width: 110px;
+            height: 100px;
+            background-color: #E7E7E7;
+            box-shadow: 0 5px 5px #D6D6D6;
+            border-radius: 10px;
+            justify-content:space-between;
+        }
+        .two1{
+            width: 20px;
+            height: 20px;
+            background-color: #333333;
+            border-radius: 10px;
+            box-shadow: 0 3px 3px #535353;
+            margin: 5px 5px 5px 5px;
+        }
+        .two2{
+            width: 20px;
+            height: 20px;
+            background-color: #333333;
+            border-radius: 10px;
+            box-shadow: 0 3px 3px #535353;
+            align-self:flex-end;
+            margin: 5px 5px 5px 5px;
+        }
+        .box3{
+            display: flex;
+            width: 110px;
+            height: 100px;
+            background-color: #E7E7E7;
+            box-shadow: 0 5px 5px #D6D6D6;
+            border-radius: 10px;
+            justify-content:space-between;
+        }
+        .three1,.three2,.three3{
+            width: 20px;
+            height: 20px;
+            background-color: #333333;
+            border-radius: 10px;
+            box-shadow: 0 3px 3px #535353;
+            margin: 5px 5px 5px 5px;
+        }
+        .three2{
+           align-self: center; 
+        }
+        .three3{
+            align-self: flex-end;
+        }
+        .box4{
+            display: flex;
+            width: 110px;
+            height: 100px;
+            background-color: #E7E7E7;
+            box-shadow: 0 5px 5px #D6D6D6;
+            border-radius: 10px;
+            position: relative;
+            justify-content: space-between;
+        }
+        .four1,.four2,.four3,.four4{
+            width: 20px;
+            height: 20px;
+            background-color: #333333;
+            border-radius: 10px;
+            box-shadow: 0 3px 3px #535353;
+            margin: 5px 5px 5px 5px;
+        }
+        .four3{
+            align-self:flex-end;
+            position: absolute;
+            right: 0;
+            bottom:0;
+        }
+        .four4{
+            position: absolute;
+            align-self: flex-end;
+            bottom:0 ;
+        }
+        .box5{
+            width: 110px;
+            height: 100px;
+            background-color: #E7E7E7;
+            box-shadow: 0 5px 5px #D6D6D6;
+            border-radius: 10px;
+        }
+        .five1,.five2,.five3,.five4,.five5{
+            width: 20px;
+            height: 20px;
+            background-color: #333333;
+            border-radius: 10px;
+            box-shadow: 0 3px 3px #535353;
+            margin: 5px 5px 5px 5px;
+        }
+    </style>
+</head>
+<body>
+    <div class="box1">
+        <div class="one"></div>
+    </div>
+<br>
+    <div class="box2">
+        <div class="two1"></div>
+        <div class="two2"></div>
+    </div>
+    <br>
+    <div class="box3">
+        <div class="three1"></div>
+        <div class="three2"></div>
+        <div class="three3"></div>
+    </div>
+    <br>
+    <div class="box4">
+        <div class="four1"></div>
+        <div class="four2"></div>
+        <div class="four3"></div>
+        <div class="four4"></div>
+    </div>
+    <br>
+    <div class="box5">
+        <div class="five1"></div>
+        <div class="five2"></div>
+        <div class="five3"></div>
+        <div class="five4"></div>
+        <div class="five5"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
