diff --git "a/\345\274\240\346\200\235\345\251\267/11-15/01.html" "b/\345\274\240\346\200\235\345\251\267/11-15/01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..68108e81b1a424110b557c4a72105f151fea4597
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-15/01.html"
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>雪景2</title>
+    <style>
+        * {
+            padding: 0px;
+            margin: 0px;
+            list-style: none;
+        }
+
+        :root {
+            height: 100%;
+
+        }
+
+        body {
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: #000;
+        }
+
+        canvas {
+            border: 1px solid black;
+            box-sizing: border-box;
+            background-image:url("j/1.jpg");
+            background-size: cover;
+        }
+    </style>
+</head>
+
+<body>
+    <canvas height="700px" width="1500px"></canvas>
+    <script>
+        var oCanvas = document.getElementsByTagName('canvas')[0];
+        var ctx = oCanvas.getContext('2d');
+        
+        // 获取画布宽高
+        var height = oCanvas.height;
+        var width = oCanvas.width;
+
+        // 初始旋转角度的倍数
+        var rotateCount = 0; 
+
+        // 生成一片随机雪的信息（在画布的位置、大小、长度、x轴和y轴的速度、自身旋转速度）
+        function randomSnow() {
+            var left = parseInt(Math.random() * width);
+            var top = 50;
+            var snowRotateDeg = parseInt(Math.random() * 10 + 5);
+            var snowLength = parseInt(Math.random() * 10 + 10) / 2;    //该值为雪花每条线的一半
+            var snowSpeedX = parseInt(Math.random() * 10 + 3);
+            var snowSpeedY = parseInt(Math.random() * 10 + 2);
+
+            // 让画布中一半的雪花向左下角移动
+            if (Math.random() < 0.5) {
+               
+                snowSpeedX *= (.5 - Math.random()) * 2;
+
+            }else{
+                // snowSpeedX /= 5;
+            }
+
+            // 将雪花信息返回到外面
+            return {
+                left: left,
+                top: top,
+                snowRotateDeg: snowRotateDeg,
+                snowLength: snowLength,
+                snowSpeedX: snowSpeedX,
+                snowSpeedY: snowSpeedY
+            }
+
+        }
+
+
+        // 根据随机生成的雪的信息在画布中画出雪花  
+        function drawSnow(deg, snow) {
+            ctx.beginPath();
+
+            // θ角满足正弦规律，即0度时渲染雪花的一条线为竖直方向；θ1表示雪花第一条线与y轴正半轴的夹角
+            var θ1 = deg % 60 * (Math.PI / 180);
+            ctx.moveTo(snow.left + snow.snowLength * Math.sin(θ1), snow.top + snow.snowLength * Math.cos(θ1));
+            ctx.lineTo(snow.left - snow.snowLength * Math.sin(θ1), snow.top - snow.snowLength * Math.cos(θ1));
+            ctx.strokeStyle = "#fff";
+            ctx.lineCap = 'round';
+            ctx.lineWidth = snow.snowLength * 4 / 9;
+            ctx.stroke();
+            ctx.beginPath();
+
+            // θ1表示雪花第二条线与y轴正半轴的夹角
+            var θ2 = (60 - deg % 60) * (Math.PI / 180);
+
+            ctx.moveTo(snow.left - snow.snowLength * Math.sin(θ2), snow.top + snow.snowLength * Math.cos(θ2));
+            ctx.lineTo(snow.left + snow.snowLength * Math.sin(θ2), snow.top - snow.snowLength * Math.cos(θ2));
+            ctx.strokeStyle = "#fff";
+            ctx.lineCap = 'round';
+            ctx.lineWidth = snow.snowLength * 4 / 9;
+            ctx.stroke();
+            ctx.beginPath();
+
+            var θ3;
+            if (deg % 60 + 60 > 90) {
+                // 随着后续的旋转，deg值会越来越大，也就存在摩除60还比30大的情况，而此时雪花的第三条线就会被挤到随机点的第四象限中，并横跨二、四象限
+                // 该θ3表示雪花第三条线与x轴正半轴的夹角
+                θ3 = (deg % 60 - 30) * (Math.PI / 180);
+                ctx.moveTo(snow.left - snow.snowLength * Math.cos(θ3), snow.top + snow.snowLength * Math.sin(θ3));
+                ctx.lineTo(snow.left + snow.snowLength * Math.cos(θ3), snow.top - snow.snowLength * Math.sin(θ3));
+            } else {
+
+                // 该θ3表示雪花第三条线第一次渲染时与x轴正半轴的夹角
+                θ3 = (30 - deg % 60) * (Math.PI / 180);
+                ctx.moveTo(snow.left - snow.snowLength * Math.cos(θ3), snow.top - snow.snowLength * Math.sin(θ3));
+                ctx.lineTo(snow.left + snow.snowLength * Math.cos(θ3), snow.top + snow.snowLength * Math.sin(θ3));
+            }
+            ctx.strokeStyle = "#fff";
+            ctx.lineCap = 'round';
+            ctx.lineWidth = snow.snowLength * 4 / 9;
+            ctx.stroke();
+
+        }
+
+        // 在画布中展示的雪花
+        var snowArr = [];
+
+        // 每个30毫秒创建一片雪花，
+        setInterval(function () {
+            var snow = randomSnow();
+            snowArr.push(snow);
+            snowArr = snowArr.filter(function (item) {
+
+                // 容器只保存当前还在画布的雪花
+                return item.top < height;
+            })
+        }, 30)
+
+        // 每50毫秒重新绘制一次画布
+        setInterval(function () {
+            ctx.clearRect(0, 0, width, height);
+            snowArr.forEach(function (ele, index) {
+                drawSnow(ele.snowRotateDeg * rotateCount, ele);
+                ele.top += ele.snowSpeedY;
+                ele.left += ele.snowSpeedX;
+            })
+            rotateCount++;
+        }, 50)
+
+
+
+    </script>
+</body>
+</html>
diff --git "a/\345\274\240\346\200\235\345\251\267/11-15/02.html" "b/\345\274\240\346\200\235\345\251\267/11-15/02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..56987469ac0896f17763ac3ae7fdc6dfc7ffb3a9
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-15/02.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>雪景1</title>
+    <style>
+        *{padding: 0;margin: 0;}
+        body{
+            background:#000;
+            width: 100%;
+            height: 100%;
+            overflow:hidden;
+            background-image:url("j/1.jpg");
+            background-size: cover;
+        }
+    </style>
+</head>
+<body>
+    <div id="flame"></div>
+    <script>
+     
+ 
+        function Obj(){}  //创建一个对象
+     
+        /*为这个对象添加一个具有一个参数的原型方法*/
+        Obj.prototype.draw=function(o){
+            var speed=0;   //雪花每次下落的数值（10px）
+            var startPosLeft=Math.ceil(Math.random()*document.documentElement.clientWidth);//设置雪花随机的开始x值的大小
+            o.style.opacity=(Math.ceil(Math.random()*3)+7)/10;  //设置透明度
+            o.style.left=startPosLeft+'px'; 
+            o.style.color="#fff";
+            o.style.fontSize=12+Math.ceil(Math.random()*14)+'px';
+            setInterval(function(){
+                //雪花下落的top值小鱼屏幕的可视区域高时执行下列
+                if(speed<document.documentElement.clientHeight){
+                    o.style.top=speed+'px';
+                    o.style.left=startPosLeft+Math.ceil(Math.random()*8)+'px';
+                    speed+=10;
+                }
+                else{
+                    o.style.display='none';
+                }
+            },400);
+        }
+     
+        var flame=document.getElementById('flame');
+      
+        /*使用setInterval定时器每800毫秒创建一个雪花*/
+        setInterval(function(){
+            var odiv=document.createElement('div');  //创建div
+            odiv.innerHTML="✽";   //div的内容
+            odiv.style.position='absolute';  //div的绝对定位
+            flame.appendChild(odiv);   //把创建好的div放进flame中
+            var obj=new Obj();   //创建函数
+            obj.draw(odiv);  //执行obj的draw方法
+        },800);  
+     
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-15/j/1.jpg" "b/\345\274\240\346\200\235\345\251\267/11-15/j/1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..a2061a436928f857c08d8c840e58376cae9cc644
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-15/j/1.jpg" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-17/1.html" "b/\345\274\240\346\200\235\345\251\267/11-17/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7a2470f641a0be4c04e559cb679541404ad62f3d
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-17/1.html"
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>太极八卦图</title>
+    <style>
+        body {
+            background-color: #cccccc;
+        }
+    
+        div {
+            position: relative;
+            width: 200px;
+            height: 400px;
+            background-color: #fff;
+            border-left: 200px solid #000;
+            margin: 100px auto;
+            border-radius: 50%;
+            animation: xuanzhuan 4s linear infinite;
+            animation: name duration timing-function delay iteration-count direction fill-mode;
+    
+        }
+       /* 动画 */
+        /* @keyframes xuanzhuan {
+            0% {
+                transform: rotate(0deg);
+            }
+    
+            100% {
+                transform: rotate(360deg);
+            }
+        } */
+    
+        div::before {
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translate(-100%);
+            content: '百';
+            line-height: 50px;
+            text-align: center;
+            color: #000;
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+            background-color: #fff;
+            border: 75px solid #000;
+            border-radius: 50%;
+        }
+    
+        div::after {
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translate(-100%);
+            content: '万';
+            line-height: 50px;
+            text-align: center;
+            color: #fff;
+            display: inline-block;
+            width: 50px;
+            height: 50px;
+            background-color: #000;
+            border: 75px solid #fff;
+            border-radius: 50%;
+        }
+    </style>
+</head>
+<body>
+    <div></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-17/2.html" "b/\345\274\240\346\200\235\345\251\267/11-17/2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..177757eafce8c8616ff9624b151c98bdaf7bbc95
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-17/2.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>太极八卦阵2</title>
+    <style>
+        body{
+            background-color: #cccccc;
+        }
+        div{
+            position: relative;
+            width: 200px;
+            height: 400px;
+            background-color: aliceblue;
+            border-left: 200px solid #000000;
+            margin: 100px auto;
+            /* 变成圆形 */
+            border-radius: 50%;
+        }
+        div::before{
+            position: absolute;
+            top: 0;
+            left: 50%;
+            transform: translate(-100%);
+            content: '';
+            line-height: 50px;
+            text-align: center;
+            color: black;
+            display: inline-block;
+            height: 50px;
+            width: 50px;
+            background-color: white;
+            border: 75px solid black;
+            border-radius: 50%;
+
+        }
+        div::after{
+            position: absolute;
+            bottom: 0;
+            left: 50%;
+            transform: translate(-100%);
+            content: '';
+            line-height: 50px;
+            text-align: center;
+            color: white;
+            display: inline-block;
+            height: 50px;
+            width: 50px;
+            background-color: black;
+            border: 75px solid white;
+            border-radius: 50%;
+        }
+    </style>
+</head>
+<body>
+    <div></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-18/1.html" "b/\345\274\240\346\200\235\345\251\267/11-18/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..897243119c681b8d6e6b01cdec3600122ccf5d8e
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-18/1.html"
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Do作业</title>
+    <style>
+        p.a1{
+            white-space:nowrap;
+         /* 文本不会换行，文本会在在同一行上继续 */
+        }
+        p.a2{
+            white-space: pre;
+            /* 空白会被浏览器保留 */
+        }
+        p.a3{
+            white-space: pre-line;
+            /* 合并空白符序列,但是保留换行符 */
+        }
+        p.a4{
+            white-space: normal;
+            /* 默认，空白会被浏览器忽略 */
+        }
+        p.a5{
+            white-space: pre-wrap;
+            /* 合并空白符序列，但是正常进行交换  */
+        }
+        p.a6{
+            white-space: inherit;
+            /* 	规定应该从父元素继承 white-space 属性的值 */
+        }
+    </style>
+</head>
+<body>
+    <h3>white-space</h3>
+    <p class="a1">
+        这是一些文本。
+        这是一些文本。
+        这是一些文本。
+        这是一些文本。
+        这是一些文本。
+        这是一些文本。
+        这是一些文本。
+        这是一些文本。
+        这是一些文本。
+        这是一些文本。
+        这是一些文本。
+        这是一些文本。</p>
+        <p class="a2">
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。
+            这是一些文本。</p>
+        <p class="a3">
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。
+                这是一些文本。</p>
+        <p class="a4">
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。
+                    这是一些文本。</p>
+         <p class="a5">
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。
+                        这是一些文本。</p>
+        <p class="a6">
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。
+                            这是一些文本。</p>  
+</body>
+</html>     
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-18/2.html" "b/\345\274\240\346\200\235\345\251\267/11-18/2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9e4927ae0e28c6e5d274ac4035556ea3c1c3515e
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-18/2.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>qiongha</title>
+    <style>
+        p.a1{
+            word-break: break-all;
+            /* 允许在单词内换行 */
+            border: 1px solid #000000;
+            width: 11em;
+        }
+        p.a2{
+            word-break: normal;
+            /* 使用浏览器默认的换行规则 */
+            border: 1px solid #000000;
+            width: 11em;
+        }
+        p.a3{
+            word-break: keep-all;
+            /* 只能在半角空格或连字符处换行 */
+            border: 1px solid #000000;
+            width: 11em;
+        }
+    </style>
+</head>
+<body>
+    <h3>word-break</h3>
+    <p class="a1">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+    <p class="a2">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+    <p class="a3">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-18/3.html" "b/\345\274\240\346\200\235\345\251\267/11-18/3.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d9e98a3acdfad59a485deba0ea770e23d9ae2abb
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-18/3.html"
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>骑着扫把D</title>
+    <style>
+        p.a1{
+            word-wrap: normal;
+            /* 只在允许的断字点换行（浏览器默认处理） */
+            border: 1px solid #000000;
+            width: 11em;
+        }
+        p.a2{
+            word-wrap: break-word;
+            /*在长单词或 URL 地址内部进行换行 */
+            border: 1px solid #000000;
+            width: 11em;
+        }
+    </style>
+</head>
+<body>
+    <h3>word-wrap</h3>
+    <p class="a1">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+    <p class="a2">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-18/4.html" "b/\345\274\240\346\200\235\345\251\267/11-18/4.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3c65361a869d4c5f3e44ddc86724087802e5efd5
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-18/4.html"
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Do</title>
+    <style>
+        p.a1{
+            word-spacing: normal;
+            /* 定义单词间的标准空间 */
+       
+        }
+        p.a2{
+            word-spacing: length;
+            /* 	定义单词间的固定空间*/
+            
+        }
+        p.a3{
+            word-spacing: inherit;
+            /* 规定应该从父元素继承 word-spacing 属性的值 */
+          
+        }
+    </style>
+</head>
+<body>
+    <h3>word-spacing</h3>
+    <p class="a1">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+    <p class="a2">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+    <p class="a3">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-18/5.html" "b/\345\274\240\346\200\235\345\251\267/11-18/5.html"
new file mode 100644
index 0000000000000000000000000000000000000000..501af46b032a9e25dfea82146c31fa9cbe592f0b
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-18/5.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>
+    <style>
+        p.a1{
+            word-break: break-all;
+            /* 允许在单词内换行 */
+            border: 1px solid #000000;
+            width: 11em;
+        }
+        p.a2{
+            word-break: normal;
+            /* 使用浏览器默认的换行规则 */
+            border: 1px solid #000000;
+            width: 11em;
+        }
+        p.a3{
+            word-break: keep-all;
+            /* 只能在半角空格或连字符处换行 */
+            border: 1px solid #000000;
+            width: 11em;
+        }
+    </style>
+</head>
+<body>
+    <h3>letter-spacing</h3>
+    <p class="a1">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+    <p class="a2">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+    <p class="a3">Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separated sequence of one or more dictionary words.</p>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-19/1.html" "b/\345\274\240\346\200\235\345\251\267/11-19/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..deb45be6a3dd274270e9c7254f9773caef95ef33
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-19/1.html"
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DoDoDo</title>
+</head>
+<body>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/1.html" "b/\345\274\240\346\200\235\345\251\267/11-22/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..811e4f40e6192029bd90b061195d345683458a30
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-22/1.html"
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>三丽鸥</title>
+    <style>
+        h2{
+            width: 100%;
+            height: 80px; 
+            background-color: pink;
+            text-align: center;
+            color: white; 
+            font-size: 30px
+          ;
+        }
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        body{
+            background: rgb(223, 176, 205);
+          
+      }
+      .box {
+        column-count: 5;
+        column-gap: 0;
+        padding: 0 50px;
+      }
+      figure {
+        border: 2px solid pink;
+        padding: 5px;
+        break-inside: avoid;
+        color: rgb(255, 192, 203);
+        text-align: center;
+        font-size: 20px;
+        margin: 0 5px 5px;
+      }
+      img {
+        width: 100%;
+      }
+     
+    </style>
+</head>
+<body>
+    <h2>三丽鸥</h2>
+    <div class="box">
+        <figure>
+          <img src="i/k1.jpg" alt="" />
+        </figure>
+        <figure>
+            <img src="i/b1.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/m1.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/y1.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q2o.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/m2.gif" alt="" />
+          </figure>
+          <figure>
+            <img src="i/m2.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/k2.gif" alt="" />
+          </figure>
+          <figure>
+            <img src="i/qq.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q3.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/m3.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/b3.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/b4.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/m4.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/aaa.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q2o.jpg" alt="" />
+          </figure>
+      </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/2.html" "b/\345\274\240\346\200\235\345\251\267/11-22/2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..ae01bcbb5e9e8777da45392a5049fee0027bbc03
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-22/2.html"
@@ -0,0 +1,161 @@
+<!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>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        background: rgb(58, 67, 76);
+        background: url(../img/a.png), url(../img/bg.gif) rgb(58, 67, 76);
+      }
+      .box {
+        column-count: 5;
+        column-gap: 0;
+        padding: 0 50px;
+      }
+      figure {
+        border: 2px solid pink;
+        padding: 5px;
+        break-inside: avoid;
+        color: rgb(255, 192, 203);
+        text-align: center;
+        font-size: 20px;
+        margin: 0 5px 5px;
+      }
+      img {
+        width: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="box">
+      <audio
+        src="../audio/zhoujie.mp3"
+        controls="controls"
+        autoplay="autoplay"
+      ></audio>
+      <figure>
+        <img src="../img/1.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/2.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/3.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/4.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/5.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/6.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/7.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/8.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/9.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/10.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/11.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/12.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/13.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/14.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/15.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/16.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/17.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/18.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/19.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/20.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/21.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/22.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/23.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/24.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/25.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/26.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/27.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/28.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+      <figure>
+        <img src="../img/29.jpg" alt="" />
+        <figcaption>往后余生，平淡是你</figcaption>
+      </figure>
+    </div>
+  </body>
+</html>
+
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/1.html" "b/\345\274\240\346\200\235\345\251\267/11-22/i/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9b8f79d9f9a5b96fa5b7db4d912ae9ab06bf64ed
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-22/i/1.html"
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>三丽鸥</title>
+    <style>
+        h2{
+            width: 100%;
+            height: 100px; 
+            background-color: pink;
+            text-align: center;
+            color: white; 
+            font-size: 30px
+        }
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        body{
+            background: rgb(223, 176, 205);
+          
+      }
+      .box {
+        column-count: 5;
+        column-gap: 0;
+        padding: 0 50px;
+      }
+      figure {
+        border: 2px solid pink;
+        padding: 5px;
+        break-inside: avoid;
+        color: rgb(255, 192, 203);
+        text-align: center;
+        font-size: 20px;
+        margin: 0 5px 5px;
+      }
+      img {
+        width: 100%;
+      }
+     
+    </style>
+</head>
+<body>
+    <h2>三丽鸥</h2>
+    <div class="box">
+        <figure>
+          <img src="i/k1.jpg" alt="" />
+        </figure>
+        <figure>
+            <img src="i/b1.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/m1.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/y1.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q2o.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q.jpg" alt="" />
+          </figure>
+      </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/aaa.webp" "b/\345\274\240\346\200\235\345\251\267/11-22/i/aaa.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..ef15fd8ed47ce32bb67fa9e6be824fda06e70e80
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/aaa.webp" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/b1.jpg" "b/\345\274\240\346\200\235\345\251\267/11-22/i/b1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..61342b8b23c03b12b85842626cac0b938113a9a0
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/b1.jpg" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/b2.webp" "b/\345\274\240\346\200\235\345\251\267/11-22/i/b2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..19796bc594478544235c23556c323284a2d2229a
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/b2.webp" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/b3.webp" "b/\345\274\240\346\200\235\345\251\267/11-22/i/b3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..68f55beb9f0931d27602d9dd7247b0c3800b2053
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/b3.webp" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/b4.webp" "b/\345\274\240\346\200\235\345\251\267/11-22/i/b4.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..fdcf09840beb13cf25ed1115168a83022dafcbbd
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/b4.webp" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/k1.jpg" "b/\345\274\240\346\200\235\345\251\267/11-22/i/k1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2e843ecfabdc3b4c4cac5013f538248b9847c674
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/k1.jpg" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/k2.gif" "b/\345\274\240\346\200\235\345\251\267/11-22/i/k2.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..a4f7da70de6ef7f6b3fc744ca66e5f93b3aae513
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/k2.gif" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/m1.jpg" "b/\345\274\240\346\200\235\345\251\267/11-22/i/m1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..bc531ea78311550f21deaff467e2465585abab71
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/m1.jpg" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/m2.gif" "b/\345\274\240\346\200\235\345\251\267/11-22/i/m2.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..cbe766122c4f0a4ebeaa02540b4de4b31ddbca55
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/m2.gif" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/m2.webp" "b/\345\274\240\346\200\235\345\251\267/11-22/i/m2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..1f45d4904bda5c92a0ce783f2d26b1c86afbf6bb
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/m2.webp" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/m3.webp" "b/\345\274\240\346\200\235\345\251\267/11-22/i/m3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..220dc04a156666d6edccef054443af24edf5973f
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/m3.webp" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/m4.webp" "b/\345\274\240\346\200\235\345\251\267/11-22/i/m4.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..d7e54f8bd7430675c94e87474ac805d32103619e
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/m4.webp" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/q.jpg" "b/\345\274\240\346\200\235\345\251\267/11-22/i/q.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e15a9a877f7e105bcd4c8fe0d684c94f3b39a650
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/q.jpg" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/q2o.jpg" "b/\345\274\240\346\200\235\345\251\267/11-22/i/q2o.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..29e555700e500270ef136fbb3f5a0cce4e112dd1
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/q2o.jpg" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/q3.webp" "b/\345\274\240\346\200\235\345\251\267/11-22/i/q3.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..6d27ca8a7764ffd3315ea8c18497aa6efc0a9442
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/q3.webp" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/qq.webp" "b/\345\274\240\346\200\235\345\251\267/11-22/i/qq.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..d58452192cbbb6f2f3764ddd09fa44ed0e5f67f0
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/qq.webp" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/u.webp" "b/\345\274\240\346\200\235\345\251\267/11-22/i/u.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..49f9ac1e95fa65d7bd041f690f8cc3b5792f98a7
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/u.webp" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/i/y1.jpg" "b/\345\274\240\346\200\235\345\251\267/11-22/i/y1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cca12c15ff0ed86c23fb6f6acd6536f7ccbe79f8
Binary files /dev/null and "b/\345\274\240\346\200\235\345\251\267/11-22/i/y1.jpg" differ
diff --git "a/\345\274\240\346\200\235\345\251\267/11-22/\344\270\211\344\270\275\351\270\245.html" "b/\345\274\240\346\200\235\345\251\267/11-22/\344\270\211\344\270\275\351\270\245.html"
new file mode 100644
index 0000000000000000000000000000000000000000..961e79ef29bc80001791881db9089277c2091459
--- /dev/null
+++ "b/\345\274\240\346\200\235\345\251\267/11-22/\344\270\211\344\270\275\351\270\245.html"
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>三丽鸥</title>
+    <style>
+        h2{
+            width: 100%;
+            height: 80px; 
+            background-color: pink;
+            text-align: center;
+            color: white; 
+            font-size: 30px
+          ;
+        }
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        body{
+            background: rgb(223, 176, 205);
+          
+      }
+      .box {
+        column-count: 5;
+        column-gap: 0;
+        padding: 0 50px;
+      }
+      figure {
+        border: 2px solid pink;
+        padding: 5px;
+        break-inside: avoid;
+        color: rgb(255, 192, 203);
+        text-align: center;
+        font-size: 20px;
+        margin: 0 5px 5px;
+      }
+      img {
+        width: 100%;
+      }
+     
+    </style>
+</head>
+<body>
+    <h2>三丽鸥</h2>
+    <div class="box">
+        <figure>
+          <img src="i/k1.jpg" alt="" />
+        </figure>
+        <figure>
+            <img src="i/b1.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/m1.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/m3.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/y1.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q2o.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/q.jpg" alt="" />
+          </figure>
+          <figure>
+            <img src="i/m2.gif" alt="" />
+          </figure>
+          <figure>
+            <img src="i/m2.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/k2.gif" alt="" />
+          </figure>
+          <figure>
+            <img src="i/qq.webp" alt="" />
+          </figure>
+          <!-- <figure>
+            <img src="i/q3.webp" alt="" />
+          </figure> -->
+        
+          <figure>
+            <img src="i/b3.webp" alt="" />
+          </figure>
+          <figure>
+            <img src="i/b4.webp" alt="" />
+          </figure>
+          <!-- <figure>
+            <img src="i/m4.webp" alt="" />
+          </figure> -->
+          <figure>
+            <img src="i/aaa.webp" alt="" />
+          </figure>
+          <!-- <figure>
+            <img src="i/q2o.jpg" alt="" />
+          </figure> -->
+      </div>
+</body>
+</html>
\ No newline at end of file
