diff --git "a/\345\215\242\346\231\223\344\270\275/03_20211117/Lu.html" "b/\345\215\242\346\231\223\344\270\275/03_20211117/Lu.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5e9b85750dcf34afaa2c508acfcf4803a7112d51
--- /dev/null
+++ "b/\345\215\242\346\231\223\344\270\275/03_20211117/Lu.html"
@@ -0,0 +1,56 @@
+<!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>
+
+        .box-taiji{
+        width:0;
+        height:300px;
+        position:relative;
+        margin: 50px auto;
+        border-left:150px solid #000;
+        border-right:150px solid #fff;
+        box-shadow: 0 0 30px rgba(0,0,0,0.5);
+        border-radius: 300px;
+    }
+    
+    .box-taiji:after{
+            width:150px;
+            height:150px;
+            position:absolute;
+            content: '';
+            display: block;
+            top:0;
+            left:-75px;
+            z-index: 1;
+            background-color: #fff;
+            border-radius:50%;
+            box-shadow:0 150px 0 #000;
+        }
+
+        .box-taiji:before {   
+            content:'';
+            position:absolute;
+            display: block;
+            width:75px;
+            height:75px;
+            top:38px;
+            left:-38px;
+            z-index:2;
+            background-color:#000;
+            border-radius:50%;
+            box-shadow:0 150px 0 #fff;
+        }
+    </style>
+
+<body>
+    <div class="box-taiji">
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\346\231\223\344\270\275/04_20211118/1118/demo.html" "b/\345\215\242\346\231\223\344\270\275/04_20211118/1118/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4b98edb45c507620c1efd969e46b06ce0863162d
--- /dev/null
+++ "b/\345\215\242\346\231\223\344\270\275/04_20211118/1118/demo.html"
@@ -0,0 +1,190 @@
+<!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>
+        p {
+            width: 500px;
+            border: 1px solid #e1e1e1;
+        }
+        a {
+            font-size: 12px;
+        }
+    </style>
+</head>
+<body>
+    <h1>white-space</h1>
+    <h4>规定段落中的文本不进行换行：</h4>
+    <ul>
+        <li>
+            <h4>white-space: normal</h4>
+            <h4>默认 空白会被浏览器忽略。</h4>
+            <p style="white-space: normal">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p>
+        </li>
+        <li>
+            <h4>white-space: nowrap</h4>
+            <h4>文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。</h4>
+            <p style="white-space: nowrap;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p>
+        </li>
+        <li>
+            <h4>white-space: pre;</h4>
+            <h4>空白会被浏览器保留。其行为方式类似 HTML 中的 pre 标签。</h4>
+            <p style="white-space: pre; width: 150px;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p>
+        </li>
+        <li>
+            <h4>white-space: pre-wrap</h4>
+            <h4>保留空白符序列，但是正常地进行换行。</h4>
+            <p style="white-space: pre-wrap; width: 120px;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p>
+        </li>
+        <li>
+            <h4>white-space: pre-line</h4>
+            <h4>合并空白符序列，但是保留换行符。</h4>
+            <p style="white-space: pre-line;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p>
+        </li>
+        <li>
+            <h4>white-space: inherit</h4>
+            <h4>规定应该从父元素继承 white-space 属性的值。</h4>
+            <p style="white-space: inherit;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+            </p> 
+        </ul>   
+        <br>   
+
+            <h1>word-break</h1>
+            <h4>在恰当的断字点进行换行</h4>
+            <ul>
+                <li>
+                    <h4>word-break:normal</h4>
+                    <h4>使用浏览器默认的换行规则。</h4>
+                    <p style="word-break:normal;">
+                        This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
+                    </p>
+                </li>
+                <li>
+                    <h4>word-break:break-all</h4>
+                    <h4>允许在单词内换行。</h4>
+                    <p style="word-break:break-all;">
+                        This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
+                    </p>
+                </li>
+                <li>
+                    <h4>word-break:keep-all</h4>
+                    <h4>只能在半角空格或连字符处换行。</h4>
+                    <p style="word-break:keep-all;">
+                        This is a veryveryveryveryveryveryveryveryveryvery long paragraph.
+                    </p>
+                </li>
+            </ul>
+
+            <br>
+                <h1>word-wrap</h1>
+                <h4>允许长单词换行到下一行：</h4>
+            <ul>
+                <li>
+                    <h4>word-wrap: normal</h4>
+                    <h4>只在允许的断字点换行（浏览器保持默认处理）。</h4>
+                    <p style="word-wrap: normal;">
+                        This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
+                    </p>
+                </li>
+                <li>
+                    <h4>word-wrap:break-word</h4>
+                    <h4>在长单词或 URL 地址内部进行换行。</h4>
+                    <p style="word-wrap: break-word;">
+                        https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%9C%A8%E9%95%BF%E5%8D%95%E8%AF%8D%E6%88%96%20URL%20%E5%9C%
+                </li>
+            </ul>
+
+            <br>
+            <h1>word-spacing</h1>
+            <h4>规定段落中的字间距是多少像素：</h4>
+            <ul>
+                <li>
+                    <h4>word-spacing:normal</h4>
+                    <h4>默认。定义单词间的标准空间。</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>
+                    <h4>定义单词间的固定空间。</h4>
+                    <p style="word-spacing:30px;">
+                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.
+                    </p>
+                </li>
+                <li>
+                    <h4>word-spacing:inherit</h4>
+                    <h4>规定应该从父元素继承 word-spacing 属性的值。</h4>
+                    <p style="word-spacing:-0.5em;">
+                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Cum, esse tempore quod voluptatum libero rerum.
+                    </p>
+                </li>
+            </ul>
+
+            <br>
+            <h1>letter-spacing:normal</h1>
+            <h4>设置 h1 和 h2 元素的字母间距</h4>
+            <ul>
+                <li>
+                    <h4>letter-spacing:length</h4>
+                    <h4>默认。规定字符间没有额外的空间。</h4>
+                    <p>
+                        <h1 style="letter-spacing:normal;">This is header 1</h1>                        
+                    </p>
+                </li>
+                <li>
+                    <h4>letter-spacing:</h4>
+                    <h4>定义字符间的固定空间（允许使用负值）。</h4>
+                    <p>
+                        <h1 style="letter-spacing:-0.3em;">This is header 1</h1>
+                        <h4 style="letter-spacing:20px;">This is header 4</h4>
+                    </p>
+                </li>
+                <li>
+                    <h4>letter-spacing:inherit</h4>
+                    <h4>规定应该从父元素继承 letter-spacing 属性的值。</h4>
+                    <p>
+                        <h1 style="letter-spacing:inherit;">This is header 1</h1>
+                        
+                    </p>
+                </li>
+            </ul>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\346\231\223\344\270\275/05_20211119/1119/demo1.html" "b/\345\215\242\346\231\223\344\270\275/05_20211119/1119/demo1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..35bbbe27e7cd9c4b6272577fa4a5fc96d3ccdfe9
--- /dev/null
+++ "b/\345\215\242\346\231\223\344\270\275/05_20211119/1119/demo1.html"
@@ -0,0 +1,57 @@
+<!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>
+        #rbg{
+            width: 400px;
+            height: 100px;
+            position: relative;
+            margin: 20px 0 20px 300px ;
+            font-size: 150%;
+            padding: .5em 2em;  
+            background: rgb(var(--red), var(--green), var(--blue));    
+        }
+        .big{          
+            margin-left: 100px;
+            float: left;
+            font-size: 20px;
+        }
+        :root {
+            --red: 44;
+            --green: 135;
+            --blue: 255;
+            }
+            
+    </style>
+</head>
+<body>
+    <div id="rbg"></div>
+<div>
+    <p class="big" style="color: red;">R：<input type="range" min="0" max="255" value="44" name="red" id="red"></p>
+    <p class="big" style="color: green;">G：<input type="range" min="0" max="255" value="135" name="green" id="green"></p>
+    <p class="big" style="color: blue;">B：<input type="range" min="0" max="255" value="255" name="blue" id="blue"></p>
+</div>
+<script>
+    var div = document.getElementById('rbg');
+    var input = document.getElementsByTagName('input');
+    var red = document.getElementById('red').value;
+    var green = document.getElementById('green').value;
+    var blue = document.getElementById('blue').value;   
+    div.innerHTML="RGB色值：(" + red + "," + green + "," + blue + ")"
+    for (var i=0; i < input.length; i++){
+        input[i].oninput = function(){
+            var red = document.getElementById('red').value;
+            var green = document.getElementById('green').value;
+            var blue = document.getElementById('blue').value;   
+            div.innerHTML="RGB色值：(" + red + "," + green + "," + blue + ")"  
+           document.documentElement.style.setProperty('--' + this.name, this.value);            
+        }
+
+    }
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\346\231\223\344\270\275/05_20211119/1119/demo2.html" "b/\345\215\242\346\231\223\344\270\275/05_20211119/1119/demo2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d35dc2d723c0a00cdbdf0d0814523f9254a1a719
--- /dev/null
+++ "b/\345\215\242\346\231\223\344\270\275/05_20211119/1119/demo2.html"
@@ -0,0 +1,67 @@
+<!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>
+        #rbg{
+            width: 400px;
+            height: 100px;
+            position: relative;
+            margin: 20px 0 20px 300px ;
+            font-size: 150%;
+            padding: .5em 2em;  
+            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%));
+        }
+        .big{          
+            margin-left: 100px;
+            float: left;
+            font-size: 20px;
+        }
+        :root {
+            --red: 44;
+            --green: 135;
+            --blue: 255;
+            --threshold: 0.5;
+             --border-threshold: 0.8;
+            }
+            
+    </style>
+</head>
+<body>
+    <div id="rbg"></div>
+<div>
+    <p class="big" style="color: red;">R：<input type="range" min="0" max="255" value="44" name="red" id="red"></p>
+    <p class="big" style="color: green;">G：<input type="range" min="0" max="255" value="135" name="green" id="green"></p>
+    <p class="big" style="color: blue;">B：<input type="range" min="0" max="255" value="255" name="blue" id="blue"></p>
+</div>
+<script>
+    var div = document.getElementById('rbg');
+    var input = document.getElementsByTagName('input');
+    var red = document.getElementById('red').value;
+    var green = document.getElementById('green').value;
+    var blue = document.getElementById('blue').value;   
+    div.innerHTML="RGB色值：(" + red + "," + green + "," + blue + ")"
+    for (var i=0; i < input.length; i++){
+        input[i].oninput = function(){
+            var red = document.getElementById('red').value;
+            var green = document.getElementById('green').value;
+            var blue = document.getElementById('blue').value;   
+            div.innerHTML="RGB色值：(" + red + "," + green + "," + blue + ")"  
+
+            document.documentElement.style.setProperty('--' + this.name, this.value);            
+        }
+
+    }
+
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/demo.html" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..127804f4cae9a90c858ae08fceb9213a45c79c2f
--- /dev/null
+++ "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/demo.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>
+    <style>
+        body{
+            background-color: #c5c3c3;
+        }
+        .contan{
+            column-count: 3;
+            column-gap: 20px;
+            column-fill: auto;
+            break-inside: avoid;
+            
+        }
+       .contan img{
+           border: 5px solid white;
+           padding: 6px;
+           margin: 0 5px 10px 0;
+       }
+    </style>
+</head>
+<body>
+    <div class="contan">
+        <div><img src="./img/12.webp" alt=""></div>
+        <div><img src="./img/6.webp" alt=""></div>
+        <div><img src="./img/8.webp" alt=""></div>
+        <div><img src="./img/3.webp" alt=""></div>
+        <div><img src="./img/1.webp" alt=""></div>
+        <div><img src="./img/5.webp" alt=""></div>
+        <div><img src="./img/4.webp" alt=""></div>
+        <div><img src="./img/2.webp" alt=""></div>
+        <div><img src="./img/7.webp" alt=""></div>
+        <div><img src="./img/9.webp" alt=""></div>
+        <div><img src="./img/10.webp" alt=""></div>
+        <div><img src="./img/11.webp" alt=""></div>
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/1.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..1dd86facaa8f2e05929f834266e7479fa879662e
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/1.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/10.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/10.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ab0a255706f6d8625a40cb197dbdd9e1e5663c50
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/10.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/11.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/11.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..50565aa43ab7ec8652f88aaf9440523b787bb0ba
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/11.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/12.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/12.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..4084b7c24d7fc91bbb03168c7150caafdbfb62ab
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/12.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/2.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5f16d869b2d00fafc6ee01befc081c6147799716
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/2.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/3.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..372a9a90f594009b8abb57b802ab8ac8a8fec32c
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/3.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/4.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/4.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..662cab46bdab6717f79874836d7d375e134abb55
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/4.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/5.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/5.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..34c24980d2271e914be7b152fcc8f6445022178e
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/5.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/6.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/6.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..7688ec0a674d458e2b9219a3023624b0eddedf00
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/6.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/7.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/7.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ea0d993c2c69ee6918b277cef54219e55e1f2d7d
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/7.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/8.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/8.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..adefe492704e520463080527c5956e10775d8469
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/8.webp" differ
diff --git "a/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/9.webp" "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/9.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..e6c0e75ccfb3178cdd439e768e5f4becb3ceaac9
Binary files /dev/null and "b/\345\215\242\346\231\223\344\270\275/06_20211122/1122/img/9.webp" differ
