diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1115/demo1.html" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1115/demo1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f833aba7ea9d902ecd4c458058a7e06e6f38a1ba
--- /dev/null
+++ "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1115/demo1.html"
@@ -0,0 +1,76 @@
+<!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 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 = 100;   
+            //雪花坐标、半径   
+            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/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1117/demo1.html" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1117/demo1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d47ff5c5d4c8ce3f6a28804896f02d94b4e6b316
--- /dev/null
+++ "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1117/demo1.html"
@@ -0,0 +1,59 @@
+<!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>
+        *{
+            background-color: rgb(243, 240, 240);
+        }
+         div{
+             width: 0;
+             height: 400px;
+             border-radius: 200px;
+             position: relative;
+             margin: auto;
+             border-left: 200px solid black;
+             border-right: 200px solid white;
+             box-shadow: 0 0 15px rgba(0, 0, 0, .5);
+             animation: rotatel 2.5s linear infinite;
+         }
+         div::before{
+            content: "";
+            position: absolute;
+            height: 40px;
+            border: 80px solid black;
+            border-radius: 100px;
+            width: 40px;
+            left: -100px;
+            background: white;
+            box-shadow: 0 200px 0 white;  
+             /* box-shadow 阴影        */
+         }
+         div::after{
+             content: "";
+             position: absolute;
+             width: 40px;
+             border: 80px solid white;
+             border-radius: 100px;
+             top: 200px;
+             left: -100px;
+             background: black;  
+             height: 40px;
+        
+                   
+         }
+         @keyframes rotatel{
+            from{
+                transform: rotate(0deg);
+            }
+            to{
+                transform: rotate(360deg);
+            }
+    </style>
+</head>
+<body>
+    <div></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1118/demo.html" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1118/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4b98edb45c507620c1efd969e46b06ce0863162d
--- /dev/null
+++ "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/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/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1119/demo1.html" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1119/demo1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..35bbbe27e7cd9c4b6272577fa4a5fc96d3ccdfe9
--- /dev/null
+++ "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/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/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1119/demo2.html" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1119/demo2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d35dc2d723c0a00cdbdf0d0814523f9254a1a719
--- /dev/null
+++ "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/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/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/demo.html" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..127804f4cae9a90c858ae08fceb9213a45c79c2f
--- /dev/null
+++ "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/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/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/1.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..1dd86facaa8f2e05929f834266e7479fa879662e
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/1.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/10.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/10.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ab0a255706f6d8625a40cb197dbdd9e1e5663c50
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/10.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/11.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/11.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..50565aa43ab7ec8652f88aaf9440523b787bb0ba
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/11.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/12.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/12.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..4084b7c24d7fc91bbb03168c7150caafdbfb62ab
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/12.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/2.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..5f16d869b2d00fafc6ee01befc081c6147799716
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/2.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/3.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..372a9a90f594009b8abb57b802ab8ac8a8fec32c
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/3.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/4.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/4.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..662cab46bdab6717f79874836d7d375e134abb55
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/4.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/5.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/5.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..34c24980d2271e914be7b152fcc8f6445022178e
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/5.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/6.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/6.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..7688ec0a674d458e2b9219a3023624b0eddedf00
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/6.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/7.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/7.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ea0d993c2c69ee6918b277cef54219e55e1f2d7d
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/7.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/8.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/8.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..adefe492704e520463080527c5956e10775d8469
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/8.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/9.webp" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/9.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..e6c0e75ccfb3178cdd439e768e5f4becb3ceaac9
Binary files /dev/null and "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1122/img/9.webp" differ
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1124/demo01.html" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1124/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fe7f82250ff9c73b36e3cac5b5b74b572178c719
--- /dev/null
+++ "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1124/demo01.html"
@@ -0,0 +1,188 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>flex布局实例--骰子</title>
+    <style type="text/css">
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        body{
+            
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .box{
+            width: 100px;
+            height: 100px;
+            background: #e7e7e7;
+            border-radius: 20px;
+            margin: 100px;
+            padding: 15px;
+        }
+        .item{
+            width: 30px;
+            height: 30px;
+            background-color: #000;
+            border-radius: 30px;
+        }
+    </style>
+    <style type="text/css">
+        .box1{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .item1{}
+    </style>
+    <style type="text/css">
+        .box2{
+			display: flex;
+		}
+		.item2:nth-child(2){
+			align-self: center;
+			background-color: #e7e7e7;
+		}
+		.item2:nth-child(3){
+			align-self: flex-end;
+		}
+    </style>
+    <style type="text/css">
+        .box3{
+            display: flex;
+        }
+        .item3:nth-child(2){
+            align-self: center;
+        }
+        .item3:nth-child(3){
+            align-self: flex-end;
+        }
+    </style>
+    <style type="text/css">
+        .box4{
+            display: flex;
+            flex-wrap: wrap;
+            align-content: space-between;
+        }
+        .column4{
+            flex-basis: 100%;
+            display: flex;
+            justify-content: space-between;
+        }
+    </style>
+    <style type="text/css">
+        .box5{
+            display: flex;
+            flex-wrap: wrap;
+            align-content: space-between;
+        }
+        .column5{
+            flex-basis: 100%;
+            display: flex;
+            justify-content: space-between;
+        }
+        .column5:nth-child(2){
+            justify-content: center;
+        }
+    </style>
+    <style type="text/css">
+        .box6{
+            display: flex;
+            flex-wrap: wrap;
+            align-content: space-between;
+        }
+        .column6{
+            flex-basis: 100%;
+            display: flex;
+            justify-content: space-between;
+        }
+    </style>
+	<style type="text/css">
+		.box8{
+			display: flex;
+			flex-wrap: wrap;
+			align-content: space-between;
+		}
+		.column8{
+			flex-basis: 100%;
+			display: flex;
+			justify-content: space-between;
+		}
+	</style>
+</head>
+<body>
+    <!-- 1 -->
+    <div class="box box1">
+        <span class="item item1"></span>
+    </div>
+    <!-- 2 -->
+    <div class="box box2">
+        <span class="item item2"></span>
+		<span class="item item2"></span>
+        <span class="item item2"></span>
+    </div>
+    <!-- 3 -->
+    <div class="box box3">
+        <span class="item item3"></span>
+        <span class="item item3"></span>
+        <span class="item item3"></span>
+    </div>
+    <!-- 4 -->
+    <div class="box box4">
+        <div class="column4">           
+            <span class="item item4"></span>
+            <span class="item item4"></span>
+        </div>  
+        <div class="column4">           
+            <span class="item item4"></span>
+            <span class="item item4"></span>
+        </div>
+    </div>
+    <!-- 5 -->
+    <div class="box box5">
+        <div class="column5">           
+            <span class="item item5"></span>
+            <span class="item item5"></span>
+        </div>
+        <div class="column5">
+            <span class="item item5"></span>
+        </div>
+        <div class="column5">           
+            <span class="item item5"></span>
+            <span class="item item5"></span>
+        </div>
+    </div>
+    <!-- 6 -->
+    <div class="box box6">
+        <div class="column6">           
+            <span class="item item6"></span>
+            <span class="item item6"></span>
+        </div>
+        <div class="column6">
+            <span class="item item6"></span>
+            <span class="item item6"></span>
+        </div>
+        <div class="column5">           
+            <span class="item item6"></span>
+            <span class="item item6"></span>
+        </div>
+    </div>
+	<div class="box box8">
+		<div class="column8">
+			<span class="item item8"></span>
+			<span class="item item8"></span>
+			<span class="item item8"></span>
+		</div>
+		<div class="column8">
+			<span class="item item8"></span>
+			<span class="item item8"></span>
+			<span class="item item8"></span>
+		</div>
+		<div class="column8">
+			<span class="item item8"></span>
+			<span class="item item8"></span>
+			<span class="item item8"></span>
+		</div>
+	</div>
+</body>
\ No newline at end of file
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1125/1125 1.html" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1125/1125 1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..32cc6147b0f91a31a49f7b53dfbf68f42003f5b1
--- /dev/null
+++ "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1125/1125 1.html"	
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+	</head>
+	<body>
+	<div style="width: 500px; height: 500px; display: grid; grid-template-rows: repeat(2, 20%) 60%; color: white; font-size: 50px;">
+		<div style="display: grid; grid-template-columns: repeat(2, 50%);">
+			<div style="background-color: red;">50%</div>
+			<div style="background-color: green;">50%</div>
+		</div>
+		<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
+			<div style="background-color: teal;">33%</div>
+			<div style="background-color: yellow">33%</div>
+			<div style="background-color: gold;">33%</div>
+		</div>
+		<div style="display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); grid-template-areas: 'a b c d' 'e e f f' 'e e f f';">
+			<div style="background-color: pink; grid-area: a;">25%</div>
+			<div style="background-color: purple; grid-area: b;">25%</div>
+			<div style="background-color: blue; grid-area: c;">25%</div>
+			<div style="background-color: black; grid-area: d;">25%</div>
+			<div style="background-color: red; grid-area: e;">50%</div>
+			<div style="background-color: green; grid-area: f;">50%</div>
+		</div>
+	</div>
+
+
+	</body>
+</html>
diff --git "a/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1125/\351\252\260\345\255\220.html" "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1125/\351\252\260\345\255\220.html"
new file mode 100644
index 0000000000000000000000000000000000000000..51eee2d70865e1b6cb96936089c56e84878add4d
--- /dev/null
+++ "b/\351\231\210\344\277\212\346\234\227H5Css3\344\275\234\344\270\232/1125/\351\252\260\345\255\220.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;
+        place-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;
+        place-self: center center;
+    }
+    .box2>div:nth-child(2){
+        grid-area: 2/2/3/3;
+        place-self: center center;
+    }
+    .box3>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        place-self: center center;
+    }
+    .box3>div:nth-child(2){
+        grid-area: 2/2/3/3;
+        place-self: center center;
+    }
+    .box3>div:nth-child(3){
+        grid-area: 3/3/4/4;
+        place-self: center center;
+    }
+    .box4>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        place-self: end end;
+    }
+    .box4>div:nth-child(2){
+        grid-area: 1/3/2/4;
+        place-self: end start;
+    }
+    .box4>div:nth-child(3){
+        grid-area: 3/1/4/2;
+        place-self: start end;
+    }
+    .box4>div:nth-child(4){
+        grid-area: 3/3/4/4;
+        place-self: start start;
+    }
+    .box5>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        place-self: end end;
+    }
+    .box5>div:nth-child(2){
+        grid-area: 1/3/2/4;
+        place-self: end start;
+    }
+    .box5>div:nth-child(3){
+        grid-area: 3/1/4/2;
+        place-self: start end;
+    }
+    .box5>div:nth-child(4){
+        grid-area: 3/3/4/4;
+        place-self: start start;
+    }
+    .box5>div:nth-child(5){
+        grid-area: 2/2/3/3;
+        place-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>
