diff --git "a/\351\202\223\351\233\250\346\271\230/20240909-htnl\346\216\222\347\211\210\350\241\250\347\255\276.md" "b/\351\202\223\351\233\250\346\271\230/20240909-htnl\346\216\222\347\211\210\350\241\250\347\255\276.md"
index 3938a5afe4de7ba0b978b7c0172d2eeb5f50a3ca..284b515a6bbcad7b7eadf1f7cc5ab3525abd81a0 100644
--- "a/\351\202\223\351\233\250\346\271\230/20240909-htnl\346\216\222\347\211\210\350\241\250\347\255\276.md"
+++ "b/\351\202\223\351\233\250\346\271\230/20240909-htnl\346\216\222\347\211\210\350\241\250\347\255\276.md"
@@ -15,6 +15,6 @@
 ### 5.换行标签
     <br/>
 
-### 6.<div>和<span>
+### 6.<div>和<p>
     <div>:可以把标签中的内容分割为独立的区块，必须独占一行。
-    <span>：和<div>作用一样，但不换行。
\ No newline at end of file
+    <p>：和<div>作用一样，但不换行。
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/20240918-\350\241\250\346\240\274.md" "b/\351\202\223\351\233\250\346\271\230/20240918-\350\241\250\346\240\274.md"
index 28ee8ce8f08db8ecddbc2fc33840002ac60fdb36..db61ee32eb2432c13d14078a47ce2685f4134d47 100644
--- "a/\351\202\223\351\233\250\346\271\230/20240918-\350\241\250\346\240\274.md"
+++ "b/\351\202\223\351\233\250\346\271\230/20240918-\350\241\250\346\240\274.md"
@@ -23,7 +23,7 @@
     </table>
 #### 单元格合并
 
-    跨行合并：rowspan="x"     跨列合并：colspan="y"  
+    跨行合并：rowp="x"     跨列合并：colp="y"  
 
 ### CSS
 
diff --git "a/\351\202\223\351\233\250\346\271\230/20241104-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200.md" "b/\351\202\223\351\233\250\346\271\230/20241104-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..59ba21cb296cd01aef317199260fe50110233c68
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/20241104-\345\223\215\345\272\224\345\274\217\345\270\203\345\261\200.md"
@@ -0,0 +1,25 @@
+### 媒体查询
+1. 媒体查询是CSS的一个强大功能，能帮助我们根据不同的设备特性（比如屏幕尺寸）来调整网页的样式。
+### 媒体查询的基本结构
+```css
+@media (条件) {  
+    /* 在这里写CSS样式 */  
+}
+```
+### 常用的媒体特性
+    - `width`：屏幕宽度
+    - `height`：屏幕高度
+    - `max-width`：屏幕最大宽度（小于或等于这个值）
+    - `min-width`：屏幕最小宽度（大于或等于这个值）
+
+```css
+@media (max-width: 600px) {  
+    body {  
+        background-color: lightblue;  
+    }  
+}
+```
+### 注意事项
+    - 媒体查询可以嵌套在CSS文件中，也可以作为单独的CSS文件被链接。
+    - 媒体查询是向下兼容的，旧版浏览器会忽略媒体查询。
+    - 使用媒体查询可以提高页面加载速度，因为它允许浏览器只加载必要的CSS。
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/20241106-\346\220\255\345\273\272\351\235\231\346\200\201\347\275\221\347\253\231.md" "b/\351\202\223\351\233\250\346\271\230/20241106-\346\220\255\345\273\272\351\235\231\346\200\201\347\275\221\347\253\231.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5ccb28aa1d46e87767563d1843617bb09ab0e345
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/20241106-\346\220\255\345\273\272\351\235\231\346\200\201\347\275\221\347\253\231.md"
@@ -0,0 +1,34 @@
+### 服务器
+1. 登录服务器 `-ssh root @hzhf.域名`
+2. 登录后做的事情
+    + 更新软件源 `-apt update`
+    + 更新操作系统&打补丁 `-apt upgrate -y`
+## 搭建一个静态网站
+1. 安装nginx 
+    `命令:yum install -y nginx`
+2. 设置nginx开机启动和现在启动
+    `命令：systemctl start nginx`
+3. 查看nginx情况 
+    `命令：systemctl status nginx`
+4. 在/var/下创建www文件夹，并在www文件下创建以域名为名称的文件夹
+    ```
+    mkdir /var/www
+    cd /var/www
+    mkdir 域名
+    cd 域名
+    ```
+5. 在XShell界面，点击绿色的像文件的那个图标，然后再弹出的界面将自己写的html文件上传到/var/www/域名
+6. 在/etc/nginx/conf.d/目录下，创建一个以域名为名称的配置文件
+    `vim //etc/nginx/conf.d/hzhf.cn.conf`
+7. 在上一步的基础上，按i进入插件模式，输入下面文本，按esc键进入命令模式，按冒号进入底层命令行模式后，输入wq保存退出，修改nginx网站配置后，输入`nginx -t`测试配置文件是否正确，正确返回`success`，不正确按照提示重新修改配置，正确之后执行`systemctl reload nginx`或`nginx -s reload`命令重新加载配置
+    ```
+    server{
+            listen 80; --监听的端口
+            server_name 域名; --监听的域名
+            location / {
+                root /var/www/域名; --网站所在路径
+                index i.html; --默认的首页文件
+            }
+    }
+    ```
+8. 最后，在华为云控制台，进入ECS实例列表，然后点击进入实例，在左边栏最下点击安全组，点击列表中一行的配置规则，将80端口和443端口加入允许访问列表，并保存即可
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html"
index 4c160aca0670a75751cde5115b47219b67448b3d..e716501121c6cbd5df26ea02ed93ad34c7703683 100644
--- "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html"
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241017-\346\265\256\345\212\250.html"
@@ -155,28 +155,28 @@
         <ul class="to">
             <li>
                 <h3>
