diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.17 \345\244\252\346\236\201\347\273\203\344\271\240/content-counter.html" "b/\346\236\227\350\264\265\345\271\263/2021.11.17 \345\244\252\346\236\201\347\273\203\344\271\240/content-counter.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f62af7b390c94d792401b8accd702799cff168eb
--- /dev/null
+++ "b/\346\236\227\350\264\265\345\271\263/2021.11.17 \345\244\252\346\236\201\347\273\203\344\271\240/content-counter.html"	
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+
+<style>
+body{
+    background-color: aliceblue;
+
+
+
+}
+
+#gossip{
+        width: 200px;
+        height: 400px;
+        background-color: black;
+        border-right: solid white ;
+        border-width: 200px; 
+        border-radius: 50%;
+        position: relative;
+    animation:rotate 2s linear infinite;
+
+}
+
+
+#gossip::before{
+content: "";
+/* display: block; */
+width: 200px;
+height: 200px;
+/* background-color: black; */
+border: 80px solid black;
+position:absolute;
+background: #ffff ;
+right: -100px;
+border-radius: 50%;
+box-sizing: border-box;
+
+
+}
+
+#gossip::after{
+content: "";
+width:200px;
+height: 200px;
+background: black;
+border: 80px solid white ;
+/* background-color: white; */
+position:absolute;
+right: -100px;
+top: 200px;
+border-radius: 50%;
+box-sizing: border-box;
+
+
+}
+@keyframes rotate{
+
+0% {transform: rotate(0deg);}
+100%{transform: rotate(360deg);}
+}
+
+
+/* #rectangle1{
+    width: 100px;
+    height: 100px;
+    background-color: brown;
+  
+
+
+
+}
+
+#rectangle2{
+
+
+
+} */
+</style>
+<body>
+
+
+    
+        <div id="gossip">
+      
+
+        </div>
+
+
+  
+
+
+  
+
+   
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.18 \350\257\276\344\273\266demo\346\225\210\346\236\234/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/demo.html" "b/\346\236\227\350\264\265\345\271\263/2021.11.18 \350\257\276\344\273\266demo\346\225\210\346\236\234/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a8e8d882eb04de8c458c685b2bf35cbf9f514b0d
--- /dev/null
+++ "b/\346\236\227\350\264\265\345\271\263/2021.11.18 \350\257\276\344\273\266demo\346\225\210\346\236\234/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/demo.html"	
@@ -0,0 +1,128 @@
+<!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;
+        }
+        h2{
+            color: red;
+        }
+        
+
+    </style>
+</head>
+<body>
+        <h2>white-space效果</h2>
+    <ul>
+        <li>
+            <h4>white-space: normal; (默认。空白会被浏览器忽略。)</h4>
+            <p style="white-space: normal;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                </p>
+        </li>
+        <li>
+            <h4>white-space: pre; (空白会被浏览器保留。其行为方式类似 HTML 中的 'pre'标签。)</h4>
+            <p style="white-space: pre;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                </p>
+        </li>
+        <li>
+            <h4>white-space: nowrap; (文本不会换行，文本会在在同一行上继续，直到遇到 'br' 标签为止。)</h4>
+            <p style="white-space: nowrap;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                </p>
+        </li>
+        <li>
+            <h4>white-space: pre-wrap; (保留空白符序列，但是正常地进行换行)</h4>
+            <p style="white-space: pre-wrap;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                </p>
+        </li>
+        <li>
+            <h4>white-space: pre-line; （合并空白符序列，但是保留换行符。）</h4>
+            <p style="white-space: pre-line;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                </p>
+        </li>
+        <li>
+            <h4>white-space: inherit; (规定应该从父元素继承 white-space 属性的值。)</h4>
+            <p style="white-space: inherit;">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                </p>
+        </li>
+        <h2>word-break效果</h2>
+        <li>
+            <h4>word-break: normal; (使用浏览器默认的换行规则。)</h4>
+            <p style="word-break: normal;">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
+        </li>
+        <li>
+            <h4>word-break: break-all; (允许在单词内换行。)</h4>
+            <p style="word-break: break-all;">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
+        </li>
+        <li>
+            <h4>word-break: keep-all; (只能在半角空格或连字符处换行。)</h4>
+            <p style="word-break: keep-all;">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
+        </li>
+        <h2>word-wrap效果</h2>
+        <li>
+            <h4>word-wrap: normal; (只在允许的断字点换行（浏览器保持默认处理）。)</h4>
+            <p style="word-wrap: normal;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
+        </li>
+        <li>
+            <h4>word-wrap: break-word; (在长单词或 URL 地址内部进行换行。)</h4>
+            <p style="word-wrap: break-word;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
+        </li>
+        <h2>word-spacing效果</h2>
+        <li>
+            <h4>word-spacing:normal; (默认。定义单词间的标准空间。)</h4>
+            <p style="word-spacing:normal;">This is some text. This is some text.</p>
+        </li>
+        <li>
+            <h4>word-spacing:25px; (定义单词间的固定空间。)</h4>
+            <p style="word-spacing:25px;">This is some text. This is some text.</p>
+        </li>
+        <li>
+            <h4>word-spacing:inherit; (规定应该从父元素继承 word-spacing 属性的值。)</h4>
+            <p style="word-spacing:inherit;">This is some text. This is some text.</p>
+        </li>
+        <h2>letter-spacing效果</h2>
+        <li>
+            <h4>letter-spacing: normal; (默认。规定字符间没有额外的空间。)</h4>
+            <p style="letter-spacing: normal;">This is header 1</p>
+        </li>
+        <li>
+            <h4>letter-spacing:20px; (定义字符间的固定空间（允许使用负值）。)</h4>
+            <p style="letter-spacing: 20px;">This is header 1</p>
+        </li>
+        <li>
+            <h4>letter-spacing:inherit; (规定应该从父元素继承 letter-spacing 属性的值。)</h4>
+            <p style="letter-spacing: inherit;">This is header 1</p>
+        </li>
+
+    </ul>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.18 \350\257\276\344\273\266demo\346\225\210\346\236\234/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/demo01.html" "b/\346\236\227\350\264\265\345\271\263/2021.11.18 \350\257\276\344\273\266demo\346\225\210\346\236\234/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c97547d80df8ab65fe223a48c967105372719892
--- /dev/null
+++ "b/\346\236\227\350\264\265\345\271\263/2021.11.18 \350\257\276\344\273\266demo\346\225\210\346\236\234/\346\226\260\345\273\272\346\226\207\344\273\266\345\244\271/demo01.html"	
@@ -0,0 +1,185 @@
+<!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>
+    span {
+        color: red;
+    }
+    p {
+        width: 500px;
+        border: 1px solid #e1e1e1;
+    }
+    a {
+        font-size: 12px;
+    }
+</style>
+<body>
+    <h3>white-space</h3>
+    <ul>
+        <li>white-space属性被指定为从下面的值列表中选择的单个关键字。</li>
+        <li>
+            <h4>white-space:normal</h4>
+            <p style="white-space:normal;">这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。<br>元素时才会换行。</p>
+        </li>
+
+        
+        <li>
+            <h4>white-space:nowrap</h4>
+                <p style="white-space:nowrap;">这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。</p>
+            </li>
+
+            <li>
+                <h4>white-space:pre</h4>
+                    <p style="white-space:pre;">这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。 </p>
+                </li>
+
+
+                <li>
+                    <h4>white-space:pre-wrap</h4>
+                        <p style="white-space:pre-wrap;">这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。 </p>
+                    </li>
+
+                    <li>
+                        <h4>white-space:pre-line</h4>
+                            <p style="white-space:pre-line;">这是一些文本。
+                                这是一些文本。
+                                这是一些文本。
+                                这是一些文本。
+                                这是一些文本。
+                                这是一些文本。
+                                这是一些文本。
+                                这是一些文本。
+                                这是一些文本。
+                                这是一些文本。
+                                这是一些文本。
+                                这是一些文本。 </p>
+                        </li>
+
+
+                        <ul>
+                            <h4>与 pre-wrap的行为相同，除了：</h4>
+                               <li>任何保留的空白序列总是占用空间，包括在行尾。</li>
+                               <li>每个保留的空格字符后都存在换行机会，包括空格字符之间 </li>
+                                <li>这样保留的空间占用空间而不会挂起，从而影响盒子的固有尺寸（最小内容大小和最大内容大小）</li>
+                            
+                            
+                        </ul>
+
+        </ul>
+        
+
+
+        <h3>white-space</h3>
+        <ul>
+            <li>white-space属性被指定为从下面的值列表中选择的单个关键字。</li>
+            <li>
+                <h4>white-space:normal</h4>
+                <p style="white-space:normal ;">这是一些文本。
+                    This is a veryveryveryveryveryveryveryveryveryvery long paragraph.。</p>
+            </li>
+    
+
+
+            </ul>
+            <h3>word-break效果</h3>
+            <li>
+                <h4>word-break: normal; (使用浏览器默认的换行规则。)</h4>
+                <p style="word-break: normal;">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
+            </li>
+            <li>
+                <h4>word-break: break-all; (允许在单词内换行。)</h4>
+                <p style="word-break: break-all;">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
+            </li>
+            <li>
+                <h4>word-break: keep-all; (只能在半角空格或连字符处换行。)</h4>
+                <p style="word-break: keep-all;">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
+            </li>
+            <h3>word-wrap效果</h3>
+            <li>
+                <h4>word-wrap: normal; (只在允许的断字点换行（浏览器保持默认处理）。)</h4>
+                <p style="word-wrap: normal;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
+            </li>
+            <li>
+                <h4>word-wrap: break-word; (在长单词或 URL 地址内部进行换行。)</h4>
+                <p style="word-wrap: break-word;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p>
+            </li>
+            <h3>word-spacing效果</h3>
+            <li>
+                <h4>word-spacing:normal; (默认。定义单词间的标准空间。)</h4>
+                <p style="word-spacing:normal;">This is some text. This is some text.</p>
+            </li>
+            <li>
+                <h4>word-spacing:25px; (定义单词间的固定空间。)</h4>
+                <p style="word-spacing:25px;">This is some text. This is some text.</p>
+            </li>
+            <li>
+                <h4>word-spacing:inherit; (规定应该从父元素继承 word-spacing 属性的值。)</h4>
+                <p style="word-spacing:inherit;">This is some text. This is some text.</p>
+            </li>
+            <h2>letter-spacing效果</h2>
+            <li>
+                <h4>letter-spacing: normal; (默认。规定字符间没有额外的空间。)</h4>
+                <p style="letter-spacing: normal;">This is header 1</p>
+            </li>
+            <li>
+                <h4>letter-spacing:20px; (定义字符间的固定空间（允许使用负值）。)</h4>
+                <p style="letter-spacing: 20px;">This is header 1</p>
+            </li>
+            <li>
+                <h4>letter-spacing:inherit; (规定应该从父元素继承 letter-spacing 属性的值。)</h4>
+                <p style="letter-spacing: inherit;">This is header 1</p>
+            </li>
+    
+        </ul>
+
+
+</body>
+</html>0
\ No newline at end of file
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.19\347\273\203\344\271\240(\346\262\241\345\201\232\345\256\214)/demo01.html" "b/\346\236\227\350\264\265\345\271\263/2021.11.19\347\273\203\344\271\240(\346\262\241\345\201\232\345\256\214)/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5c2375c435845c82c5d8194dc554cb718ead3ae3
--- /dev/null
+++ "b/\346\236\227\350\264\265\345\271\263/2021.11.19\347\273\203\344\271\240(\346\262\241\345\201\232\345\256\214)/demo01.html"
@@ -0,0 +1,89 @@
+<!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{
+ width: 700px;
+ height: 550px;
+ background-color: black;
+
+} */
+
+
+body{
+width: 760px;
+
+height: 700px;
+background-color: cornflowerblue;
+margin: auto;
+
+}
+
+#box{
+ background-color: aliceblue;
+ border: 1px solid black;
+ width: 700px;
+ height: 150px;
+ margin: auto;
+
+}
+input{
+    padding: 40px;
+    margin-right:30px;
+    
+}
+input type.range{
+
+    border-radius: 50%;
+}
+
+#R{
+    color:red;
+    font-size: 24px;
+    font-weight:bold;
+    /* float: left;
+    margin: 0, 50px, 0,0 ; */
+}
+#G{
+    color:green;
+    font-size: 24px;
+    font-weight:bold;
+    /* float: left;
+    margin: 0, 50px, 0,0 ; */
+}
+#B{
+    color:blue;
+    font-size: 24px;
+    font-weight:bold;
+    /* float:left; */
+    /* margin: 0, 50px, 0,0 ; */
+}
+
+
+
+</style>
+ 
+
+<body>
+
+    <div id="zong">
+
+    <div id="box">
+
+</div>
+<input type="range" class="R"><span id="R">R</span>
+<input type="range" class="G"><span id="G">G</span>
+<input type="range" class="B"><span id="B">B</span>
+</div>
+
+
+
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/1.jpg" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..69bf2e54f629c2fc5461fd90a675741f4994a7e9
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/1.jpg" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/10.webp" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/10.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..8e9e32d402f5573f94f3bbdb6e20dedfaf327d91
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/10.webp" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/11.webp" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/11.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..9930423769b9cbf34e8487c93b42d23514c0694e
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/11.webp" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/12.webp" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/12.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..36ca9e740ed8a3f334b2219c00a343b9a70ae02a
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/12.webp" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/13.webp" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/13.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..d408678d8559253f0df6b6176a4fcb128a2d0ade
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/13.webp" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/14.webp" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/14.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..52d04b3ebf28e6bcfef61237c1cff506a7548fc9
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/14.webp" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/2.jpg" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..9790394973939101af7c28c9ccd10e7a5666f96a
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/2.jpg" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/3.jpg" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f92dd9fd23707ab8b385d436e69f8eb69e64d015
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/3.jpg" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/4.jpg" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1da8ecbd8a63e510671b43d9cde585c232106a68
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/4.jpg" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/5.jpg" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b362f279010e1f4e7d6e6d9f46d61ed5c6eb46f4
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/5.jpg" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/6.jpg" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..706fcb09b605b0b8036750b3559cb5e94cc248b4
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/6.jpg" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/7.jpg" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/7.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6b5f31971411e1a0826fb702af2f970066a53ecc
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/7.jpg" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/8.jpg" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/8.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..401daf9d2c977894968d10444421c59618276152
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/8.jpg" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/9.jpg" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/9.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..8c66df0b74a472bc38f106f23729082419ca8924
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/9.jpg" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/u=3912742004,3812208056&fm=26&fmt=auto.webp" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/u=3912742004,3812208056&fm=26&fmt=auto.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..9c7eaf6a5db044782c1913770e5ce3319e4cec45
Binary files /dev/null and "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/img/u=3912742004,3812208056&fm=26&fmt=auto.webp" differ
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/index.html" "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/index.html"
new file mode 100644
index 0000000000000000000000000000000000000000..cda5fb61c8e07b269baf3ad3c668ad99847a5fe7
--- /dev/null
+++ "b/\346\236\227\350\264\265\345\271\263/2021.11.22 \347\200\221\345\270\203\346\265\201\345\270\203\345\261\200/index.html"	
@@ -0,0 +1,54 @@
+<!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>
+    * {
+        margin: 0;
+        padding: 0;
+        background-color: aquamarine;
+    }
+
+    #contencet {
+     
+        /* column-count: 3; */
+        column-width: 300px   ;
+        column-gap: 30px;
+
+    }
+
+    img {
+        width: 300px;
+        margin-bottom: 30px;
+        
+    }
+</style>
+
+<body>
+    <div id="contencet">
+
+        <img src="./img/1.jpg" alt="">
+        <img src="./img/2.jpg" alt="">
+        <img src="./img/3.jpg" alt="">
+        <img src="./img/4.jpg" alt="">
+        <img src="./img/5.jpg" alt="">
+        <img src="./img/6.jpg" alt="">
+        <img src="./img/7.jpg" alt="">
+        <img src="./img/8.jpg" alt="">
+        <img src="./img/9.jpg" alt="">
+        <img src="./img/10.jpg" alt="">
+        <img src="./img/11.jpg" alt="">
+
+    </div>
+
+
+
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\350\264\265\345\271\263/2021.11.24 \345\274\271\346\200\247\347\233\222\345\255\220/demo01.html" "b/\346\236\227\350\264\265\345\271\263/2021.11.24 \345\274\271\346\200\247\347\233\222\345\255\220/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..576b962c284908dfddf24a612ba91150847d2ff9
--- /dev/null
+++ "b/\346\236\227\350\264\265\345\271\263/2021.11.24 \345\274\271\346\200\247\347\233\222\345\255\220/demo01.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>
+</head>
+<body>
+<style>
+	
+	
+    body{
+        margin: auto;
+        
+        width: 600px;
+    }
+    .parent{
+		
+		display: flex;
+        flex-wrap: wrap;
+        width: 550px;
+        height: 270px;
+		flex-direction: row;
+        background-color: black;
+      
+       
+
+    }
+	
+	
+
+    .item{
+        display: inline-flex ;
+            background-color: #e7e7e7;
+            width: 95px;
+            height: 95px;
+            border: 1px solid #e7e7e7;
+            margin: 16px;
+            padding: 4px;   
+            border-radius: 10%;  
+            
+
+    }
+/* //设置每一个黑圈圈 */
+    .redius{
+        display: block;
+        width: 25px;
+        height: 25px;
+        background-color: black;
+        border-radius: 100px;
+    }
+
+
+ /* //第一个； */
+#item1{
+    display: flex;
+    justify-content: center;
+  
+}
+  #item1 .redius{
+
+        align-self:center;
+    }
+
+
+#item2{
+    display: flex;
+	flex-direction: row;
+    justify-content:space-between;
+
+}
+
+#item2 .redius:nth-child(2){
+	align-self: flex-end;
+	
+}
+
+#item3{
+	
+	display: flex;
+	flex-direction: row;
+	justify-content:space-between;
+	
+	
+	
+}
+#item3 .redius:nth-child(2){
+	
+	align-self: center;
+	
+}
+#item3 .redius:nth-child(3){
+	align-self: flex-end;
+	
+}
+
+
+
+
+
+#item4{
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content:space-between;
+	
+	
+}
+
+#item4 .redius:nth-child(1){
+	
+	margin-right: 40px;
+	margin-bottom: 50px;
+}
+
+#item4 .redius:nth-child(3){ /*child() 从数值0开始数  */
+	
+	margin-right: 40px;
+	
+}
+
+
+#item5{
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content:space-between;
+	align-self: center;
+	
+}
+
+
+#item5 .redius:nth-child(3){
+	align-self: center;
+	
+}
+#item5 .redius:nth-child(1){
+	margin-right: 40px;
+	
+
+}
+
+#item5 .redius:nth-child(3){ 
+
+	margin-left: 35px;
+	margin-right: 35px;
+
+	
+}
+
+#item6 {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: column;
+	justify-content: space-between; 
+	align-content: space-around;
+	
+	
+	
+	
+}
+
+/* #item6 .redius:nth-child(3){
+		
+	
+		
+		
+}
+
+#item6 .redius:nth-child(3){
+	
+	margin-left: 40px;
+	margin-right: 40px;
+}
+
+ */
+ 
+
+
+
+
+
+</style>
+
+</head>
+<body>
+
+    <div class="parent" >
+        <div class="item" id="item1">
+
+            <div class="redius"id="redius"></div>
+
+        </div>
+        <div class="item" id="item2">
+            <div class="redius" ></div>
+            <div class="redius"></div>
+            
+        </div>
+        <div class="item" id="item3">
+            <div class="redius"></div>
+            <div class="redius"></div>
+            <div class="redius"></div>
+
+        </div>
+        <div class="item" id="item4">
+            <div class="redius"></div>
+            <div class="redius"></div>
+            <div class="redius"></div>
+            <div class="redius"></div>
+        </div>
+        <div class="item" id="item5">
+            <div class="redius"></div>
+            <div class="redius"></div>
+            <div class="redius"></div>
+            <div class="redius"></div>
+            <div class="redius"></div>
+        </div>
+        <div class="item" id="item6">
+            <div class="redius"></div>
+            <div class="redius"></div>
+            <div class="redius"></div>
+            <div class="redius"></div>
+            <div class="redius"></div>
+            <div class="redius"></div>
+        </div>
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
