diff --git "a/\345\267\253\344\270\275\350\216\216/20211117/\345\212\250\346\200\201\345\244\252\346\236\201\345\233\276.html" "b/\345\267\253\344\270\275\350\216\216/20211117/\345\212\250\346\200\201\345\244\252\346\236\201\345\233\276.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5a747a31528874f55b1e3307ada8baa44b662c6c
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211117/\345\212\250\346\200\201\345\244\252\346\236\201\345\233\276.html"
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
+    <title>会动的太极图</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 8s 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 id="描述">
+            道可道，非常道
+        </div> -->
+    </div>
+</body>
+</html>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211117/\345\244\252\346\236\201\345\233\276\357\274\210CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213\357\274\211.html" "b/\345\267\253\344\270\275\350\216\216/20211117/\345\244\252\346\236\201\345\233\276\357\274\210CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213\357\274\211.html"
new file mode 100644
index 0000000000000000000000000000000000000000..268a034adfc4a5b33ec745ccc7ac0bd3783812db
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211117/\345\244\252\346\236\201\345\233\276\357\274\210CSS\351\200\211\346\213\251\345\231\250\345\222\214\347\233\222\346\250\241\345\236\213\357\274\211.html"
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			#太极 {
+				/* 给框添加一个或多个阴影 */
+				box-shadow: 0 0 30px pink;
+				/* 太极这个圆的直径 */
+				height: 400px;
+				/* 太极左半边 */
+				border-left: 200px solid #000000;
+				/* 右半边 */
+				border-right: 200px solid white;
+				/* 边框圆角,圆角半径 */
+				border-radius: 200px;
+				/* 50% */
+				/* 外边框      居中*/
+				margin: 100px auto;
+				/* 盒子宽度 */
+				width: 0;
+				position: relative;
+			}
+
+			#太极::before {
+				content: '';
+				/* display: block; */
+				width: 40px;
+				height: 40px;
+				background-color: white;
+				border-radius: 50%;
+				position: absolute;
+				left: -100px;
+				border: 80px solid #000000;
+				/* top: 50px; */
+				/* box-shadow: 0 0 0 50px black; */
+			}
+
+			#太极::after {
+				content: '';
+				/* display: block; */
+				width: 40px;
+				height: 40px;
+				background-color: black;
+				border-radius: 50%;
+				position: absolute;
+				left: -100px;
+				
+				bottom: 0px;
+				border: 80px solid white;
+				/* box-shadow: 0 0 0 50px white; */
+			}
+			
+		</style>
+	</head>
+	<body>
+		<div id="太极"></div>
+	</body>
+</html>0
\ No newline at end of file
diff --git "a/\345\267\253\344\270\275\350\216\216/20211118/letter-spacing.html" "b/\345\267\253\344\270\275\350\216\216/20211118/letter-spacing.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0959e883f62fa8521afd86c5758b19e20936cf3a
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211118/letter-spacing.html"
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			p {
+				width: 500px;
+				border: 1px solid #e1e1e1;
+			}
+		</style>
+	</head>
+	<body>
+		<h3>letter-spacing:定义的是字与字之间的距离</h3>
+		<ul>
+			<li>
+				<h4>letter-spacing:normal</h4>
+				<p style="letter-spacing: normal;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>letter-spacing:10px</h4>
+				<p style="letter-spacing:10px;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+		</ul>
+	</body>
+</html>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211118/white-space\350\276\271\346\241\206\345\222\214\347\211\271\346\225\210.html" "b/\345\267\253\344\270\275\350\216\216/20211118/white-space\350\276\271\346\241\206\345\222\214\347\211\271\346\225\210.html"
new file mode 100644
index 0000000000000000000000000000000000000000..116826c22ee94b0b9cb3480448e28c2d0b576557
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211118/white-space\350\276\271\346\241\206\345\222\214\347\211\271\346\225\210.html"
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			p {
+				width: 500px;
+				border: 1px solid #e1e1e1;
+			}
+		</style>
+	</head>
+	<body>
+		<h3>white-space</h3>
+		<ul>
+			<li>
+				<h4>white-space:normal</h4>
+				<p style="white-space: normal;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>white-space:nowrap</h4>
+				<p style="white-space: nowrap;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>white-space:pre</h4>
+				<p style="white-space: pre;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>white-space:pre-line</h4>
+				<p style="white-space: pre-line;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>white-space:per-wrap</h4>
+				<p style="white-space: pre-wrap;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+
+		</ul>
+	</body>
+</html>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211118/word-break.html" "b/\345\267\253\344\270\275\350\216\216/20211118/word-break.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c6b0143e77ade88569a4057714787b83b13d3c6a
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211118/word-break.html"
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			p {
+				width: 500px;
+				border: 1px solid #e1e1e1;
+			}
+		</style>
+	</head>
+	<body>
+		<h3>word-break:: 属性用来标明怎么样进行单词内的断句。</h3>
+		<ul>
+			<li>
+				<h4>word-break:normal</h4>
+				<p style="word-break: normal;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>word-break:break-all</h4>
+				<p style="word-break: break-all;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm\um libero rerum.</p>
+			</li>
+			<li>
+				<h4>word-break:keep-all</h4>
+				<p style="word-break: keep-all;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+		</ul>
+	</body>
+</html>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211118/word-spacing.html" "b/\345\267\253\344\270\275\350\216\216/20211118/word-spacing.html"
new file mode 100644
index 0000000000000000000000000000000000000000..babb0ae9f591dfe72f84a15efea4815ae8704017
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211118/word-spacing.html"
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			p {
+				width: 500px;
+				border: 1px solid #e1e1e1;
+			}
+		</style>
+	</head>
+	<body>
+		<h3>word-spacing:控制的是字与字之间 空格的宽度</h3>
+		<ul>
+			<li>
+				<h4>word-spacing:normal</h4>
+				<p style="word-spacing: normal;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>word-spacing:length</h4>
+				<p style="word-spacing: length;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse t   empore q  uod voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>word-spacing:inherit</h4>
+				<p style="word-spacing: inherit;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+		</ul>
+	</body>
+</html>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211118/word-wrap\357\274\210\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210\357\274\211.html" "b/\345\267\253\344\270\275\350\216\216/20211118/word-wrap\357\274\210\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210\357\274\211.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cd3bd93a60786251f93ad8991922bce646db1ca3
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211118/word-wrap\357\274\210\350\203\214\346\231\257\350\276\271\346\241\206\345\222\214\346\226\207\345\255\227\347\211\271\346\225\210\357\274\211.html"
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			p {
+				width: 500px;
+				border: 1px solid #e1e1e1;
+			}
+		</style>
+	</head>
+	<body>
+		<h3>word-warp:属性用来标明是否允许浏览器在单词内进行断句，这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。</h3>
+		<ul>
+			<li>
+				<h4>word-warp:normal</h4>
+				<p style="word-wrap: normal;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatum libero rerum.</p>
+			</li>
+			<li>
+				<h4>word-warp:break-word</h4>
+				<p style="word-wrap: break-word;">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+					Cum, esse tempore quod voluptatmmmmmmmmmmmmmmmmmmmmmmmmmmmum libero rerum.</p>
+			</li>
+		</ul>
+	</body>
+</html>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211119/\345\217\230\350\211\262\357\274\210\345\200\274\344\270\216\345\215\225\344\275\215\357\274\211.html" "b/\345\267\253\344\270\275\350\216\216/20211119/\345\217\230\350\211\262\357\274\210\345\200\274\344\270\216\345\215\225\344\275\215\357\274\211.html"
new file mode 100644
index 0000000000000000000000000000000000000000..118727ecc61fefe517bee9446cdb41ac92615764
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211119/\345\217\230\350\211\262\357\274\210\345\200\274\344\270\216\345\215\225\344\275\215\357\274\211.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="44" name="red" id="r"></p>
+			<p style="color: green; font-weight: 700;">G：<input type="range" min="0" max="255" value="135" name="green" id="g"></p>
+			<p style="color: blue; font-weight: 700;">B：<input type="range" min="0" max="255" value="255" 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>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/1.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..137f73aa02ffa20918f55203ce6c5b0106b8c022
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/1.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/10.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/10.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..9085167d74bc9c3dc0114689df25a88cbc08bc65
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/10.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/11.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/11.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..b148cf5a3d169a9f2ec753b31fea8a6a095d10c6
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/11.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/12.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/12.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5346c3bafe3a096f207764591089efdbe0461f29
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/12.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/2.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ffbadcb3915ed70cba47dc6c48789e309bae65b1
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/2.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/3.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..45dcd2f8cad9221ff96398d678c3dbf5255e6d6c
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/3.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/4.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/4.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..22b5be49e51b12403169ba7f349ad816702c268f
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/4.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/5.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/5.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..92552d23a200284d1b9afe6570a9a7d0774c63ec
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/5.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/6.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/6.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..c2dc9cbc5e7d7e6126ea67dcebd7c99af6f723ce
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/6.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/7.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/7.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..b9ad815a58c3e761750db9969045fd1e7b8aac28
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/7.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/8.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/8.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ff7695dd26586eb5a3b280434e7f7ed8b130215c
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/8.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/img/9.webp" "b/\345\267\253\344\270\275\350\216\216/20211122/img/9.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..32fc1e56dea6b921c8024d1f22e2bc2dabc8920a
Binary files /dev/null and "b/\345\267\253\344\270\275\350\216\216/20211122/img/9.webp" differ
diff --git "a/\345\267\253\344\270\275\350\216\216/20211122/\345\233\276\347\211\207\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200\357\274\210\345\270\203\345\261\200\357\274\211.html" "b/\345\267\253\344\270\275\350\216\216/20211122/\345\233\276\347\211\207\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200\357\274\210\345\270\203\345\261\200\357\274\211.html"
new file mode 100644
index 0000000000000000000000000000000000000000..142c4877a83e71b86317c67e62c28b03686c31cd
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211122/\345\233\276\347\211\207\347\200\221\345\270\203\346\265\201\345\270\203\345\261\200\357\274\210\345\270\203\345\261\200\357\274\211.html"
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			#w {
+				column-width: 400px;
+				column-gap: 5px;
+				width: 100%;
+				margin: 0 auto;
+			}
+			#t {
+			  background-color: rgb(207, 232, 220);
+			  border: 2px solid rgb(79, 185, 227);
+			  padding: 10px;
+			  margin: 0 0 1em 0;
+			  break-inside: avoid;
+			  page-break-inside: avoid; /*这个是旧属性，兼容性更好*/
+			}
+			img{
+				width: 100%;
+				padding-bottom: 1em;
+				margin-bottom: 0.5em;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="w">
+			<div id="t">
+				<img src="img/1.webp">
+			</div>
+			<div id="t">
+				<img src="img/2.webp">
+			</div>
+			<div id="t">
+				<img src="img/3.webp">
+			</div>
+			<div id="t">
+				<img src="img/4.webp">
+			</div>
+			<div id="t">
+				<img src="img/5.webp">
+			</div>
+			<div id="t">
+				<img src="img/6.webp">
+			</div>
+			<div id="t">
+				<img src="img/7.webp">
+			</div>
+			<div id="t">
+				<img src="img/8.webp">
+			</div>
+			<div id="t">
+				<img src="img/9.webp">
+			</div>
+			<div id="t">
+				<img src="img/10.webp">
+			</div>
+			<div id="t">
+				<img src="img/11.webp">
+			</div>
+			<div id="t">
+				<img src="img/12.webp">
+			</div>
+		</div>
+	</body>
+</html>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211124/\351\252\260\345\255\220.html" "b/\345\267\253\344\270\275\350\216\216/20211124/\351\252\260\345\255\220.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5fcdbee0ee2c116711514fb35b9c7ce71bc3dedb
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211124/\351\252\260\345\255\220.html"
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style>
+		    .shaizi {
+		        width: 1400px;
+		        height: 600px;
+		        margin: auto;
+		        border: 2px solid #ddd;
+		        border-radius: 10px;
+		        padding: 20px;
+		        display: flex;
+		        flex-wrap: wrap;
+		        /* flex-direction: column;; */
+		    }
+		    .item {
+		        display: block;
+		        width: 40px;
+		        height: 40px;
+		        border-radius: 50%;
+		        background-color: #666;
+		    }
+		    .box{
+		        width: 200px;
+		        height: 200px;
+		        border: 2px solid #ccc;
+		        border-radius: 10px;
+		        padding: 20px;
+		        display: flex;
+		    }
+		    .top {
+		        display: flex;
+		        width: 1400px;
+		        justify-content: space-around;
+		    }
+		    .bottom{
+		        display: flex;
+		        width: 1400px;
+		        justify-content: space-around;
+		    }
+		    .box1 {
+		        justify-content: center;
+		        align-items: center;
+		    }
+		    .box2 {
+		        justify-content: space-between;
+		        align-items: center;
+		    }
+		    .box3 {
+		        justify-content: space-between;
+		        /* 两端对齐 */
+		    }
+		    .box3 .item:nth-child(2) {
+		        align-self: center;
+		        /* 上下左右居中对齐 */
+		    }
+		    .box3 .item:nth-child(3) {
+		        align-self: flex-end;
+		        /* 尾对齐 */
+		    }
+		    .box4 {
+		         flex-direction: column;
+		         justify-content: space-between;
+		    }
+		    .box4_top{
+		        width: 200px;
+		        height: 100px;
+		        display: flex;
+		        justify-content: space-between;
+		        align-items: center;
+		    }
+		    .box4_buttom{
+		        width: 200px;
+		        height: 100px;
+		        display: flex;
+		        justify-content: space-between;
+		        align-items: center;
+		    }
+		    .box5{
+		        flex-direction: column;
+		        justify-content: space-between;
+		    }
+		    .box5_top{
+		        display: flex;
+		        justify-content: space-between;
+		    }
+		    .box5_center{
+		        display: flex;
+		        justify-content: center;
+		    }
+		    .box5_buttom{
+		        display: flex;
+		        justify-content: space-between;
+		    }
+		    .box6{
+		        flex-direction: column;
+		        justify-content: space-between;
+		    }
+		    .box6_top{
+		        display: flex;
+		        justify-content: space-between;
+		    }
+		    .box6_center{
+		        display: flex;
+		        justify-content: space-between;
+		    }
+		    .box6_buttom{
+		        display: flex;
+		        justify-content: space-between;
+		    }
+		</style>
+	</head>
+	<body>
+	    <div class="shaizi">
+	        <div class="top">
+	            <div class="box1 box">
+	                <span class="item"></span>
+	            </div>
+	            <div class="box2 box">
+	                <span class="item"></span>
+	                <span class="item"></span>
+	            </div>
+	            <div class="box3 box">
+	                <span class="item"></span>
+	                <span class="item"></span>
+	                <span class="item"></span>
+	            </div>
+	        </div>
+	        <div class="bottom">
+	            <div class="box4 box">
+	                <div class="box4_top">
+	                    <span class="item"></span>
+	                    <span class="item"></span>
+	                </div>
+	                <div class="box4_buttom">
+	                    <span class="item"></span>
+	                    <span class="item"></span>
+	                </div>
+	            </div>
+	            <div class="box5 box">
+	                <div class="box5_top">
+	                    <span class="item"></span>
+	                    <span class="item"></span>
+	                </div>
+	                <div class="box5_center">
+	                    <span class="item"></span>
+	                </div>
+	                <div class="box5_buttom">
+	                    <span class="item"></span>
+	                    <span class="item"></span>
+	                </div>
+	            </div>
+	            <div class="box6 box">
+	                <div class="box6_top">
+	                    <span class="item"></span>
+	                    <span class="item"></span>
+	                </div>
+	                <div class="box6_center">
+	                    <span class="item"></span>
+	                    <span class="item"></span>
+	                </div>
+	                <div class="box6_buttom">
+	                    <span class="item"></span>
+	                    <span class="item"></span>
+	                </div>
+	            </div>
+	        </div>
+	    </div>
+	</body>
+</html>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211124/\351\252\260\345\255\220\357\274\210flex\345\274\271\346\200\247\347\233\222\345\255\220\357\274\211.html" "b/\345\267\253\344\270\275\350\216\216/20211124/\351\252\260\345\255\220\357\274\210flex\345\274\271\346\200\247\347\233\222\345\255\220\357\274\211.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fddb752fe46968755874d6789dd8e5627407028a
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211124/\351\252\260\345\255\220\357\274\210flex\345\274\271\346\200\247\347\233\222\345\255\220\357\274\211.html"
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			#box1 {
+				background-color: #CCCCCC;
+				width: 100px;
+				height: 100px;
+				margin: 20px;
+				/* 圆角 50%就是圆 */
+				border-radius: 10%;
+				/* 阴影 */
+				box-shadow: 1px 1px 2px 2px #DDDDDD;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			#item {
+				background-color: black;
+				border-radius: 50%;
+				width: 25px;
+				height: 25px;
+				margin: 4px;
+			}
+
+			#box2 {
+				background-color: #CCCCCC;
+				width: 100px;
+				height: 100px;
+				margin: 20px;
+				/* 圆角 50%就是圆 */
+				border-radius: 10%;
+				/* 阴影 */
+				box-shadow: 1px 1px 2px 2px #DDDDDD;
+				display: flex;
+				/* 决定水平方向上的布局    两端对齐 */
+				justify-content: space-between;
+			}
+
+			/* 这元素下的item第二个item */
+			#box2 #item:nth-child(2) {
+				/* 控制垂直单独的元素 */
+				align-self: flex-end;
+			}
+
+			#box3 {
+				background-color: #CCCCCC;
+				width: 100px;
+				height: 100px;
+				margin: 20px;
+				border-radius: 10%;
+				box-shadow: 1px 1px 2px 2px #DDDDDD;
+				display: flex;
+			}
+
+			#box3 #item:nth-child(2) {
+				align-self: center;
+			}
+
+			#box3 #item:nth-child(3) {
+				align-self: flex-end;
+			}
+
+			#box4 {
+				background-color: #CCCCCC;
+				width: 100px;
+				height: 100px;
+				border-radius: 10%;
+				display: flex;
+				margin: 20px;
+				box-shadow: 1px 1px 2px 2px #DDDDDD;
+				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: #CCCCCC;
+				width: 100px;
+				height: 100px;
+				border-radius: 10%;
+				margin: 20px;
+				box-shadow: 1px 1px 2px 2px #DDDDDD;
+				display: flex;
+				justify-content: space-around;
+			}
+			#box5-top{
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+			}
+			#box5-center{
+				align-self: center;
+			}
+			#box5-buttom{
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+			}
+			#box6 {
+				background-color: #CCCCCC;
+				width: 100px;
+				height: 100px;
+				border-radius: 10%;
+				display: flex;
+				margin: 20px;
+				box-shadow: 1px 1px 2px 2px #DDDDDD;
+				display: flex;
+				justify-content: space-around;
+			}
+			#box6-top{
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+			}
+			#box6-buttom{
+				display: flex;
+				flex-direction: column;
+				justify-content: space-around;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="w">
+			<div id="box1">
+				<div id="item"></div>
+			</div>
+
+			<div id="box2">
+				<div id="item"></div>
+				<div id="item"></div>
+			</div>
+
+			<div id="box3">
+				<div id="item"></div>
+				<div id="item"></div>
+				<div id="item"></div>
+			</div>
+
+			<div id="box4">
+				<div id="box4-top">
+					<div id="item"></div>
+					<div id="item"></div>
+				</div>
+				<div id="box4-buttom">
+					<div id="item"></div>
+					<div id="item"></div>
+				</div>
+			</div>
+			
+			<div id="box5">
+				<div id="box5-top">
+					<div id="item"></div>
+					<div id="item"></div>
+				</div>
+				<div id="box5-center">
+					<div id="item"></div>
+				</div>
+				<div id="box5-buttom">
+					<div id="item"></div>
+					<div id="item"></div>
+				</div>
+			</div>
+			
+			<div id="box6">
+				<div id="box6-top">
+					<div id="item"></div>
+					<div id="item"></div>
+					<div id="item"></div>
+				</div>
+				<div id="box6-buttom">
+					<div id="item"></div>
+					<div id="item"></div>
+					<div id="item"></div>
+				</div>
+			</div>
+
+		</div>
+	</body>
+</html>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211125/\345\256\236\347\216\260\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html" "b/\345\267\253\344\270\275\350\216\216/20211125/\345\256\236\347\216\260\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html"
new file mode 100644
index 0000000000000000000000000000000000000000..34fb34ab36e2502156d53c6b6c7d69c2908bbf4d
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211125/\345\256\236\347\216\260\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html"
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+		#w{
+			background-color: antiquewhite;
+			width: 600px;
+			height: 600px;
+			display: grid;
+		}
+		#one{
+			display: grid;
+			grid-template-columns: repeat(2,1fr);
+			grid-template-rows:1fr;
+			
+		}
+		#two{
+			display: grid;
+			grid-template-columns: repeat(3,1fr);
+		}
+		#three{
+			display: grid;
+			grid-template-columns: repeat(4,1fr);
+		}
+		#four{
+			display: grid;
+			grid-template-columns: repeat(2,1fr);
+		}
+		</style>
+	</head>
+	<body>
+		<div id="w">
+			<div id="one">
+				<div id="" style="background-color: red; font-size: 70px;color: white;text-align: center;" >50%</div>
+				<div id="" style="background-color: green;font-size: 70px;color: white;text-align: center;">50%</div>
+			</div>
+
+			<div id="two">
+				<div id=""style="background-color: darkseagreen; font-size: 70px;color: white;">33%</div>
+				<div id=""style="background-color: yellow; font-size: 70px;color: white;">33%</div>
+				<div id=""style="background-color: gold; font-size: 70px;color: white;">33%</div>
+			</div>
+
+			<div id="three">
+				<div id=""style="background-color: pink; font-size: 70px;color: white;text-align: center;">25%</div>
+				<div id=""style="background-color: blueviolet; font-size: 70px;color: white;text-align: center;">25%</div>
+				<div id=""style="background-color: blue; font-size: 70px;color: white;text-align: center;">25%</div>
+				<div id=""style="background-color: black; font-size: 70px;color: white;text-align: center;">25%</div>
+			</div>
+
+			<div id="four">
+				<div id=""style="background-color: red; font-size: 70px;color: white;text-align: center;">50%</div>
+				<div id=""style="background-color: green; font-size: 70px;color: white;text-align: center;">50%</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git "a/\345\267\253\344\270\275\350\216\216/20211125/\351\252\260\345\255\220\357\274\210grid\347\275\221\346\240\274\345\270\203\345\261\200\357\274\211.html" "b/\345\267\253\344\270\275\350\216\216/20211125/\351\252\260\345\255\220\357\274\210grid\347\275\221\346\240\274\345\270\203\345\261\200\357\274\211.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3661c60659782e8bb55d670397d81a71ab094894
--- /dev/null
+++ "b/\345\267\253\344\270\275\350\216\216/20211125/\351\252\260\345\255\220\357\274\210grid\347\275\221\346\240\274\345\270\203\345\261\200\357\274\211.html"
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			#one {
+				width: 100px;
+				height: 100px;
+				background-color: gainsboro;
+				border-radius: 10%;
+				margin: 10px;
+				display: grid;
+				/* 宽三等分 */
+				grid-template-columns: 1fr 1fr 1fr;
+				/* 高三等分 */
+				grid-template-rows: 1fr 1fr 1fr;
+				grid-template-areas:
+					'a b c'
+					'd e f'
+					'g h i';
+				justify-items: center;
+				align-items: center;
+			}
+
+			#one div {
+				width: 25px;
+				height: 25px;
+				background-color: black;
+				border-radius: 50%;
+				grid-area: e;
+
+			}
+
+			#two {
+				width: 100px;
+				height: 100px;
+				background-color: gainsboro;
+				border-radius: 10%;
+				margin: 10px;
+				display: grid;
+				grid-template-rows: repeat(3, 1fr);
+				grid-template-columns: repeat(3, 1fr);
+				grid-template-areas:
+					'a b c'
+					'd e f'
+					'g h i';
+				justify-items: center;
+				align-items: center;
+			}
+			#two div{
+				width: 25px;
+				height: 25px;
+				background-color: black;
+				border-radius: 50%;
+				/* grid-area: a; */
+			}
+			#two div:nth-of-type(2){
+				grid-area: i;
+			}
+			#three{
+				width: 100px;
+				height: 100px;
+				background-color: gainsboro;
+				border-radius: 10%;
+				margin: 10px;
+				display: grid;
+				grid-template-rows: repeat(3, 1fr);
+				grid-template-columns: repeat(3, 1fr);
+				grid-template-areas:
+					'a b c'
+					'd e f'
+					'g h i';
+				justify-items: center;
+				align-items: center;
+			}
+			#three div{
+				width: 25px;
+				height: 25px;
+				border-radius: 50%;
+				background-color: #000000;
+			}
+			#three div:nth-of-type(2){
+				grid-area:e ;
+			}
+			#three div:nth-of-type(3){
+				grid-area: i;
+			}
+			#four{
+				width: 100px;
+				height: 100px;
+				background-color: gainsboro;
+				border-radius: 10%;
+				margin: 10px;
+				display: grid;
+				grid-template-rows: repeat(3, 1fr);
+				grid-template-columns: repeat(3, 1fr);
+				grid-template-areas:
+					'a b c'
+					'd e f'
+					'g h i';
+				justify-items: center;
+				align-items: center;
+			}
+			#four div{
+				width: 25px;
+				height: 25px;
+				border-radius: 50%;
+				background-color: #000000;
+			}
+			#four div:nth-of-type(2){
+				grid-area: c;
+			}
+			#four div:nth-of-type(3){
+				grid-area: g;
+			}
+			#four div:nth-of-type(4){
+				grid-area: i;
+			}
+			#five{
+				width: 100px;
+				height: 100px;
+				background-color: gainsboro;
+				border-radius: 10%;
+				margin: 10px;
+				display: grid;
+				grid-template-rows: repeat(3, 1fr);
+				grid-template-columns: repeat(3, 1fr);
+				grid-template-areas:
+					'a b c'
+					'd e f'
+					'g h i';
+				justify-items: center;
+				align-items: center;
+			}
+			#five div{
+				width: 25px;
+				height: 25px;
+				border-radius: 50%;
+				background-color: #000000;
+			}
+			#five div:nth-of-type(2){
+				grid-area: c;
+			}
+			#five div:nth-of-type(3){
+				grid-area: e;
+			}
+			#five div:nth-of-type(4){
+				grid-area: g;
+			}
+			#five div:nth-of-type(5){
+				grid-area: i;
+			}
+			#six{
+				width: 100px;
+				height: 100px;
+				background-color: gainsboro;
+				border-radius: 10%;
+				margin: 10px;
+				display: grid;
+				grid-template-rows: repeat(3, 1fr);
+				grid-template-columns: repeat(2, 1fr);
+				grid-template-areas:
+					'a b'
+					'c d'
+					'e f';
+				justify-items: center;
+				align-items: center;
+			}
+			#six div{
+				width: 25px;
+				height: 25px;
+				border-radius: 50%;
+				background-color: #000000;
+				
+			}
+		</style>
+	</head>
+	<body>
+		<div id="w">
+			<div id="one">
+				<div id=""></div>
+			</div>
+
+			<div id="two">
+				<div id=""></div>
+				<div id=""></div>
+			</div>
+			
+			<div id="three">
+				<div id=""></div>
+				<div id=""></div>
+				<div id=""></div>
+			</div>
+			
+			<div id="four">
+				<div id=""></div>
+				<div id=""></div>
+				<div id=""></div>
+				<div id=""></div>
+			</div>
+
+			<div id="five">
+				<div id=""></div>
+				<div id=""></div>
+				<div id=""></div>
+				<div id=""></div>
+				<div id=""></div>
+			</div>
+			
+			<div id="six">
+				<div id=""></div>
+				<div id=""></div>
+				<div id=""></div>
+				<div id=""></div>
+				<div id=""></div>
+				<div id=""></div>
+			</div>
+		</div>
+	</body>
+</html>