-                    <span class="l">| 通知公告</span>
+                    <p class="l">| 通知公告</p>
                 </h3>
-                <span class="r">更多 >></span>
+                <p class="r">更多 >></p>
             </li>
         </ul>
         <div class="bian"></div>
         <ul>
             <li>
-                <span class="s1">哈哈哈哈哈哈哈哈哈</span>
-                <span class="s2">2014年9月26号</span>
+                <p class="s1">哈哈哈哈哈哈哈哈哈</p>
+                <p class="s2">2014年9月26号</p>
             </li> 
         </ul>
         <ul>
             <li>
-                <span class="s1">哈哈哈哈哈哈哈哈哈</span>
-                <span class="s2">2014年9月26号</span>
+                <p class="s1">哈哈哈哈哈哈哈哈哈</p>
+                <p class="s2">2014年9月26号</p>
             </li> 
         </ul>
         <ul>
             <li>
-                <span class="s1">哈哈哈哈哈哈哈哈哈</span>
-                <span class="s2">2014年9月26号</span>
+                <p class="s1">哈哈哈哈哈哈哈哈哈</p>
+                <p class="s2">2014年9月26号</p>
             </li> 
         </ul>    
     </div>
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\346\211\213\350\241\250.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\346\211\213\350\241\250.html"
index 8627c6881a224e05d885f7a13c36c56f5c03c1f6..e16ce81ab8817d40320bdfcf8ea5719178a01ed1 100644
--- "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\346\211\213\350\241\250.html"
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241024-\345\212\250\347\224\273/\346\211\213\350\241\250.html"
@@ -36,7 +36,7 @@
             margin-top: 30px;
         }
 
