diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.15--canvas\345\212\250\347\224\273/\351\233\252\350\212\261\351\243\230\350\220\275.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.15--canvas\345\212\250\347\224\273/\351\233\252\350\212\261\351\243\230\350\220\275.html"
new file mode 100644
index 0000000000000000000000000000000000000000..551fa45c3cea1a091186e6f7b4a17357e6d86876
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.15--canvas\345\212\250\347\224\273/\351\233\252\350\212\261\351\243\230\350\220\275.html"
@@ -0,0 +1,77 @@
+<!DOCTYPE html>  
+<html>  
+  
+    <head>  
+        <meta charset="utf-8" />  
+        <title></title>  
+        <script src="js/jquery-1.8.3.min.js"></script>  
+        <style type="text/css">  
+            * {   
+                margin: 0;   
+                padding: 0;   
+            }   
+               
+            #mycanvas {   
+                background: black;   
+            }   
+        </style>  
+    </head>  
+  
+    <body>  
+        <canvas id="mycanvas">  
+            您的浏览器不支持canvas画布   
+        </canvas>  
+        <script>  
+            //获取mycanvas画布   
+            var can = document.getElementById("mycanvas");   
+            var ctx = can.getContext("2d");   
+            //画布宽度   
+            var wid = window.innerWidth;   
+            //画布高度   
+            var hei = window.innerHeight;   
+            can.width = wid;   
+            can.height = hei;   
+            //雪花数目   
+            var snow =500;   
+            //雪花坐标、半径   
+            var arr = []; //保存各圆坐标及半径   
+            for (var i = 0; i < snow; i++) {   
+                arr.push({   
+                    x: Math.random() * wid,   
+                    y: Math.random() * hei,   
+                    r: Math.random() * 10 + 1   
+                })   
+            }   
+            //画雪花   
+            function DrawSnow() {   
+                ctx.clearRect(0, 0, wid, hei);   
+                ctx.fillStyle = "white";   
+                ctx.beginPath();   
+                for (var i = 0; i < snow; i++) {   
+                    var p = arr[i];   
+                    ctx.moveTo(p.x, p.y);   
+                    ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
+                }   
+                ctx.fill();   
+                SnowFall();   
+                ctx.closePath();   
+            }   
+            //雪花飘落   
+            function SnowFall() {   
+                for (var i = 0; i < snow; i++) {   
+                    var p = arr[i];   
+                    p.y += Math.random() * 2 + 1;   
+                    if (p.y > hei) {   
+                        p.y = 0;   
+                    }   
+                    p.x += Math.random() * 2 + 1;   
+                    if (p.x > wid) {   
+                        p.x = 0;   
+                    }   
+                }   
+            }   
+            setInterval(DrawSnow, 50);   
+        </script>  
+    </body>  
+  
+</html>  
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.17--\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250/\345\244\252\346\236\201\345\233\276.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.17--\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250/\345\244\252\346\236\201\345\233\276.html"
new file mode 100644
index 0000000000000000000000000000000000000000..dcd742406c4dd8b3cc6263222d97fd304f24d9f7
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.17--\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250/\345\244\252\346\236\201\345\233\276.html"
@@ -0,0 +1,78 @@
+<!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:#CCCCCC;
+    }
+    div{
+        width: 200px;
+        height: 400px;
+        background-color:black;
+        border-right: 200px solid #fff;
+        border-radius: 50%;
+        animation: rotation 2.5s linear infinite;
+        -webkit-animation: rotation 2.5s linear infinite;
+        -moz-animation: rotation 2.5s linear infinite;
+    }
+
+    div::before {
+        content: "";
+        display: block;
+        width: 50px;
+        height: 50px;
+        margin-left: 100px;
+        border: 75px solid #fff;
+        border-radius: 50%;
+        background-color:black;
+    }
+    
+    div::after {
+        content: "";
+        display: block;
+        width: 50px;
+        height: 50px;
+        margin-left: 100px;
+        border: 75px solid black; 
+        border-radius: 50%;
+        background-color:#fff;
+    }
+    @keyframes rotation {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(-360deg);
+            }
+        }
+
+        @-webkit-keyframes rotation {
+            0% {
+                -webkit-transform: rotate(0deg);
+            }
+
+            100% {
+                -webkit-transform: rotate(-360deg);
+            }
+        }
+
+        @-moz-keyframes rotation {
+            0% {
+                -moz-transform: rotate(0deg);
+            }
+
+            100% {
+                -moz-transform: rotate(-360deg);
+            }
+        }
+
+</style>
+<body>
+    <div></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/letter-spacing.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/letter-spacing.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8c60930270ec506d1d6d69ba7ca9f7c857adb811
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/letter-spacing.html"
@@ -0,0 +1,32 @@
+<!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>
+    /* CSS 的 letter-spacing 属性用于设置文本字符的间距表现。 */
+    .normal{
+        width: 400px;
+        box-shadow:2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+        letter-spacing: normal;
+    }
+    .em-wide{
+        width: 400px;
+        box-shadow:2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+        letter-spacing:0.4em;
+    }
+    .em-wider{
+        width: 400px;
+        box-shadow:2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+        letter-spacing:2px;
+    }
+
+</style>
+<body>
+    <p class="normal">letter spacingletter spacingletter spacingletter spacing</p>
+    <p class="em-wide">letter spacingletter spacingletter spacingletter spacing</p>
+    <p class="em-wider">letter spacingletter spacingletter spacingletter spacing</p>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/white-space.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/white-space.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fd3845b574c7559bbb629114c9b289f232fddffd
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/white-space.html"
@@ -0,0 +1,61 @@
+<!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>
+    .one{
+        white-space:normal;
+        width: 400px;
+        height: 100px;
+        border:1px solid #FFB6C1;
+    }
+    .two{
+        white-space: pre;
+        width: 700px;
+        height: 200px;
+        border:1px solid #DB7093;
+    }
+    .three{
+        white-space: pre-wrap;
+        width: 400px;
+        height: 230px;
+        border:1px solid #FF69B4;
+    }
+    .four{
+        white-space: pre-line;
+        width: 400px;
+        height: 230px;
+        border:1px solid#EE82EE;
+    }
+</style>
+<body>
+    /*white-space设置处理元素的空白*/
+    <p class="one">
+        <span>normal</span>
+        连续的空白符会被合并，换行符会被当作空白符来处理
+        连续的空白符会被合并，换行符会被当作空白符来处理
+        连续的空白符会被合并，换行符会被当作空白符来处理
+    </p>
+    <p class="two">
+        <span>pre</span>
+        连续的空白符会被保留。在遇到换行符或者br元素时才会换行。
+        连续的空白符会被保留。在遇到换行符或者br元素时才会换行。
+        连续的空白符会被保留。在遇到换行符或者br元素时才会换行。
+    </p>
+    <p class="three">
+        <span>pre-wrap</span>
+        连续的空白符会被保留。在遇到换行符或者br元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。
+        连续的空白符会被保留。在遇到换行符或者br元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。
+        连续的空白符会被保留。在遇到换行符或者br元素，或者需要为了填充「行框盒子(line boxes)」时才会换行。
+    </p>
+    <p class="four">
+        <span>pre-line</span>
+        连续的空白符会被合并。在遇到换行符或者br元素，或者需要为了填充「行框盒子(line boxes)」时会换行。
+        连续的空白符会被合并。在遇到换行符或者br元素，或者需要为了填充「行框盒子(line boxes)」时会换行。
+        连续的空白符会被合并。在遇到换行符或者br元素，或者需要为了填充「行框盒子(line boxes)」时会换行。 
+    </p>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/word-break.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/word-break.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2b451ac585de1dc8e8feedd7b2119eaa401b068c
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/word-break.html"
@@ -0,0 +1,72 @@
+<!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>
+    .normal{
+        word-break: normal;
+        width: 480px;
+        height: 150px;
+        line-height: 30px;
+        border: 1px solid #eee;
+        border-radius: 15px;
+    }
+    .break-all{
+        /* 对于non-CJK (CJK 指中文/日文/韩文) 文本，可在任意字符间断行? */
+        word-break: break-all;
+        width: 480px;
+        height: 150px;
+        line-height: 30px;
+        border: 1px solid #eee;
+        border-radius: 15px;
+    }
+    .keep-all{
+        /* CJK 文本不断行。 Non-CJK 文本表现同 normal。 */
+        word-break: keep-all;
+        width: 600px;
+        height: 150px;
+        line-height: 30px;
+        border: 1px solid #eee;
+        border-radius: 15px;
+    }
+    .break-word{
+        /* 他的效果是word-break: normal 和 overflow-wrap: anywhere  的合，不论 overflow-wrap的值是多少。 */
+        word-break:break-word;
+        width: 500px;
+        height: 150px;
+        line-height: 30px;
+        border: 1px solid #eee;
+        border-radius: 15px;
+    }
+</style>
+<body>
+     CSS 属性 word-break 指定了怎样在单词内断行。
+    <p class="normal">
+        <strong>normal</strong>
+        Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapiki
+        maungahoronukupokaiwhenuakitanatahu
+         次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
+    </p>
+    <p class="break-all">
+        <strong>break-all</strong>
+        Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapiki
+        maungahoronukupokaiwhenuakitanatahu
+         次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
+    </p>
+    <p class="keep-all">
+        <strong>keep-all</strong>
+        Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapiki
+        maungahoronukupokaiwhenuakitanatahu
+         次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
+    </p>
+    <p class="break-word">
+        <strong>break-word</strong>
+        Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapiki
+        maungahoronukupokaiwhenuakitanatahu
+         次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
+    </p>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/word-spacing.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/word-spacing.html"
new file mode 100644
index 0000000000000000000000000000000000000000..dd1484a2ac2e6cc1a49fc4c2e93e366affe0f89e
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/word-spacing.html"
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    /* 属性 word-spacing 用于声明标签和单词直接的间距行为。 */
+    .one{
+        width: 400px;
+        height: 100px;
+        word-spacing: normal;
+        border: 5px solid #eee;
+    }
+    .two{
+        width: 400px;
+        height: 100px;
+        /* word-spacing:15px; */
+        word-spacing: 2em;
+        border: 5px solid #eee;
+    }
+    .three{
+        width: 400px;
+        height: 100px;
+        /* word-spacing:15px; */
+        word-spacing:inherit;
+        border: 5px solid #eee;
+    }
+</style>
+<body>
+    <p class="one">
+        正常的单词间距，由当前字体和/或浏览器定义。
+        这是一些文本。
+        this is a text
+    </p>
+    <p class="two">
+        通过指定具体的额外间距来增加字体的单词间距length
+        这是一些文本。
+        this is a text
+    </p>
+    <p class="three">
+        通过指定受影响字符的宽度的百分比的方式来增加的间距
+        这是一些文本。
+        this is a text
+    </p>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/word-wrap.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/word-wrap.html"
new file mode 100644
index 0000000000000000000000000000000000000000..02fabf39b0590394991cfa7f4d0389fb7949efc9
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.18--css\346\226\207\346\234\254\345\261\236\346\200\247/word-wrap.html"
@@ -0,0 +1,37 @@
+<!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>
+    
+    /* 只在允许的断字点换行（浏览器保持默认处理）。 */
+    .one {
+        width: 11em; 
+        border: 1px solid black;
+        word-wrap: normal;
+    }
+    /* 在长单词或 URL 地址内部进行换行。 */
+    .two {
+        width: 11em; 
+        border: 1px solid black;
+        word-wrap: break-word;
+    }
+
+</style>
+<body>
+
+    <p class="one">
+        这是word-wrap为normal的文本，只在允许的断字点换行（浏览器保持默认处理）。
+        This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
+    </p>
+
+    <p class="two">
+        这是word-wrap为break-word的文本，在长单词或 URL 地址内部进行换行。
+        This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
+    </p>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.19--\345\200\274\344\270\216\345\215\225\344\275\215/demo01.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.19--\345\200\274\344\270\216\345\215\225\344\275\215/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0fb02e76c61264e7f05bb08ff7da971eb7239665
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.19--\345\200\274\344\270\216\345\215\225\344\275\215/demo01.html"
@@ -0,0 +1,82 @@
+<!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>
+    :root{
+        /*定义初始颜色*/
+        --red:108;
+        --green:87;
+        --blue:106;
+        /* 文字颜色变色的临界值，建议0.5~0.6 */
+        --threshold: 0.5;
+        /* 深色边框出现的临界值，范围0~1，推荐0.8+*/
+        --border-threshold: 0.8;
+    }
+    #box{
+        width: 400px;
+        height: 200px;
+        font-size: 150%;
+        padding: 30px 20px;
+        background-color: rgb(var(--red),var(--green),var(--blue));
+        --r:calc(var(--red) * 0.2126);
+        --g: calc(var(--green) * 0.7152);
+        --b: calc(var(--blue) * 0.0722);
+        --sum: calc(var(--r) + var(--g) + var(--b));
+        
+        --lightness: calc(var(--sum) / 255);
+
+        color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
+        --border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
+        /* 设置边框相关样式 */
+        border: 2em black;
+        border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
+    }
+    #r{
+        color: red;
+        float: left;
+    }
+    #g{
+        color:green;
+        float: left;
+    }
+    #b{
+        color: blue;
+        float: left;
+    }
+</style>
+<body>
+    <div id="box">rgb(108,87,106)</div>
+    <p id="r">R<input type="range" min="0" max="255" value="44" name="red"/></p>
+    <p id="g">G<input type="range" min="0" max="255" value="44" name="green"/></p>
+    <p id="b">B<input type="range" min="0" max="255" value="44" name="blue"/></p>
+    <script>
+        // let box=document.getElementById('box');
+        // let r=document.getElementById('r').value;
+        // let g=document.getElementById('g').value;
+        // let b=document.getElementById('b').value;
+        // box.innerHTML='rgb('+r+','+g+','+b+')';
+        // box.style.background='rgb('+r+','+g+','+b+')';
+        // var eleRanges = document.querySelectorAll('input[type="range"]');
+        // eleRanges.forEach(function(range){
+        //     range.addEventListener('input',function(){
+        //     let r=document.getElementById('r').value;
+        //     let g=document.getElementById('g').value;
+        //     let b=document.getElementById('b').value;
+        //     box.style.background='rgb('+r+','+g+','+b+')';
+        //     box.innerHTML='rgb('+r+','+g+','+b+')';
+        //     })
+        // })
+        var eleRanges = document.querySelectorAll('input[type="range"]');
+        Array.from(eleRanges).forEach(function (range) {
+        range.addEventListener('input', function () {
+            // 原生DOM给元素添加CSS类方法
+            document.documentElement.style.setProperty('--' + this.name, this.value);    
+        });
+    });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/bb.png" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/bb.png"
new file mode 100644
index 0000000000000000000000000000000000000000..639710b7dac163a1acc333f5fb9bffb4b8c7b511
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/bb.png" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji.png" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d31136357347849d425ab4deb71739cd63242487
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji.png" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji02.webp" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji02.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..6bcd46c57052a8eeae47d689671f0df3836c14b8
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji02.webp" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji03.gif" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji03.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..c6f205debb265ce27d0707f7c417459fbd50e8cf
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji03.gif" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji04.gif" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji04.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..70449b54d54d592ec253010daec7bd25a142cc45
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji04.gif" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji05.webp" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji05.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..0d9a0b90e71cbe621894334c0268fb069e2a4241
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji05.webp" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji06.webp" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji06.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..919596c4a1cfc162dd718ea09b768118b194055d
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/boji06.webp" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/dada.png" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/dada.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7c744ba9b65887c6166ac4120d6d805be586ef40
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/dada.png" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/dms.png" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/dms.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3ec72844cc5d4711c2478e82216128ca97013459
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/dms.png" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/kake.png" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/kake.png"
new file mode 100644
index 0000000000000000000000000000000000000000..eb820532573dbad2cc4d377dc13e5ec314f0953d
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/kake.png" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/xilin.png" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/xilin.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3b1369f5ca75ac4e1fe92ff2b0890ae5c3c8fb7f
Binary files /dev/null and "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/images/xilin.png" differ
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/\347\200\221\345\270\203\346\265\201.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/\347\200\221\345\270\203\346\265\201.html"
new file mode 100644
index 0000000000000000000000000000000000000000..79c6a0d1daaa27995528a4f26f05990cf97f9a60
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.22--\345\244\232\345\210\227\345\270\203\345\261\200/\347\200\221\345\270\203\346\265\201.html"
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>国王排名人物</title>
+</head>
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+        background-color: skyblue;
+    }
+    .content{
+        column-width: 250px;
+        /* 设置列数 */
+        /* column-count: 4; */
+        /* 间隔 */
+        column-gap: 2px;
+    }
+    .content div{
+            border: 5px #eee solid;
+            padding: 10px;
+            margin: 0 5px 10px;
+            border-radius: 15px;
+        }
+    .content div img{
+            width: 100%;
+        }
+    .content div p{
+        font-size: 20px;
+        text-align: center;
+        color: skyblue;
+    }
+  
+</style>
+<body>
+    <div class="content">
+        <div>
+            <img src="./images/boji.png">
+            <p>波吉</p>
+        </div>
+        <div>
+            <img src="./images/boji02.webp">
+            <p>波吉</p>
+        </div>
+        <div>
+            <img src="./images/boji03.gif">
+            <p>波吉</p>
+        </div>
+        <div>
+            <img src="./images/boji04.gif">
+            <p>波吉</p>
+        </div>
+        <div>
+            <img src="./images/boji02.webp">
+            <p>波吉</p>
+        </div>
+        <div>
+            <img src="./images/boji03.gif">
+            <p>波吉</p>
+        </div>
+        <div>
+            <img src="./images/boji04.gif">
+            <p>波吉</p>
+        </div>
+        <div>
+            <img src="./images/boji.png">
+            <p>波吉</p>
+        </div>
+        <div>
+            <img src="./images/boji06.webp">
+            <p>波吉</p>
+        </div>  
+        <div>
+            <img src="./images/boji04.gif">
+            <p>波吉</p>
+        </div>
+        <div>
+            <img src="./images/boji02.webp">
+            <p>波吉</p>
+        </div>
+        <div>
+            <img src="./images/boji03.gif">
+            <p>波吉</p>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.24--flex\345\270\203\345\261\200/demo01.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.24--flex\345\270\203\345\261\200/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3ede7b15b022ea972c3e7e0e88b54778cf1dbafb
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.24--flex\345\270\203\345\261\200/demo01.html"
@@ -0,0 +1,34 @@
+<!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>
+    div{
+        display: flex;
+        width: 100px;
+        height: 100px;
+        background-color: #eee;
+        border-radius: 15px;
+        box-shadow: 5px 5px 5px #888888;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        /* justify-content: center; */
+    }
+    div::after{
+        content:"";
+        display:flex;
+        width: 10px;
+        height: 10px;
+        border: 5px solid black;
+        border-radius: 50%;
+        background-color: black;
+    }
+</style>
+<body>
+    <div></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.24--flex\345\270\203\345\261\200/demo02.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.24--flex\345\270\203\345\261\200/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4beff9a64b2e6e1c2818e55c9ac176a758352533
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.24--flex\345\270\203\345\261\200/demo02.html"
@@ -0,0 +1,49 @@
+<!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{
+        display: flex;
+        width: 100px;
+        height: 100px;
+        background-color: #eee;
+        border-radius: 15px;
+        box-shadow: 5px 5px 5px #888888;
+        justify-content:space-between;
+    }
+   
+    /* div::after{
+        content:"";
+        display:flex;
+        width: 10px;
+        height: 10px;
+        border: 5px solid black;
+        border-radius: 50%;
+        background-color: black;
+    } */
+    .item {
+        display: block;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: #333;
+        margin: 4px;
+        box-shadow: inset 0 3px #111,inset 0 -3px #555;
+        }
+    .row .item:nth-of-type(2){
+        align-self: flex-end;
+    }
+</style>
+<body>
+    <div class="box">
+        <div class="row">
+            <span class="item"></span>
+            <span class="item"></span>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.24--flex\345\270\203\345\261\200/demo03.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.24--flex\345\270\203\345\261\200/demo03.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1b23b3239907bca5e64e2f16a610c90613a995a5
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.24--flex\345\270\203\345\261\200/demo03.html"
@@ -0,0 +1,180 @@
+<!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-sizing: border-box;
+  }
+
+  html,
+  body {
+    height: 100%;
+  }
+
+  body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* flex-warp: wrap; */
+    align-content: center;
+    background-color: #2b2b2b;
+  }
+
+  [class$="face"] {
+    width: 104px;
+    height: 104px;
+    margin: 16px;
+    padding: 4px;
+    background-color: #e7e7e7;
+    border-radius: 10%;
+    object-fit: contain;
+    box-shadow:
+      inset 0 5px white,
+      inset 0 -5px #bbb,
+      inset 5px 0 #d7d7d7,
+      inset -5px 0 #d7d7d7;
+  }
+
+  .dot {
+    display: block;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background-color: #333;
+    margin: 4px;
+    box-shadow: inset 0 3px #111, inset 0 -3px #555;
+  }
+
+  .first-face {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .second-face {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .second-face .dot:nth-of-type(2) {
+    align-self: flex-end;
+  }
+
+  .three-face {
+    display: flex;
+    /* justify-content: space-between; */
+  }
+
+  .three-face .dot:nth-of-type(2) {
+    /* flex-direction: column; */
+    align-self: center;
+  }
+
+  .three-face .dot:nth-of-type(3) {
+    /* flex-direction: column; */
+    align-self: flex-end;
+  }
+
+  .four-face {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .four-face .column {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .five-face {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .five-face .column {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .five-face .column:nth-of-type(2) {
+    align-self: center;
+
+  }
+
+  .six-face {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-content: space-between;
+  }
+  .nine-face{
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+  }
+</style>
+
+<body>
+  <div class="first-face">
+    <span class="dot"></span>
+  </div>
+  <div class="second-face">
+    <span class="dot"></span>
+    <span class="dot"></span>
+  </div>
+  <div class="three-face">
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+  </div>
+  <div class="four-face">
+    <div class="column">
+      <span class="dot"></span>
+      <span class="dot"></span>
+    </div>
+    <div class="column">
+      <span class="dot"></span>
+      <span class="dot"></span>
+    </div>
+  </div>
+  <div class="five-face">
+    <div class="column">
+      <span class="dot"></span>
+      <span class="dot"></span>
+    </div>
+    <div class="column">
+      <span class="dot"></span>
+    </div>
+    <div class="column">
+      <span class="dot"></span>
+      <span class="dot"></span>
+    </div>
+  </div>
+  <div class="six-face">
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+  </div>
+  <div class="nine-face">
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+    <span class="dot"></span>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.25--grid\345\270\203\345\261\200/grid01.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.25--grid\345\270\203\345\261\200/grid01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2ef97e664496b46a19c73838c5434190fe2089b7
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.25--grid\345\270\203\345\261\200/grid01.html"
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>grid骰子小案例</title>
+<style>
+    .box{
+        display:grid;
+        width: 100px;
+        height: 100px;
+        border: 1px solid #000;
+        border-radius: 10px;
+        grid-template-rows: repeat(3,1fr);
+        grid-template-columns: repeat(3,1fr);
+    }
+    .box>div{
+        width: 30px;
+        height: 30px;
+        background: #000;
+        border-radius: 50%;
+    }
+    .box1>div{
+        grid-area: 2/2/3/3;
+        align-self: center center;
+    }
+    .box2{
+        display:grid;
+        width: 100px;
+        height: 100px;
+        border: 1px solid #000;
+        border-radius: 10px;
+        grid-template-columns: 50px 50px;
+        grid-template-rows: 50px 50px;
+    }
+    .box2>div{
+        width: 30px;
+        height: 30px;
+        background: #000;
+        border-radius: 50%;
+    }
+    .box2>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        align-self: center center;
+    }
+    .box2>div:nth-child(2){
+        grid-area: 2/2/3/3;
+        align-self: center center;
+    }
+    .box3>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        align-self: center center;
+    }
+    .box3>div:nth-child(2){
+        grid-area: 2/2/3/3;
+        align-self: center center;
+    }
+    .box3>div:nth-child(3){
+        grid-area: 3/3/4/4;
+        align-self: center center;
+    }
+    .box4>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        align-self: end end;
+    }
+    .box4>div:nth-child(2){
+        grid-area: 1/3/2/4;
+        align-self: end start;
+    }
+    .box4>div:nth-child(3){
+        grid-area: 3/1/4/2;
+        align-self: start end;
+    }
+    .box4>div:nth-child(4){
+        grid-area: 3/3/4/4;
+        align-self: start start;
+    }
+    .box5>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        align-self: end end;
+    }
+    .box5>div:nth-child(2){
+        grid-area: 1/3/2/4;
+        align-self: end start;
+    }
+    .box5>div:nth-child(3){
+        grid-area: 3/1/4/2;
+        align-self: start end;
+    }
+    .box5>div:nth-child(4){
+        grid-area: 3/3/4/4;
+        align-self: start start;
+    }
+    .box5>div:nth-child(5){
+        grid-area: 2/2/3/3;
+        align-self:center center;
+    }
+    .box6{
+        display:grid;
+        width: 100px;
+        height: 100px;
+        border: 1px solid #000;
+        border-radius: 10px;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+        place-items: center center;
+    }
+    .box6>div{
+        width: 30px;
+        height: 30px;
+        background: #000;
+        border-radius: 50%;
+    }
+</style>
+</head>
+<body>
+    <div class="box box1">
+        <div></div>
+    </div>
+    <div class="box2">
+        <div></div>
+        <div></div>
+    </div>
+    <div class="box box3">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="box box4">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="box box5">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="box6">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</body>
+</html>
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.11.25--grid\345\270\203\345\261\200/grid02.html" "b/\346\236\227\345\271\274\350\212\263/2021.11.25--grid\345\270\203\345\261\200/grid02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..48e9545c380cad7c462d987deea452da01b06363
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.11.25--grid\345\270\203\345\261\200/grid02.html"
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>基本网格布局</title>
+</head>
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+        font-size: 50px;
+        color: #fff;
+    }
+    .box{
+        display:inline-grid; 
+        width: 600px;
+        height: 700px;
+        /* grid-template-columns: 100px 100px 100px 150px; */
+        /* grid-template-rows: 150px 150px 150px 100px; */
+        background-color: #f2f2f2;
+    }
+    .one{
+        display: inline-grid;
+        grid-template-columns:1fr 1fr;
+        /* grid-template-areas: 
+        'a1 a2'; */
+    }
+   .two{
+        display: inline-grid;
+        grid-template-columns:1fr 1fr 1fr;
+   }
+    .three{
+        display: inline-grid;
+        grid-template-columns:1fr 1fr 1fr 1fr;
+    }
+    .four{
+        display: inline-grid;
+        grid-template-columns:1fr 1fr;
+    }
+</style>
+<body>
+    <div class="box">
+        <div class="one">
+            <div style="background-color:red">50%</div>
+            <div style="background-color:green">50%</div>
+        </div>
+       <div class="two">
+            <div style="background-color:yellow">33%</div>
+            <div style="background-color:brown">33%</div>
+            <div style="background-color:blue">33%</div>
+       </div>
+       <div class="three">
+            <div style="background-color:skyblue">25%</div>
+            <div style="background-color:pink">25%</div>
+            <div style="background-color:plum">25%</div>
+            <div style="background-color:purple">25%</div>
+       </div>
+        <div class="four">
+            <div style="background-color:orange">50%</div>
+            <div style="background-color:royalblue">50%</div>
+        </div>
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
