diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.17/demo01.html" "b/\345\220\264\351\233\262\346\263\211/2021.11.17/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..782c10f68f160b498423181f2ffd910dcf35bf90
--- /dev/null
+++ "b/\345\220\264\351\233\262\346\263\211/2021.11.17/demo01.html"
@@ -0,0 +1,152 @@
+<!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-sizing: border-box;
+            padding: 0;
+            margin: 0;
+        }
+        body {
+            background: #eee;
+        }
+        @keyframes run {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+        #太极 {
+            width: 400px;
+            height: 400px;
+            border-radius: 50%;
+            position: relative;
+            overflow: hidden;
+            animation: run 0s infinite linear;
+            box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+        }
+        @media (max-width: 500px) {
+            #太极 {
+            width: 200px;
+            height: 200px;
+            }
+        }
+        #太极>div:first-child {
+            width: 50%;
+            position: absolute;
+            left: 0;
+            height: 100%;
+            background: black;
+        }
+        #太极>div:nth-child(2) {
+            width: 50%;
+            position: absolute;
+            right: 0;
+            height: 100%;
+            background: white;
+        }
+        #太极>div:nth-child(3) {
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            left: 50%;
+            margin-left: -100px;
+            background: black;
+            border-radius: 50%;
+        }
+        @media (max-width: 500px) {
+            #太极>div:nth-child(3) {
+                width: 100px;
+                height: 100px;
+                margin-left: -50px;
+            }
+        }
+
+        #太极>div:nth-child(4) {
+            /* border: 10px solid green; */
+            position: absolute;
+            width: 200px;
+            height: 200px;
+            right: 50%;
+            bottom: 0;
+            margin-right: -100px;
+            background: white;
+            border-radius: 50%;
+        }
+        @media (max-width: 500px) {
+            #太极>div:nth-child(4) {
+                width: 100px;
+                height: 100px;
+                margin-right: -50px;
+            }
+        }
+
+        #太极>div:nth-child(5) {
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            left: 50%;
+            top: 75px;
+            margin-left: -25px;
+            background: white;
+            border-radius: 50%;
+        }
+        @media (max-width: 500px) {
+            #太极>div:nth-child(5) {
+            width: 25px;
+            height: 25px;
+            top: 37.5px;
+            margin-left: -12.5px;
+            }
+        }
+
+        #太极>div:nth-child(6) {
+            /* border: 10px solid green; */
+            position: absolute;
+            width: 50px;
+            height: 50px;
+            left: 50%;
+            bottom: 75px;
+            margin-right: -25px;
+            background: black;
+            border-radius: 50%;
+        }
+        @media (max-width: 500px) {
+            #太极>div:nth-child(6) {
+            width: 25px;
+            height: 25px;
+            bottom: 37.5px;
+            margin-right: -12.5px;
+            }
+        }
+        #太极-wrapper {
+            /* border: 1px solid red; */
+            height: 100vh;  /*viewpoint height*/
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        #描述 {
+            margin-top: 1em;
+        }
+    </style>
+</head>
+<body>
+    <div id="太极-wrapper">
+        <div id="太极">
+            <div></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\220\264\351\233\262\346\263\211/2021.11.18/demo01.html" "b/\345\220\264\351\233\262\346\263\211/2021.11.18/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e8ac100792347b8728810c8258c27b1490d7740a
--- /dev/null
+++ "b/\345\220\264\351\233\262\346\263\211/2021.11.18/demo01.html"
@@ -0,0 +1,71 @@
+<!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 #a{
+            white-space: normal;
+        }
+        .box1 #b{
+            white-space: nowrap;
+        }
+        .box1 #c{
+            white-space: pre;
+        }
+        .box1 #d{
+            white-space: pre-wrap;
+        }
+        .box1 #e{
+            white-space: pre-line;
+        }
+        .box1 #f{
+            white-space: break-spaces;
+        }
+        .box1 #g{
+            white-space: inherit;
+        }
+    </style>
+</head>
+<body>
+    <h1>white-space</h1>
+    <div class="box1">
+        <h2>white-space: normal</h2>
+        <p>连续的空白符会被合并，换行符会被当作空白符来处理。换行在填充「行框盒子(line boxes)」时是必要。</p>
+        <p id="a">Life is full of confusing and disordering Particular time, a particular location, Do the arranged thing of tenmillion time in the brain, Step by step , the life is hard to avoid delicacy and stiffness No enthusiasm forever,No unexpected happening of surprising and pleasing So, only silently ask myself in mind  Next happiness, whenwill come?</p>
+        <br>
+        <h2>white-space: nowrap</h2>
+        <p>和 normal 一样，连续的空白符会被合并。但文本内的换行无效。</p>
+        <p id="b">Life is full of confusing and disordering Particular time, a particular location, Do the arranged thing of tenmillion time in the brain, Step by step , the life is hard to avoid delicacy and stiffness No enthusiasm forever,No unexpected happening of surprising and pleasing So, only silently ask myself in mind  Next happiness, whenwill come?</p>
+        <br>
+        <h2>white-space: pre</h2>
+        <p>连续的空白符会被保留。在遇到换行符或者"br"元素时才会换行</p>
+        <p id="c">Life is full of confusing and disordering Particular time, 
+a particular location, Do the arranged thing of tenmillion time in the brain, Step by step ,
+the life is hard to avoid delicacy and stiffness No enthusiasm forever,
+No unexpected happening of surprising and pleasing So, 
+only silently ask myself in mind  Next happiness, whenwill come?</p>
+        <br>
+        <h2>white-space: pre-wrap</h2>
+        <p>连续的空白符会被保留。在遇到换行符或者"br"元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。</p>
+        <p id="d">Life is full of confusing and disordering Particular time,          a particular location, Do the arranged thing of tenmillion time in the brain, Step by step , the life is hard to avoid delicacy and stiffness No enthusiasm forever,No unexpected happening of surprising and pleasing So, only silently ask myself in mind  Next happiness, whenwill come?</p>
+        <br>
+        <h2>white-space: pre-line</h2>
+        <p>连续的空白符会被合并。在遇到换行符或者"br"元素，或者需要为了填充「行框盒子(line boxes)」时会换行。</p>
+        <p id="e">Life is full of confusing and disordering Particular time,          a particular location, Do the arranged thing of tenmillion time in the brain, Step by step , the life is hard to avoid delicacy and stiffness No enthusiasm forever,No unexpected happening of surprising and pleasing So, only silently ask myself in mind  Next happiness, whenwill come?</p>
+        <br>
+        <h2>white-space:break-spaces</h2>
+        <p>与 pre-wrap的行为相同，除了：
+            1.任何保留的空白序列总是占用空间，包括在行尾。
+            2.每个保留的空格字符后都存在换行机会，包括空格字符之间。
+            3.这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）</p>
+            <p id="f">Life is full of confusing and disordering Particular time,          a particular location, Do the arranged thing of tenmillion time in the brain, Step by step , the life is hard to avoid delicacy and stiffness No enthusiasm forever,No unexpected happening of surprising and pleasing So, only silently ask myself in mind  Next happiness, whenwill come?</p>
+        <br>
+        <h2>white-space: inherit</h2>
+        <p>	规定应该从父元素继承 white-space 属性的值。</p>
+        <p id="g">Life is full of confusing and disordering Particular time,          a particular location, Do the arranged thing of tenmillion time in the brain, Step by step , the life is hard to avoid delicacy and stiffness No enthusiasm forever,No unexpected happening of surprising and pleasing So, only silently ask myself in mind  Next happiness, whenwill come?</p>
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.19/demo02.html" "b/\345\220\264\351\233\262\346\263\211/2021.11.19/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3b06250bc2cfd49ceaf47c3bdad5ea98ee752305
--- /dev/null
+++ "b/\345\220\264\351\233\262\346\263\211/2021.11.19/demo02.html"
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			:root {
+				/* 定义RGB变量 */
+				--red: 44;
+				--green: 135;
+				--blue: 255;
+				/* 文字颜色变色的临界值，建议0.5~0.6 */
+				--threshold: 0.5;
+				/* 深色边框出现的临界值，范围0~1，推荐0.8+*/
+				--border-threshold: 0.8;
+			}
+
+			#box {
+				width: 800px;
+				height: 230px;
+				border: 1px solid gainsboro;
+				background-color: antiquewhite;
+				overflow: hidden;
+			}
+
+			#rgb {
+				width: 300px;
+				height: 100px;
+				text-align: center;
+				margin: 20px auto;
+				line-height: 100px;
+				border: 1px solid #cccccc;
+				/* rgb这个盒子的背景颜色由这三个颜色的值改变 */
+				background-color: rgb(var(--red), var(--green), var(--blue));
+				/* calc()`函数用语动态计算长度值 */
+				--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);
+				/* --lightness=(red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255; */
+				color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -99999%));
+			}
+
+			p {
+				/* 浮动 */
+				float: left;
+				width: 250px;
+				text-align: center;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="box">
+			<div id="rgb"></div>
+			<p style="color: red; font-weight: 700;">R：<input type="range" min="0" max="255" value="33" name="red" id="r"></p>
+			<p style="color: green; font-weight: 700;">G：<input type="range" min="0" max="255" value="33" name="green" id="g"></p>
+			<p style="color: blue; font-weight: 700;">B：<input type="range" min="0" max="255" value="33" name="blue" id="b"></p>
+		</div>
+		<script type="text/javascript">
+			//获取到这些元素或者元素值
+			var rgb = document.getElementById('rgb');
+			var red = document.getElementById('r').value;
+			var green = document.getElementById('g').value;
+			var blue = document.getElementById('b').value;
+			//rgb括号的值
+			rgb.innerHTML = "rgb(" + red + "," + green + "," + blue + ")";
+			//获取按钮
+			var colors = document.querySelectorAll('input');
+			console.log(colors);
+			//forEach循环RGB
+			colors.forEach(function(e) {
+				//addEventListener添加
+				e.addEventListener('input', function() {
+					var red = document.getElementById('r').value;
+					var green = document.getElementById('g').value;
+					var blue = document.getElementById('b').value;
+					//rgb盒子的颜色
+					rgb.style.background = "rgb(" + red + "," + green + "," + blue + ")";
+					//显示rgb括号里的值
+					rgb.innerHTML = "rgb(" + red + "," + green + "," + blue + ")";
+					// var div = document.getElementById('div')
+					//设定属性
+					rgb.style.setProperty('--' + this.name, this.value);
+				})
+			})
+		</script>
+	</body>
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/demo01.html" "b/\345\220\264\351\233\262\346\263\211/2021.11.22/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..29728087d8f8b9c6964c7a0583a717fc24c2bfbe
--- /dev/null
+++ "b/\345\220\264\351\233\262\346\263\211/2021.11.22/demo01.html"
@@ -0,0 +1,42 @@
+<!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>
+    body{
+        background-color:lightgoldenrodyellow;
+    }
+    .parent{
+        width: 100%;
+        column-count: 4;
+        column-gap: 10px;
+    }
+  
+    img{
+        width: 100%;
+        border-radius: 10px;
+        border: 2px solid rgba(255, 255, 255, .3) ;
+        margin: 5px 0 5px 0;
+    }
+</style>
+<body>
+    <div class="parent">
+        <div class="chliden"><img src="img/1.jpg" alt=""></div>
+        <div class="chliden"><img src="img/2.jpg" alt=""></div>
+        <div class="chliden"><img src="img/3.jpg" alt=""></div>
+        <div class="chliden"><img src="img/4.jpg" alt=""></div>
+        <div class="chliden"><img src="img/5.jpg" alt=""></div>
+        <div class="chliden"><img src="img/6.jpg" alt=""></div>
+        <div class="chliden"><img src="img/1.jpg" alt=""></div>
+        <div class="chliden"><img src="img/2.jpg" alt=""></div>
+        <div class="chliden"><img src="img/3.jpg" alt=""></div>
+        <div class="chliden"><img src="img/4.jpg" alt=""></div>
+        <div class="chliden"><img src="img/5.jpg" alt=""></div>
+        <div class="chliden"><img src="img/6.jpg" alt=""></div>
+
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/1.jpg" "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7dfceb2375b10874eac08547a63a31ab99fc6047
Binary files /dev/null and "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/1.jpg" differ
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/2.jpg" "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..4066e1510ed9d271a7b4535ebd53941ede1a7022
Binary files /dev/null and "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/2.jpg" differ
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/3.jpg" "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0edc98cb21aae5c159a5ce3f3b346c9443366f34
Binary files /dev/null and "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/3.jpg" differ
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/4.jpg" "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..9b18212afa05f44e2cbd15590241e6c65a05ec46
Binary files /dev/null and "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/4.jpg" differ
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/5.jpg" "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..686aee005a407b26c4525d986ea0a6d798a56f46
Binary files /dev/null and "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/5.jpg" differ
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/6.jpg" "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..9ef31bbf3d7b8e4acd530e1c3b445b6e457a4edb
Binary files /dev/null and "b/\345\220\264\351\233\262\346\263\211/2021.11.22/img/6.jpg" differ