-        .c1 span {
+        .c1 p {
             position: absolute;
             left: 0;
             bottom: -80px;
@@ -52,7 +52,7 @@
             box-shadow: 0 0 15px #AAA;
         }
 
-        .c1:hover span {
+        .c1:hover p {
             bottom: 0;
         }        
     </style>
@@ -65,11 +65,11 @@
 
         <div class="c1">
             <img src="./图片/1.2.png" alt="">
-            <span></span>
+            <p></p>
         </div>
         <div class="c1">
             <img src="./图片/1.3.jpg" alt="">
-            <span></span>
+            <p></p>
         </div>
     </div>
 </body>
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/fish.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/fish.html"
new file mode 100644
index 0000000000000000000000000000000000000000..301bc2ddf338a26dd8b615d732b7829cfb6d8361
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/fish.html"
@@ -0,0 +1,137 @@
+<!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;
+        }
+        .box{
+            width: 640px;
+            height: 100vh;
+            display: block;
+        }
+        .top{
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            height: 90px;
+        }
+        .left{
+            margin-left: 30px;
+            margin-top: 25px;
+        }
+        .left img{
+            width: 20%;
+        }
+        .left span{
+            font-size: 30px;            
+            position: relative;
+            left: 10px;
+            bottom: 10px;
+
+        }
+        .right{
+            margin-top: 30px;
+            margin-right: 30px;
+        }
+        .right img{
+            width: 30%;
+        }
+        .right span{
+            font-size: 19px;            
+            position: relative;
+            bottom: 10px;
+            color: red;
+        }
+        .body{
+            display: flex;
+            justify-content: space-between;
+        }
+        .body img{
+            width: 40%;
+            height: auto;
+            margin-left: 30px;
+            margin-bottom: 30px;
+        }
+        .txt{
+            margin-right: 60px;
+        }
+        .p1{
+            font-size: 25px;
+            margin-bottom: 4px;
+        }
+        .p2{
+            color: red;
+            width: 80px;
+            height: 28px;
+            line-height: 28px;
+            background-color: #fedfe5;
+            text-align: center;
+            border-radius: 5px;
+            margin-top: 10px;
+            margin-bottom: 10px;
+        }
+        .p3{
+            font-size: 18px;
+            color: gray;
+        }
+        .p3 span{
+            float: right;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="top">
+            <div class="left">
+                <img src="https://oss.9ihub.com/test/icon-play.png" alt="">
+                <span>热门视频</span>
+            </div>
+            <div class="right">
+                <img src="https://oss.9ihub.com/test/icon-sx2.png" alt="">
+                <span>换一换</span>
+            </div>
+        </div>
+        <div class="body">
+            <img src="https://oss.9ihub.com/test/toutiao-02.jpeg" alt="">
+            <div class="txt">
+                <p class="p1">无论做什么鱼：最忌放盐</p>
+                <p class="p1">和料酒研制</p>
+                <p class="p2">1万评论</p>
+                <p class="p3">148万次观看<span>司马南频道</span></p>
+            </div>
+        </div>
+        <div class="body">
+            <img src="https://oss.9ihub.com/test/toutiao-02.jpeg" alt="">
+            <div class="txt">
+                <p class="p1">无论做什么鱼：最忌放盐</p>
+                <p class="p1">和料酒研制</p>
+                <p class="p2">1万评论</p>
+                <p class="p3">148万次观看<span>司马南频道</span></p>
+            </div>
+        </div>
+        <div class="body">
+            <img src="https://oss.9ihub.com/test/toutiao-02.jpeg" alt="">
+            <div class="txt">
+                <p class="p1">无论做什么鱼：最忌放盐</p>
+                <p class="p1">和料酒研制</p>
+                <p class="p2">1万评论</p>
+                <p class="p3">148万次观看<span>司马南频道</span></p>
+            </div>
+        </div>
+        <div class="body">
+            <img src="https://oss.9ihub.com/test/toutiao-02.jpeg" alt="">
+            <div class="txt">
+                <p class="p1">无论做什么鱼：最忌放盐</p>
+                <p class="p1">和料酒研制</p>
+                <p class="p2">1万评论</p>
+                <p class="p3">148万次观看<span>司马南频道</span></p>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\344\272\254\344\270\234.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\344\272\254\344\270\234.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5884e9872899a0dbdf19583215c5c9e5b6b1e780
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\344\272\254\344\270\234.html"
@@ -0,0 +1,366 @@
+<!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;
+        }        
+        .box{
+            width: 390px;
+            height: 850px;
+            border: 1px solid black;            
+        }
+        .a{
+            display: flex;
+            justify-content: space-around;
+            width: 390px;
+            height: 45px;
+            background-color: rgb(62, 62, 62);
+        }
+        .a1{
+            width: 15px;
+            height: 15px;
+            background-size: 100%;
+            background-image: url(https://oss.9ihub.com/test/dh5-close.png);        
+            position: relative;
+            top: 14px;
+        }
+        .a2{
+            width: 33px;
+            height: 33px;
+            background-image: url(https://oss.9ihub.com/test/dh5-logo.png);
+            position: relative;
+            background-size: 100%;
+            top: 6px;
+        }
+        .a3{
+            color: white;
+            position: relative;
+            top: 11px;
+        }
+        .a4 button{
+            width: 100px;
+            height: 45px;
+            background-color: rgb(255, 63, 63);
+            color: white;
+            position: relative;
+            bottom: 1px;
+            left: 7px;
+            border: none;
+        }
+        .b{
+            position: sticky;
+            top: 0px;        
+            display: flex;
+            justify-content: space-around;            
+            width: 390px;
+            height: 40px;
+            background-color: rgb(208, 4, 4);            
+        }
+        .b div{
+            margin-top: 6px;
+        }
+        .b1{
+            background-image: url(https://oss.9ihub.com/test/dh5-list.png);
+            width: 20px;
+            height: 20px;
+            background-size: 100%;
+            background-repeat: no-repeat;
+            position: relative;
+            top: 5px;
+        }
+        .b2{
+            width: 260px;
+            height: 25px;            
+            background-image: url(https://oss.9ihub.com/test/dh5-left-jd.png);
+            background-repeat: no-repeat;
+            background-size: 8%;
+            background-position: 13px 3px;
+            background-color: white;
+            border-radius: 15px;
+        }
+        .b2 input{
+            width: 150px;
+            height: 25px;
+            border: none;
+            position: relative;
+            left: 80px;
+            bottom: 31px;
+        }
+        .b4{
+            width: 25px;
+            height: 25px;
+            position: relative;
+            left: 45px;
+            bottom: 6px;
+            border-left: 1px solid rgb(197, 197, 197);
+            background-image: url(https://oss.9ihub.com/test/dh5-jd-sprites.png);
+            background-size: 1000%;
+            background-position: -148px 2px;
+        }
+        .b3 button{
+            background-color: rgb(208, 4, 4);
+            border: none;
+            color: white;
+            position: relative;
+        }
+        .c{
+            background-color: rgb(208, 4, 4);            
+            width: 390px;
+            height: 160px;
+        }
+        .c img{
+            width: 100%;
+        }
+        .d{
+            width: 390px;
+            height: 130px;
+            background-color: rgb(208, 4, 4);            
+            display: flex;
+            justify-content: space-around;
+        }
+        .d1{            
+            background-image: url(https://oss.9ihub.com/test/dh5-nianhuo1.png);
+            width: 100px;
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+        .d2{
+            background-image: url(https://oss.9ihub.com/test/dh5-nianhuo2.png);
+            width: 190px;
+            background-size: 100%;
+            background-repeat: no-repeat;
+            margin-top: 10px;
+        }
+        .d3{
+            background-image: url(https://oss.9ihub.com/test/jdh5-nianhuo3.png);
+            width: 100px;
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+        .f{
+            display: flex;
+            justify-content: space-around;
+            margin-left: 30px;
+            margin-right: 10px;
+            margin-top: 8px;
+        }
+        .f div{
+            width: 60px;
+            height: 60px;
+            background-repeat: no-repeat;
+            background-size: 65%;
+        }
+        .f p{
+            font-size: 13px;
+            color: gray;
+            position: relative;
+            top: 40px;
+            right: 5px;
+        }
+        .f1{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav1.png);
+        }
+        .f2{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav2.png);
+        }
+        .f3{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav3.png);
+        }
+        .f4{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav4.png);
+        }
+        .f5{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav5.png);
+        }
+        .f6{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav6.png);
+        }
+        .f7{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav7.png);
+        }
+        .f5{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav5.png);
+        }
+        .f8{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav8.png);
+        }
+        .f9{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav9.png);
+        }
+        .f10{
+            background-image: url(https://oss.9ihub.com/test/dh5-nav10.png);
+        }
+        .g{
+            margin-top: 8px;
+            display: flex;
+            height: 25px;
+        }
+        .g1{
+            font-weight: 800;
+            margin-left: 15px;
+            margin-right: 5px;
+        }
+        .g2{
+            width: 20px;
+            height: 20px;
+            background-image: url(https://oss.9ihub.com/test/dh5-ms-dc.png);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .g3{
+            width: 15px;
+            height: 15px;
+            background-image: url(https://oss.9ihub.com/test/dh5-ms-right.png);
+            background-repeat: no-repeat;
+            background-size: 100%;
+            position: relative;
+            left: 145px;
+            top: 5px;
+        }
+        .h{
+            display: flex;
+            margin-top: 8px;
+            height: 80px;
+            margin-left: 8px;
+        }
+        .h p{
+            color: rgb(208, 4, 4);
+            font-size: 13px;
+            position: relative;
+            top: 60px;
+            left: 10px;
+        }
+        .h div{
+            width: 60px;
+            margin-left: 3px;
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+        .h1{
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms1.jpg);
+        }
+        .h2{
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms2.jpg);
+        }
+        .h3{
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms3.jpg);
+        }
+        .h4{
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms4.jpg);
+        }
+        .h5{
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms5.jpg);
+        }
+        .h6{
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms6.jpg);
+        }
+        .i{
+            display: flex;
+            height: 240px;
+            margin-top: 20px;
+        }
+        .i div{
+            width: 190px;
+            background-repeat: no-repeat;
+            background-size: 100%;
+            margin-left: 3px;
+        }
+        .i1{
+            background-image: url(https://oss.9ihub.com/test/jdh5-product1.webp);
+        }
+        .i2{
+            background-image: url(https://oss.9ihub.com/test/jdh5-product2.webp);
+        }
+        .j{        
+            width: 390px;
+            position: fixed; 
+            z-index: 1000;
+            left: 0;
+            bottom: 0;
+            height: 50px;
+            background-color: white;
+        }
+        li{
+            float: left;
+            list-style-type: none;
+            margin-left: 30px;
+            line-height: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="a">
+            <div class="a1"></div>
+            <div class="a2"></div>
+            <div class="a3">打开京东APP，购物更轻松</div>
+            <div class="a4">
+                <button>立即打开</button>
+            </div>
+        </div>
+        <div class="b">
+            <div class="b1"></div>
+            <div class="b2">
+                <div class="b4"></div>                
+                <input type="text" placeholder="键盘鼠标套装">
+            </div>
+            <div class="b3">
+                <button>登录</button>
+            </div>
+        </div>
+        <div class="c"><img src="https://oss.9ihub.com/test/jdh5-banner.png" alt=""></div>
+        <div class="d">
+            <div class="d1"></div>
+            <div class="d2"></div>
+            <div class="d3"></div>
+        </div>
+        <div class="f">
+            <div class="f1"><p>京东超市</p></div>
+            <div class="f2"><p>京东超市</p></div>
+            <div class="f3"><p>京东超市</p></div>
+            <div class="f4"><p>京东超市</p></div>
+            <div class="f5"><p>京东超市</p></div>
+        </div>
+        <div class="f">
+            <div class="f6"><p>京东超市</p></div>
+            <div class="f7"><p>京东超市</p></div>
+            <div class="f8"><p>京东超市</p></div>
+            <div class="f9"><p>京东超市</p></div>
+            <div class="f10"><p>京东超市</p></div>
+        </div>
+        <div class="g">
+            <div class="g1">京东秒杀</div>
+            <div class="g1">18</div>
+            <div class="g2"></div>
+            <div class="g1">更多秒杀</div>
+            <div class="g3"></div>
+        </div>
+        <div class="h">
+            <div class="h1"><p>￥25</p></div>
+            <div class="h2"><p>￥2568</p></div>
+            <div class="h3"><p>￥28.8</p></div>
+            <div class="h4"><p>￥19.7</p></div>
+            <div class="h5"><p>￥420</p></div>
+            <div class="h6"><p>￥42.9</p></div>
+        </div>
+        <div class="i">
+            <div class="i1"></div>
+            <div class="i2"></div>
+        </div>
+        <div class="j">
+            <ul>
+                <li>首页</li>
+                <li>分类</li>
+                <li>京喜</li>
+                <li>购物车</li>
+                <li>未登录</li>
+            </ul>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\345\234\243\346\235\257\345\270\203\345\261\200.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\345\234\243\346\235\257\345\270\203\345\261\200.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9e99fa5a890b1ed98554ad544e2937b36d93cd6f
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\345\234\243\346\235\257\345\270\203\345\261\200.html"
@@ -0,0 +1,58 @@
+<!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>
+        .d1 {
+            background-color: green;
+            flex: 0 1 200px;
+        }
+
+        .d3 {
+            background-color: purple;
+            flex: 0 1 200px;
+        }
+
+        [class^="d"] {
+            width: 100px;
+            height: 100vh;
+        }
+
+        .d2 {
+            flex: 1 1 200px;
+        }
+
+        .all {
+            display: flex;
+            width: 100%;
+            height: 100vh;
+        }
+
+        @media (max-width: 600px) {
+            .all {
+                flex-direction: column;
+            }
+            .d2{
+                order: -1;
+                flex: 1 1 200px;
+
+            }
+            .d1,.d3{
+                flex: 0 1 200px;
+            }
+            [class^="d"]{
+                width: 100vw;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="all">
+        <div class="d1"></div>
+        <div class="d2"></div>
+        <div class="d3"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\345\270\203\345\261\200.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\345\270\203\345\261\200.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8d73627b6301089032e6ff8be3db99ce091bf456
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\345\270\203\345\261\200.html"
@@ -0,0 +1,93 @@
+<!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;
+        }
+        .box{
+            width: 760px;
+            height: 560px;
+            border: 20px cornflowerblue solid;
+        }
+        .top{
+            display: flex;            
+            border-bottom: 20px cornflowerblue solid;
+        }
+        .top div{
+            width: 80px;
+            height: 80px;
+            background-color: cornflowerblue;
+            margin: 20px;
+        }
+        .body{
+            display: flex;
+        }
+        .d3{
+            height: 300px;
+            width: 200px;
+            background-color: cornflowerblue;
+            margin: 20px;
+        }
+        .d4{
+            width: 50px;
+            height: 50px;
+            background-color: cornflowerblue;
+            margin-right: 25px;
+        }
+        .a{
+            display: flex;
+            margin-left: 20px;
+        }
+        .right{
+            margin: 20px;
+        }
+        .d5{
+            width: 480px;
+            height: 40px;
+            background-color: cornflowerblue;
+            margin-bottom: 15px;
+        }
+        .d2{
+            position: relative;
+            left: 160px;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="top">
+            <div class="d1"></div>
+            <div class="d1"></div>
+            <div class="d1"></div>
+            <div class="d1"></div>
+            <div class="d2"></div>
+        </div>
+        <div class="body">
+            <div class="left">
+                <div class="d3"></div>
+                <div class="a">
+                    <div class="d4"></div>
+                    <div class="d4"></div>
+                    <div class="d4"></div>
+                </div>
+
+            </div>
+            <div class="right">
+                <div class="d5"></div>
+                <div class="d5"></div>
+                <div class="d5"></div>
+                <div class="d5"></div>
+                <div class="d5"></div>
+                <div class="d5"></div>
+                <div class="d5"></div>
+            </div>
+        </div>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\346\220\272\347\250\213.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\346\220\272\347\250\213.html"
new file mode 100644
index 0000000000000000000000000000000000000000..593c291b32b9fa82ccde68ad72630bf92c331164
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\346\220\272\347\250\213.html"
@@ -0,0 +1,365 @@
+<!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>
+        .box{
+            width: 390px;
+            height: 1000px;
+        }
+        .box>img{
+            width: 100%;         
+            position: relative;
+            top: 50px;   
+        }
+        .top {
+            display: flex;
+            justify-content: space-around;
+            position: relative;
+            top: 50px;
+        }
+        .top div{
+            margin-top: 10px;
+            margin-left: 20px;
+            width: 60px;
+            height: 35px;
+            background-image: url(https://oss.9ihub.com/test/xiecheng-localnav_bg.png);
+            background-size: 60%;
+            background-repeat: no-repeat;
+            font-size: 13px;
+        }
+        .top p{
+            position: relative;
+            top: 23px;
+            right: 8px;
+        }
+        .b{
+            background-position-y: -35px;
+        }
+        .c{
+            background-position-y: -70px;
+        }
+        .d{
+            background-position-y: -105px;
+        }
+        .e{
+            background-position-y: -140px;
+        }
+        .body {
+            margin-top: 30px;
+            margin-left: 2px;
+            color: white;
+        }
+        .a1{
+            display: flex;        
+        }
+        .a2{
+            display: flex;
+            position: relative;
+            bottom: 45px;
+            left: 128px;
+        }
+        .d1{
+            width: 128px;
+            height: 91px;
+            background-color: rgb(250, 124, 90);
+            
+        }
+        .d1>img{
+            width: 100%;
+            position: relative;
+            top: 20px;
+        }
+        .d1 span{
+            position: relative;
+            top: 8px;
+            left: 35px;
+        }
+        .d1 :first-child{
+            border-bottom-right-radius: 5px;
+        }
+        .d2{
+            width: 128px;
+            height: 45px;
+            background-color: rgb(250, 124, 90);
+            margin-left: 1px;
+            text-align: center;
+            line-height: 45px;
+        }
+        .ll{
+            position: relative;
+            top: 50px;
+        }
+        .hh{
+            margin-top: 0px;
+            position: relative;
+            bottom: -8px;
+        }
+        .b1,.b2{
+            background-color: rgb(90, 117, 250);
+        }
+        .xx{
+            margin-top: 0px;
+            position: relative;
+            bottom: 34px;
+        }
+        .c1,.c2{
+            background-color: #55dcc3;
+        }
+        .f{
+            display: flex;
+            justify-content: space-around;
+            position: relative;
+            bottom: 60px;
+            margin-bottom: 25px;
+        }
+        .f div{
+            margin-left: 20px;
+            width: 50px;
+            height: 30px;
+            background-image: url(https://oss.9ihub.com/test/xiecheng-subnav-bg.png);
+            background-repeat: no-repeat;
+            background-size: 60%;
+            margin-bottom: 3px;
+        }
+        .f p{
+            position: relative;
+            top: 15px;
+            right: 9px;
+        }
+        .g{
+            border-top: 0.5px solid gray;
+            padding-top: 15px;
+            display: flex;
+            position: relative;
+            bottom: 45px;
+        }
+        .g div{
+            width: 100px;
+            background-size: 100%;
+            background-image: url(https://oss.9ihub.com/test/xiecheng-hot.png);
+            height: 25px;
+            background-repeat: no-repeat;
+        }
+        .g1{
+            background-position-y: -23px;
+            margin-left: 10px;
+        }
+        .g2{
+            margin-left: 200px;
+            background-position-y: 4px;
+
+        }
+        .foot{
+            display: flex;
+            position: relative;
+            bottom: 35px;
+        }
+        .foot img{
+            width: 100%;
+        }
+        .h{
+            background-color: white;
+            margin-left: 8px;
+            position: fixed;
+            justify-content: space-between;
+			top: 0;
+			left: 0;
+            width: 390px;
+			height: 50px;
+			z-index: 99999999;
+        }
+        .h1{
+            background-color: white;
+            margin-top: 10px;
+            margin-left: 30px;
+            width: 280px;
+            height: 25px;
+            border: 0.5px solid gray;
+            background-image: url(https://oss.9ihub.com/test/xiecheng-sprite.png);
+            background-repeat: no-repeat;
+            background-size: 50%;
+            background-position: -70px -372px;
+            position: relative;
+            top: 5px;
+            border-radius: 5px;
+        }
+        .h2{
+            background-image: url(https://oss.9ihub.com/test/xiecheng-sprite.png);
+            background-repeat: no-repeat;
+            background-position: -45px -187px;
+            height: 25px;
+            width: 50px;
+            position: relative;
+            bottom: 40px;
+            left: 330px;
+            background-size: 200%;
+        }
+        .h2 p{
+            font-size: 13px;
+            color: rgb(0, 153, 255);
+            position: relative;
+            top: 20px;
+            left: 10px;
+        }
+        .h input{
+            width: 240px;
+            height: 22px;
+            position: relative;
+            left: 35px;
+            border: none;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="h">
+            <div class="h1">
+                <input type="text" placeholder="搜索：目的地/酒店/景点/航班号">
+            </div>
+            <div class="h2">
+                <p>我的</p>
+            </div>
+        </div>
+        <img src="https://oss.9ihub.com/test/xiecheng-focus.jpg" alt="">
+        <div class="top">
+            <div>
+                <p>景点·玩乐</p>
+            </div>
+            <div class="b">
+                <p>景点·玩乐</p>
+            </div>
+            <div class="c">
+                <p>景点·玩乐</p>
+            </div>
+            <div class="d">
+                <p>景点·玩乐</p>
+            </div>
+            <div class="e">
+                <p>景点·玩乐</p>
+            </div>
+        </div>
+
+        <div class="body ll">
+            <div class="a1">
+                <div class="d1">
+                    <span>海外酒店</span>
+                    <img src="https://oss.9ihub.com/test/xiecheng-hotel.png" alt="">
+                </div>
+                <div class="d2">
+                     <span>海外酒店</span>
+                </div>
+                <div class="d2">
+                    <span>海外酒店</span>
+                </div>
+            </div>
+            <div class="a2">
+                <div class="d2">
+                    <span>特价酒店</span>
+               </div>
+               <div class="d2">
+                   <span>特价酒店</span>
+               </div>
+            </div>
+        </div>
+        <div class="body hh">
+            <div class="a1">
+                <div class="d1 b1">
+                    <span>海外酒店</span>
+                    <img src="https://oss.9ihub.com/test/xiecheng-hotel.png" alt="">
+                </div>
+                <div class="d2 b2">
+                     <span>海外酒店</span>
+                </div>
+                <div class="d2 b2">
+                    <span>海外酒店</span>
+                </div>
+            </div>
+            <div class="a2">
+                <div class="d2 b2">
+                    <span>特价酒店</span>
+               </div>
+               <div class="d2 b2">
+                   <span>特价酒店</span>
+               </div>
+            </div>
+        </div>
+        <div class="body xx">
+            <div class="a1">
+                <div class="d1 c1">
+                    <span>海外酒店</span>
+                    <img src="https://oss.9ihub.com/test/xiecheng-hotel.png" alt="">
+                </div>
+                <div class="d2 c2">
+                     <span>海外酒店</span>
+                </div>
+                <div class="d2 c2">
+                    <span>海外酒店</span>
+                </div>
+            </div>
+            <div class="a2">
+                <div class="d2 c2">
+                    <span>特价酒店</span>
+               </div>
+               <div class="d2 c2">
+                   <span>特价酒店</span>
+               </div>
+            </div>
+        </div>
+        
+        <div class="f">
+            <div>
+                <p>电话费</p>
+            </div>
+            <div>
+                <p>电话费</p>
+            </div>
+            <div>
+                <p>电话费</p>
+            </div>
+            <div>
+                <p>电话费</p>
+            </div>
+            <div>
+                <p>电话费</p>
+            </div>
+        </div>
+        <div class="f">
+            <div>
+                <p>电话费</p>
+            </div>
+            <div>
+                <p>电话费</p>
+            </div>
+            <div>
+                <p>电话费</p>
+            </div>
+            <div>
+                <p>电话费</p>
+            </div>
+            <div>
+                <p>电话费</p>
+            </div>
+        </div>
+        <div class="g">
+            <div class="g1"></div>
+            <div class="g2"></div>
+        </div>
+
+        <div class="foot">
+            <div><img src="https://oss.9ihub.com/test/xiecheng-pic1.jpg" alt=""></div>
+            <div><img src="https://oss.9ihub.com/test/xiecheng-pic2.jpg" alt=""></div>
+        </div>
+        <div class="foot">
+            <div><img src="https://oss.9ihub.com/test/xiecheng-pic3.jpg" alt=""></div>
+            <div><img src="https://oss.9ihub.com/test/xiecheng-pic4.jpg" alt=""></div>
+        </div>
+        <div class="foot">
+            <div><img src="https://oss.9ihub.com/test/xiecheng-pic5.jpg" alt=""></div>
+            <div><img src="https://oss.9ihub.com/test/xiecheng-pic6.jpg" alt=""></div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\351\205\267\347\213\227.html" "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\351\205\267\347\213\227.html"
new file mode 100644
index 0000000000000000000000000000000000000000..5086a0280e464171815a720f9212de686ec99f20
--- /dev/null
+++ "b/\351\202\223\351\233\250\346\271\230/\344\275\234\344\270\232/20241104-flex2.0/\351\205\267\347\213\227.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>Document</title>
+    <style>
+        .box{
+            display: flex;
+            justify-content: space-around;
+            margin-top: 50px;
+        }
+        .box div{
+            margin-right: 20px;
+        }
+        div img{
+            border-radius: 10px
+        }
+        p{
+            position: relative;
+            bottom: 50px;
+            left: 13px;
+        }
+        p img{
+            width: 12%;
+        }
+        span{
+            position: relative;
+            left: 5px;
+            bottom: 5px;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="d1">
+            <img src="https://oss.9ihub.com/test/flex-01.jpg" alt="">            
+            <p><img src="https://oss.9ihub.com/test/icon_play.png" alt=""><span>2440.0万</span></p>
+        </div>
+        <div class="d2">
+            <img src="https://oss.9ihub.com/test/flex-02.jpg" alt="">
+            <p><img src="https://oss.9ihub.com/test/icon_play.png" alt=""><span>2440.0万</span></p>
+        </div>
+        <div class="d3">
+            <img src="https://oss.9ihub.com/test/flex-03.jpg" alt="">
+            <p><img src="https://oss.9ihub.com/test/icon_play.png" alt=""><span>2440.0万</span></p>
+        </div>
+        <div class="d4">
+            <img src="https://oss.9ihub.com/test/flex-04.jpg" alt="">
+            <p><img src="https://oss.9ihub.com/test/icon_play.png" alt=""><span>2440.0万</span></p>
+        </div>
+    </div>
+    <div class="box">
+        <div class="d5">
+            <img src="https://oss.9ihub.com/test/flex-05.jpg" alt="">
+            <p><img src="https://oss.9ihub.com/test/icon_play.png" alt=""><span>2440.0万</span></p>
+        </div>
+        <div class="d6">
+            <img src="https://oss.9ihub.com/test/flex-06.jpg" alt="">
+            <p><img src="https://oss.9ihub.com/test/icon_play.png" alt=""><span>2440.0万</span></p>
+        </div>
+        <div class="d7">
+            <img src="https://oss.9ihub.com/test/flex-07.jpg" alt="">
+            <p><img src="https://oss.9ihub.com/test/icon_play.png" alt=""><span>2440.0万</span></p>
+        </div>
+        <div class="d8">
+            <img src="https://oss.9ihub.com/test/flex-08.jpg" alt="">
+            <p><img src="https://oss.9ihub.com/test/icon_play.png" alt=""><span>2440.0万</span></p>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file