diff --git "a/\345\224\220\345\256\207\345\247\227/20241023-css\351\200\211\346\213\251\345\231\250.md" "b/\345\224\220\345\256\207\345\247\227/20241023-css\351\200\211\346\213\251\345\231\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..87dae4e80b377fcd84d63da9a95b2585bdd24755
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/20241023-css\351\200\211\346\213\251\345\231\250.md"
@@ -0,0 +1,45 @@
+css3选择器
+```
+div 标签选择器
+.box 类选择器
+#box id选择器
+div p 后代选择器
+div.box 交集选择器
+div,p,span 并集选择器
+div>p 子代选择器
+div+p 选中的div后面相邻的第一个p
+div~p 选中的div后面所有的p
+```
+* 通配符
+
+结构伪类选择器
+```
+格式（第一部分）
+E:first-child匹配父元素的第一个子元素E
+E:last-child匹配父元素的最后一个子元素E
+E:nth-child(n)匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起
+E:nth-child(2n+1)匹配奇数
+E:nth-child(2n)匹配偶数
+E:nth-last-child(n)匹配父元素的倒数第n个子元素E
+格式（第二部分）
+E:first-of-type匹配同类型中的第一个同级兄弟元素E
+E:last-of-type匹配同类型中的最后一个同级兄弟元素E
+E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E
+E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E
+格式：（第三部分）
+E:empty 匹配没有任何子节点（包括空格等text节点）的元素E
+E:target 匹配相关URL指向的E元素。要配合锚点使用
+```
+
+
+属性选择器
+```
+标志性符号[]
+E[title] 选中页面的E元素，并且E存在 title 属性
+E[title="abc"]选中页面的E元素，并且E需要带有title属性，且属性值完全等于abc
+E[attr~=val]选择具有 attr 属性且属性值为：用空格分隔的字词列表，其中一个等于val的E元素.如<div class="dd val"></div>
+E[attr|=val]表示要么是一个单独的属性值，要么这个属性值是以“-”分隔的
+E[title^="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 开头
+E[title$="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值以 abc 结尾
+E[title*="abc"]选中页面的E元素，并且E需要带有 title 属性,属性值任意位置包含abc
+```
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/20241104-flex\345\270\203\345\261\200+\345\252\222\344\275\223\346\237\245\350\257\242.md" "b/\345\224\220\345\256\207\345\247\227/20241104-flex\345\270\203\345\261\200+\345\252\222\344\275\223\346\237\245\350\257\242.md"
new file mode 100644
index 0000000000000000000000000000000000000000..8a9b6c144b99f7a9e4d57868aa78f9bff5e846dc
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/20241104-flex\345\270\203\345\261\200+\345\252\222\344\275\223\346\237\245\350\257\242.md"
@@ -0,0 +1,42 @@
+# flex布局
+弹性盒子：设置了`display:flex`属性的容器就叫弹性盒子
+
+
+### flex-direction 属性
+
+`flex-direction`：用于设置盒子中**子元素**的排列方向。属性值可以是：
+
+| 属性值 | 描述 |
+|:-------------|:-------------|
+| row | 从左到右水平排列子元素（默认值） |
+|column|从上到下垂直排列子元素|
+| row-reverse |从右向左排列子元素 |
+|column-reverse|从下到上垂直排列子元素|
+
+备注：如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。
+
+### flex-wrap 属性
+
+`flex-wrap`：控制子元素溢出时的换行处理。
+
+### justify-content 属性
+
+`justify-content`：控制子元素在主轴上的排列方式。
+
+### justify-content 属性
+
+- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是：
+    - `flex-start` 从主轴的起点对齐（默认值）
+    - `flex-end` 从主轴的终点对齐
+    - `center` 居中对齐
+    - `space-around` 在父盒子里平分
+    - `space-between` 两端对齐 平分
+
+    ### align-items 属性
+
+`align-items`：设置子元素在**侧轴上的对齐方式**。属性值可以是：
+    - `flex-start` 从侧轴开始的方向对齐
+    - `flex-end` 从侧轴结束的方向对齐
+    - `baseline` 基线 默认同flex-start
+    - `center` 中间对齐
+    - `stretch` 拉伸
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/20241106-\347\275\221\347\253\231\346\220\255\345\273\272.md" "b/\345\224\220\345\256\207\345\247\227/20241106-\347\275\221\347\253\231\346\220\255\345\273\272.md"
new file mode 100644
index 0000000000000000000000000000000000000000..fc4f7eca40ef77391d573aed2544e10ed38ac71f
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/20241106-\347\275\221\347\253\231\346\220\255\345\273\272.md"
@@ -0,0 +1,50 @@
+# 搭建一个静态网站
+
+### 1.安装nginx
+
+命令:yum install -y nginx
+
+### 2.设置nginx开机启动和nginx现在启动
+
+命令:ststemctl enable nginx
+
+    systemctl start nginx
+
+### 3.查看nginx情况
+
+systemctl status nginx
+
+### 4.在/var/下创建www文件夹，并在www文件夹下创建以域名为名称的文件夹，用自己的域名tangyushan.cn，所以，创建的文件夹名称就为tangyushan.cn
+
+命令:
+```
+mkdir /var/www
+
+cd  /var/www
+
+mkdir tangyushan.cn
+
+cd tangyushan.cn
+```
+
+### 5.在XShell界面,点击绿色的像文件的那个图标,然后在弹出的界面将自己写的index.html文件上传到/var/www/tangyushan.cn这个路径
+
+### 6.在/etc/nginx/conf.d/目录下，创建一个以域名为名称的配置文件
+
+```
+vim //etc/nginx/conf.d/tangyushan.cn.conf
+```
+### 7.在上一步的基础上，按i键进入插入模式，输入如下文本后，按左上角ESC键进入命令模式，按冒号进入底层命令行模式后，输入 wq!保存退出，修改nginx网站配置后，记得执行nginx -t测试配置文件是否正确，返回success表示正确，那么就可以执行systemctl reload nginx或nginx -s reload命令重新加载配置；如果测试不正确，请按照提示重新修改配置文件
+
+```
+server{
+        listen 80;  #监听的端口
+                server_name tangyushan.cn; #监听的域名 
+                location / {
+                        root  /var/www/tangyushan.cn ;#网站所在路径
+                        index index.html; #默认的首页文件
+        }
+}
+```
+
+### 8.最后，在华为云控制台，进入ECS实例列表，然后点击进入实例，在左边栏最下点击安全组，点击列表中一行的配置规则，将80端口和443端口加入允许访问列表，并保存即可
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/20241107-\345\244\215\344\271\240.md" "b/\345\224\220\345\256\207\345\247\227/20241107-\345\244\215\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..a87a3c302aa19a354ca41574f929e505de975b58
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/20241107-\345\244\215\344\271\240.md"
@@ -0,0 +1,71 @@
+考试的时候先布局好在写样式
+
+# 阿里矢量图标库引用(三种方法)
+
+## 第一种Unicode 引用
+Unicode 是字体在网页端最原始的应用方式，特点是：
+
+支持按字体的方式去动态调整图标大小，颜色等等。
+默认情况下不支持多色，直接添加多色图标会自动去色。
+注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）
+
+Unicode 使用步骤如下：
+
+第一步：拷贝项目下面生成的 @font-face
+@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1731223205797') format('truetype');
+}
+第二步：定义使用 iconfont 的样式
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+第三步：挑选相应图标并获取字体编码，应用于页面
+<span class="iconfont">&#x33;</span>
+"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
+
+
+## 第二种font-class 引用
+font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
+
+与 Unicode 使用方式相比，具有如下特点：
+
+相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
+因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
+使用步骤如下：
+
+第一步：引入项目下面生成的 fontclass 代码：
+<link rel="stylesheet" href="./iconfont.css">
+第二步：挑选相应图标并获取类名，应用于页面：
+<span class="iconfont icon-xxx"></span>
+" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
+
+## 第三种Symbol 引用
+这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
+
+支持多色图标了，不再受单色限制。
+通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
+兼容性较差，支持 IE9+，及现代浏览器。
+浏览器渲染 SVG 的性能一般，还不如 png。
+使用步骤如下：
+
+第一步：引入项目下面生成的 symbol 代码：
+<script src="./iconfont.js"></script>
+第二步：加入通用 CSS 代码（引入一次就行）：
+<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+第三步：挑选相应图标并获取类名，应用于页面：
+<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-01.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-01.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6fd6241aa7035df30db88d15987e8d0713d4b616
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-01.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-02.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-02.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..20aad004aef3db4620e968c68e6ec46cf8561e2c
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-02.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-03.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-03.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1dedde074d0a4dd594e0202935f767e115fed977
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-03.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-04.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-04.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e0f855a6d755756b600197e011c379b331750c59
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-04.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-05.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-05.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0f61aeb8d5d4fd8c633a03adcf79e644c9462361
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-05.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-06.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-06.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2360b947f7eb61cf485d887da190e231085eaf89
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-06.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-07.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-07.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b478cba7e53eda154668f6bd440c23e1ba147a28
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-07.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-08.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-08.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3e9cfb4b00c6616b836bb1c48d4910c2e547910c
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/flex-08.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/icon-play.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/icon-play.png"
new file mode 100644
index 0000000000000000000000000000000000000000..90397f22a7692bd8d87b1c55c11acccee885aced
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/icon-play.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/icon-sx2.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/icon-sx2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..42f24045e7f7595c562edd4e876ae23144285bbd
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/icon-sx2.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/icon_play1.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/icon_play1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c87d350f3ef7dcd681ca0d640852d52b6e6146a9
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/icon_play1.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/toutiao-02.jpeg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/toutiao-02.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..a50ce45c112cc151284427f4de0fd771073aba4f
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/toutiao-02.jpeg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-close.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-close.png"
new file mode 100644
index 0000000000000000000000000000000000000000..545522af337dd7f0451bd2225c72d9faf99a6e62
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-close.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-jd-sprites.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-jd-sprites.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cd7d4b80e0acd94364db0d8d0c21dd1f856036bd
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-jd-sprites.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-left-jd.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-left-jd.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f2554c7f251ea2af09090635c93dadd36b90621a
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-left-jd.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-list.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-list.png"
new file mode 100644
index 0000000000000000000000000000000000000000..0f1fc575dabab1d97f7d4b7c90441f93f0548acb
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-list.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-logo.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-logo.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a11cd81570aa1e8d840e4d634cdc14e728154583
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-logo.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-ms-bj.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-ms-bj.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2db3187a776bce76616e7dfe7070b7edf114f4c2
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-ms-bj.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-ms-dc.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-ms-dc.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b62e195b30dd5f677fc0162c4e2ee86548def84d
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-ms-dc.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-ms-right.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-ms-right.png"
new file mode 100644
index 0000000000000000000000000000000000000000..48dc7c911c9c0029fe2db88d37afb1052f45f257
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-ms-right.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav1.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..afd396d51cdd9e2a59579c2eec7b22ef0307d458
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav1.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav10.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav10.png"
new file mode 100644
index 0000000000000000000000000000000000000000..eaedd3706bb9247a360a84e25d6f3f30962a0ce7
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav10.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav2.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5fb535f4c9aaa0124a742f5e5983072f8da69dd1
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav2.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav3.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..897ff6ece4f5009aa4253932d1525c812ccd2e3c
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav3.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav4.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav4.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f5b3346072bed2fbd449830b1f61a6333c6d297a
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav4.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav5.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav5.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fac33e2de6707981af196fedfffc59eb9e868b51
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav5.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav6.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav6.png"
new file mode 100644
index 0000000000000000000000000000000000000000..cde9a8868388c1e9ff682f7cd03a50c827d552a8
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav6.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav7.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav7.png"
new file mode 100644
index 0000000000000000000000000000000000000000..07292add50dc8830f48666d2191b757e9ad489e6
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav7.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav8.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav8.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fad5653d8b4705ce0cac074080476e1aef0cbab2
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav8.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav9.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav9.png"
new file mode 100644
index 0000000000000000000000000000000000000000..bc45f1dc8f10630bb5a3e8d7f15d3bb309d79747
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nav9.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nianhuo1.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nianhuo1.png"
new file mode 100644
index 0000000000000000000000000000000000000000..5c861440d7d19d639217ddb86cf917f301e5213a
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nianhuo1.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nianhuo2.gif" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nianhuo2.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..43ca2c98c6419a001ad85a2cf459d79ee5136343
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nianhuo2.gif" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nianhuo2.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nianhuo2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c36850b0c0c13cbab67b8bdc1fb1c8083c6a1c33
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/dh5-nianhuo2.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-banner.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-banner.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..03e4a4465b0779b19a1715041ae3661dff903da7
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-banner.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-banner.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-banner.png"
new file mode 100644
index 0000000000000000000000000000000000000000..b00147460cc4b80c7ed692540f1185c0eac70da7
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-banner.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms1.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cd06695e68a6380705723463b87f5e33f95bc2d6
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms1.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms2.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..f6794a0691e8c0487882ccb92c288c8807561c5b
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms2.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms3.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6ecdb70678caad80e8bb7c73a03d544c4d876a31
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms3.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms4.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..d6ffd460c799077d72f16d2b5826146dcbdbdc56
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms4.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms5.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..256e98fcc5098797303d76429ceb3c045f4aa28c
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms5.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms6.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e801b86302ea0ae1107a37d070b82e52fcb34388
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-ms6.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo1.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..326ad5d28f5b066531f52f859f9a7676d6b2a44d
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo1.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo2.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e2079826d262fbdae1ad8660baebc18095fe19f1
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo2.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo3.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..cf078af14cbc46c2546b30434c5749f2eb66dac9
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo3.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo3.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo3.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7181d8704f4bb5481600249529d0d47461eb6c36
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo3.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo4.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e4e5295e1a542031b13dc0a3949d3f0c3707d498
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-nianhuo4.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-product1.webp" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-product1.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..c04d006d35c38befc0c77c7227ae85d9f7137e93
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-product1.webp" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-product2.webp" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-product2.webp"
new file mode 100644
index 0000000000000000000000000000000000000000..acc2fc0a513d9d698faae903d12d6a6c6f5b7a56
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\344\272\254\344\270\234/jdh5-product2.webp" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-focus.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-focus.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..069ce0537d7d45db2c9048f76b79e4abe25280b9
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-focus.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-hot.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-hot.png"
new file mode 100644
index 0000000000000000000000000000000000000000..3d4f024637b08a9f8e400d826fab25eba6d3f059
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-hot.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-hotel.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-hotel.png"
new file mode 100644
index 0000000000000000000000000000000000000000..37da0fcb9ce4b14338d49e52b919485f69e003ca
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-hotel.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-localnav_bg.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-localnav_bg.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6ba0af2e63ded49e6ad26093731b427564dde2a2
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-localnav_bg.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic1.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7705aa7501e842150d1ce783b4bf173532f37b66
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic1.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic2.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..31410a68c7ac02402e4036bc8f734ab0837aa9f3
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic2.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic3.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3e18c9f1ed4b4c4bd548e39a9d7521b8bd690c75
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic3.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic4.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..efed93472231569317f26d6527cf6e762a6868f9
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic4.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic5.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..15cef359fec0483b5ace790c80cce21e596aa5c7
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic5.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic6.jpg" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3852d753c67345fe309e2d245015d269b8718288
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-pic6.jpg" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-sprite.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-sprite.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c62ccfdccb21c8fa3ebd6030e618b23a8ea91356
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-sprite.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-subnav-bg.png" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-subnav-bg.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2604c55046991b9b9498e97fac507a191c4871c6
Binary files /dev/null and "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/img/\346\220\272\347\250\213/xiecheng-subnav-bg.png" differ
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\344\272\254\344\270\234.html" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\344\272\254\344\270\234.html"
new file mode 100644
index 0000000000000000000000000000000000000000..50e75a745fbd9043a551d760f00f49b5cffed678
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\344\272\254\344\270\234.html"
@@ -0,0 +1,492 @@
+<!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: 0px;
+            padding: 0px;
+        }
+        body{
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+        }
+        .box{
+            width: 390px;
+            height: 970px;
+            display: flex;
+            flex-direction: column;
+        }
+        .top{
+            width: 390px;
+            height: 40px;
+            display: flex;
+            background-color: #322e2e;
+        }
+        .x{
+            width: 30px;
+            background-image: url(https://oss.9ihub.com/test/dh5-close.png);
+            background-position: 7px 9px;
+            background-size: 60%;
+            background-repeat: no-repeat;
+        }
+        .a1{
+            width:250px;
+            background-image: url(https://oss.9ihub.com/test/dh5-logo.png);
+            background-repeat: no-repeat;
+            background-position: 3px 5px;
+            background-size: 10%;
+            margin-top: 3px;
+            margin-left: 10px;
+        }
+        .a1>span{
+            font-size: 13px;
+            color: white;
+            position: relative;
+            top: 5px;
+            left: 40px;
+        }
+        .a2{
+            background-color: rgb(242, 79, 79);
+            color: white;
+            width: 110px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .center{
+            width: 390px;
+            height: 310px;
+            display: flex;
+            background-color: rgb(195, 10, 11);
+        }
+        .search{
+            width: 390px;
+            height: 40px;
+            
+        }
+        .s1{
+            width: 390px;
+            height: 40px;       
+            background-color: rgb(195, 10, 11);
+            background-image: url(https://oss.9ihub.com/test/dh5-list.png);
+            background-repeat: no-repeat;
+            background-position: 10px 12px;
+            background-size: 5%;
+            position: sticky;
+            top: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .ssk{
+            width: 260px;
+            height: 30px;
+            background-color: #fff;
+            border-radius: 15px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: -30px;
+            background-image: url(https://oss.9ihub.com/test/dh5-left-jd.png);
+            background-repeat: no-repeat;
+            background-size: 8%;
+            background-position: 8px 8px;
+        }
+        .gan{
+            color: lightgray;
+            position: relative;
+            top: -2px;
+            left: 3px;
+        }
+        .ss{
+            width: 25px;
+            height: 25px;
+            background-image: url(https://oss.9ihub.com/test/dh5-jd-sprites.png);
+            background-repeat: no-repeat;
+            background-position: -148px 3px;
+            background-size: 1000%;
+        }
+        .s1 input{
+            border: none;
+            margin-left: 8px;
+        }
+        .s1 span{
+            color: white;
+            position: relative;
+            right: -45px;
+            top: 0px;
+        }
+        .s2{
+            width: 390px;
+            height:150px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-banner.png);
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+        .s3{
+            height: 115px;
+            margin-top: 5px;
+            display: flex;
+        }
+        .ss1{
+            width: 92px;
+            height: 130px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nianhuo1.png);
+            background-repeat: no-repeat;
+            background-position: 5px 0;
+            background-size: 95%;
+        }
+        .ss2{
+            width: 200px;
+            height: 130px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nianhuo2.png);
+            background-repeat: no-repeat;
+            background-position: 6px 0;
+            background-size:95%;
+        }
+        .ss3{
+            width: 92px;
+            height: 130px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-nianhuo3.png);
+            background-repeat: no-repeat;
+            background-position: 3px 0;
+            background-size: 95%;
+        }
+        .shop{
+            width: 390px;
+            height: 150px;
+        }
+        .one,.two{
+            height: 60px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .d1{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav1.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d2{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav2.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d3{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav3.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d4{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav4.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d5{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav5.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d6{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav6.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d7{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav7.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d8{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav8.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d9{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav9.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d10{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav10.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .jdcs{
+            width: 50px;
+            height:10px;
+            font-size: 12px;
+            color: rgb(170, 168, 168);
+            position: relative;
+            top: 40px;
+        }
+        .jdms{
+            width: 390px;
+            height: 130px;
+            margin-top: 10px;
+        }
+        .j1{
+            width: 390px;
+            height: 20px;
+            display: flex;
+        }
+        .ms,.gd{
+            width:100px;
+            font-weight: bold;
+            position: relative;
+            left: 5px;
+        }
+        .dc{
+            width:20px;
+            background-image: url(https://oss.9ihub.com/test/dh5-ms-dc.png);
+            background-size:100%;
+            background-repeat: no-repeat;
+            margin-left: 5px;
+        }
+        .tt{
+            width: 15px;
+            background-image: url(https://oss.9ihub.com/test/dh5-ms-right.png);
+            background-repeat: no-repeat;
+            background-size: 100%;
+            position: relative;
+            top: 5px;
+            right:-145px;
+        }
+        .j2{
+            width: 390px;
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .ji1{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms1.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .ji2{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms2.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .ji3{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms3.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .ji4{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms4.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .ji5{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms5.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .ji6{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms6.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .money{
+            width: 50px;
+            height: 30px;
+            color:red;
+            font-size: 13px;
+            position: relative;
+            top: 65px;
+            left: 15px;
+        }
+        .sp{
+            width: 390px;
+            height: 200px;
+            display: flex;
+            background-color: rgb(247, 247, 247);
+        }
+        .l1{
+            width: 195px;  
+            height: 195px;
+            margin: 10px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-product1.webp);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 100%;
+        }
+        .l2{
+            width: 195px;
+            height: 195px;
+            margin: 10px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-product2.webp);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 100%;
+        }
+        .banner{
+            width: 390px;
+            height: 80px;
+            background-color: #8bd4e0;
+            position: fixed;
+            bottom: 0;
+            z-index: 1000;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .ooo{
+            color: lightgray;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="top">
+            <div class="x"></div>
+            <div class="a1"><span>打开京东App，购物更轻松</span></div>
+            <div class="a2">立即打开</div>
+        </div>
+        <div class="s1">
+            <div class="ssk">
+                <div class="gan">|</div>
+                <div class="ss"></div>
+                <input type="text" placeholder="键盘鼠标套餐">
+            </div>
+            <span>登录</span>
+        </div>
+        <div class="center">
+            <div class="search">
+                <div class="s2"></div>
+                <div class="s3">
+                    <div class="ss1"></div>
+                    <div class="ss2"></div>
+                    <div class="ss3"></div>
+                </div>
+            </div>
+        </div>
+        <div class="down">
+            <div class="shop">
+                <div class="one">
+                    <div class="d1">
+                        <div class="jdcs">京东超市</div>
+                    </div>
+                    <div class="d2">
+                        <div class="jdcs">京东超市</div>
+                    </div>
+                    <div class="d3">
+                        <div class="jdcs">京东超市</div>
+                    </div>
+                    <div class="d4">
+                        <div class="jdcs">京东超市</div>
+                    </div>
+                    <div class="d5">
+                        <div class="jdcs">京东超市</div>
+                    </div>
+                </div>
+                <div class="two">
+                    <div class="d6">
+                        <div class="jdcs">京东超市</div>
+                    </div>
+                    <div class="d7">
+                        <div class="jdcs">京东超市</div>
+                    </div>
+                    <div class="d8">
+                        <div class="jdcs">京东超市</div>
+                    </div>
+                    <div class="d9">
+                        <div class="jdcs">京东超市</div>
+                    </div>
+                    <div class="d10">
+                        <div class="jdcs">京东超市</div>
+                    </div>
+                </div>
+            </div>
+            <div class="jdms">
+                <div class="j1">
+                    <div class="ms">京东秒杀&emsp;18</div>
+                    <div class="dc"></div>
+                    <div class="gd">更多秒杀</div>
+                    <div class="tt"></div>         
+                </div>
+                <div class="j2">
+                    <div class="ji1">
+                        <div class="money">￥25</div>
+                    </div>
+                    <div class="ji2">
+                        <div class="money">￥2568</div>
+                    </div>
+                    <div class="ji3">
+                        <div class="money">￥28.8</div>
+                    </div>
+                    <div class="ji4">
+                        <div class="money">￥19.7</div>
+                    </div>
+                    <div class="ji5">
+                        <div class="money">￥420</div>
+                    </div>
+                    <div class="ji6">
+                        <div class="money">￥42.9 </div>
+                    </div>
+                </div>
+            </div>
+            <div class="sp">
+                <div class="l1"></div>
+                <div class="l2"></div>
+            </div>
+        </div>
+        <div class="banner">
+            <div class="ooo">首页</div>
+            <div class="ooo">分类</div>
+            <div class="ooo">京喜</div>
+            <div class="ooo">购物车</div>
+            <div class="ooo">未登录</div>    
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250.html" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b2627b9543af1a145329461e1832e348509cdcf7
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\344\273\212\346\227\245\345\244\264\346\235\241\347\203\255\351\227\250\350\247\206\351\242\221\345\210\227\350\241\250.html"
@@ -0,0 +1,153 @@
+<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: 430px;
+            
+            height: 100vh;
+        }
+     .fish{
+        display: flex;
+     }
+     .imgs{
+        width: 200px;
+        height: 130px;
+     }
+     .txt{
+    font-weight: bold;
+    font-size: 20px;
+     }
+     .one{
+        color: red;
+        position: relative;
+        top: -5px;
+        left: 13px;
+     }
+   .two
+   {
+    color: gray;
+    
+   }
+   a{
+    text-decoration: none;
+    color: gray;
+    position: relative;
+    left: 50px;
+   }
+   .bottom{
+    width: 430px;
+    
+ 
+   }
+   .top{
+    display: flex;
+    margin-bottom: 30px;
+   }
+   .hot{
+    width: 25px;
+    height: 25px;
+    top: 3px;
+    margin-right: 8px;
+   }
+   .again{
+    width: 18px;
+    height: 18px;
+    margin-right: 3px;
+  
+
+   }
+   .tt{
+    position: relative;
+    left: 235px;
+    margin-left: 10px;
+    color: red;
+    font-weight: bolder;
+   }
+   .dd{
+    font-size: 20px;
+   }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="top">
+            <div class="dd"><img src="./img/icon-play.png" alt="" class="hot">热门视频</div>
+            <div class="tt"><img src="./img/icon-sx2.png" alt="" class="again">换一换</div>
+        </div>
+
+        <div class="bottom">
+            <div class="fish">
+            <div >
+                <img src="./img/toutiao-02.jpeg" alt="" class="imgs">
+            </div>
+            <div class="right">
+                <div class="txt">
+                无论做什么鱼：最忌放盐和料酒研制
+                 </div>
+            
+                <p class="one">1万评论</p>
+                <p class="two">148万次观看<a href="">司马南频道</a></p>
+                
+            </div>
+
+            
+         </div>
+         <div class="bottom">
+            <div class="fish">
+            <div >
+                <img src="./img/toutiao-02.jpeg" alt="" class="imgs">
+            </div>
+            <div class="right">
+                <div class="txt">
+                无论做什么鱼：最忌放盐和料酒研制
+                 </div>
+            
+                <p class="one">1万评论</p>
+                <p class="two">148万次观看<a href="">司马南频道</a></p>
+                
+            </div>
+
+            
+         </div>
+         <div class="bottom">
+            <div class="fish">
+            <div >
+                <img src="./img/toutiao-02.jpeg" alt="" class="imgs">
+            </div>
+            <div class="right">
+                <div class="txt">
+                无论做什么鱼：最忌放盐和料酒研制
+                 </div>
+            
+                <p class="one">1万评论</p>
+                <p class="two">148万次观看<a href="">司马南频道</a></p>
+                
+            </div>
+
+            
+         </div>
+         <div class="bottom">
+            <div class="fish">
+            <div >
+                <img src="./img/toutiao-02.jpeg" alt="" class="imgs">
+            </div>
+            <div class="right">
+                <div class="txt">
+                无论做什么鱼：最忌放盐和料酒研制
+                 </div>
+            
+                <p class="one">1万评论</p>
+                <p class="two">148万次观看<a href="">司马南频道</a></p>
+                
+            </div>
+
+            
+         </div>
+      
+    </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\345\270\203\345\261\200.html" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\345\270\203\345\261\200.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f7a0b4902a096d58a3305237f84d24a139f5e896
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\345\270\203\345\261\200.html"
@@ -0,0 +1,135 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body{
+            margin: 0px;
+            padding:0px ;
+            background-color: #90C08D;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .box{
+            width: 800px;
+            height: 600px;
+            border: 1px solid black;
+            background-color: #CCD2F7;
+        }
+        .top{
+            width: 758px;
+            height: 118px;
+            margin: 20px;
+            border: 1px solid black;
+            background-color: #90C08D;
+            display: flex;
+            border-radius: 2px;
+            /* justify-content: space-around; */
+
+
+        }
+        .top-one{
+            display: flex;
+        }
+        .one{
+            width: 78px;
+            height: 78px;
+            border: 1px solid black;
+            background-color: #CCD2F7;
+            margin: 20px ;
+            margin-top: 20px;
+            margin-right: 20px;
+            border-radius: 2px;
+        }
+        .two{
+            width: 78px;
+            height: 78px;
+            border: 1px solid black;
+            background-color: #CCD2F7;
+            margin-top: 20px;
+            margin-left: 180px;
+            border-radius: 2px;
+        }
+        .bottom{
+            width: 758px;
+            height: 418px;
+            border: 1px solid black;
+            background-color: #90C08D;
+            margin-left: 20px;
+            display: flex;
+        }
+        .bottom-top{
+            width: 198px;
+            height: 298px;
+            border: 1px solid black;
+            background-color: #CCD2F7;
+            margin: 20px;
+            border-radius: 2px;
+        }
+        .bottom-b{
+            display: flex;
+            margin: 20px;
+        }
+        .three{
+            width: 48px;
+            height: 48px;
+            border: 1px solid black;
+            background-color: #CCD2F7;
+            margin-right: 25px;
+            border-radius: 2px;
+        }
+        .right{
+            width: 478px;
+            height: 400px;
+            margin-top: 20px;
+            display: flex;
+            flex-direction: column;
+        }
+        .four{
+            width: 478px;
+            height: 38px;
+            background-color: #CCD2F7;
+            border: 1px solid black;
+            margin-bottom: 15px;
+            border-radius: 2px;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+
+        <div class="top">
+            <div class="top-one">
+                <div class="one"></div>
+                <div class="one"></div>
+                <div class="one"></div>
+                <div class="one"></div>
+            </div>
+                <div class="two"></div>
+            
+        </div>
+
+        <div class="bottom">
+            <div class="left">
+                <div class="bottom-top"></div>
+                <div class="bottom-b">
+                    <div class="three"></div>
+                    <div class="three"></div>
+                    <div class="three"></div>
+                </div>
+            </div>
+            <div class="right">
+                <div class="four"></div>
+                <div class="four"></div>
+                <div class="four"></div>
+                <div class="four"></div>
+                <div class="four"></div>
+                <div class="four"></div>
+                <div class="four"></div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257\351\246\226\351\241\265.html" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257\351\246\226\351\241\265.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f41786b2ee90bdb02e051caef66bba3578fc691e
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257\351\246\226\351\241\265.html"
@@ -0,0 +1,249 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* 考试：引用阿里巴巴的矢量图标 */
+        body{
+            margin: 0px;
+            padding: 0px;
+            background-color: #F4F4F4;
+       
+        }
+        .box{
+            
+            width: 390px;
+            height: 844px;
+            border: 1px solid black;
+
+        }
+        .daohang{
+            width: 390px;
+            height: 50px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        hr{
+            color: gray;
+           
+        }
+        .find{
+            width: 315px;
+            height: 30px;
+            border: 1px solid gray;
+            border-radius: 3px;
+           
+           
+           
+        }
+        p{
+            margin-left: 40px;
+            margin-top: 4px;
+            color: gray;
+            font-size: 14px;
+        }
+        .photo{
+            width: 70px;
+            height: 40px;
+            background-image: url(./img/携程/xiecheng-sprite.png);
+           position: absolute;
+           background-position: -114px  98px;
+        
+        }
+        .me{
+            width: 70px;
+            height: 70px;
+            background-image: url(./img/携程/xiecheng-sprite.png);
+            position: absolute;
+           background-position: -115px 70px;
+           
+          
+        }
+        .txt{
+            position: relative;
+            top: 40px;
+            left: 25px;
+            color: #1997C8;
+        }
+        hr{
+           color: gray;
+           margin-top:10px ;
+        }
+        .top{
+            width: 390px;
+            height:150px ;
+            border: 1px solid black;
+            margin-top: -10px;
+        }
+        .play{
+            height: 100px;
+            border: 1px solid black;
+            display: flex;
+            justify-content: space-evenly;
+        }
+        .one{
+            width: 76px;
+            height: 90px;
+            border: 1px solid black;
+        }
+        .hotel1{
+            width: 380px;
+            height: 139px;
+            display: flex;
+            border: 1px solid black;
+            margin: 5px;
+        }
+        .hotel2{
+            width: 380px;
+            height: 139px;
+            display: flex;
+            border: 1px solid black;
+            margin: 5px;
+        }
+        .hotel3{
+            width: 380px;
+            height: 139px;
+            display: flex;
+            border: 1px solid black;
+            margin: 5px;
+        }
+        .left1{
+            width: 124px;
+            height: 139px;
+            border: 1px solid black;
+        }
+        .left2{
+            width: 124px;
+            height: 139px;
+            border: 1px solid black;
+        }
+        .left3{
+            width: 124px;
+            height: 139px;
+            border: 1px solid black;
+        }
+        .right1,.right2,.right3{
+            width: 256px;
+            height: 139px;
+            border: 1px solid black;
+            display: flex;
+            flex-direction: column;
+        }
+        /* .right1-top{
+            width: 256px;
+            height:69px ;
+            border: 1px solid black;
+            display: flex;
+        } */
+        .right1-bottom , .right2-bottom , .right3-bottom,.right1-top,.right2-top,.right3-top{
+            width: 256px;
+            height:69px ;
+            border: 1px solid black;
+            display: flex;
+        }
+        .r1,.r2, .r3{
+            width: 127px;
+            height: 69px;
+            border: 1px solid black;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="box">
+        <!-- /* 导航栏 */ -->
+       
+    <div class="daohang">
+        <div class="find">
+            <div class="photo"></div>
+            <p>搜索：目的地/酒店/景点/航班号</p>
+        </div>
+        <div class="touxiang">
+        <div class="me"></div>
+        <div class="txt">我的</div>
+    </div>
+  
+    </div>
+ <hr>
+  <!-- 高铁享受慢生活图片 -->
+    <div class="top">
+        <!-- <img src="./img/携程/xiecheng-focus.jpg" alt=""> -->
+    </div>
+    <!-- /* 景点玩乐 */ -->
+    <div class="play">
+        <div class="one"></div>
+        <div class="one"></div>
+        <div class="one"></div>
+        <div class="one"></div>
+        <div class="one"></div>
+    </div>
+    <!-- /* 红色海外酒店 */ -->
+    <div class="hotel1">
+        <div class="left1"></div>
+        <div class="right1">
+            <div class="right1-top">
+                <div class="r1"></div>
+                <div class="r1"></div>
+            </div>
+            <div class="right1-bottom">
+                <div class="r1"></div>
+                <div class="r1"></div>
+            </div>
+        </div>
+    </div>
+    <!-- /* 蓝色海外酒店 */ -->
+    <div class="hotel2">
+        <div class="left2"></div>
+        <div class="right2">
+            <div class="right2-top">
+                <div class="r2"></div>
+                <div class="r2"></div>
+            </div>
+            <div class="right2-bottom">
+                <div class="r2"></div>
+                <div class="r2"></div>
+            </div>
+        </div>
+    </div>
+    <!-- /* 绿色海外酒店 */ -->
+    <div class="hotel3">
+        <div class="left3"></div>
+        <div class="right3">
+            <div class="right3-top">
+                <div class="r3"></div>
+                <div class="r3"></div>
+            </div>
+            <div class="right3-bottom">
+                <div class="r3"></div>
+                <div class="r3"></div>
+            </div>
+        </div>
+    </div>
+    <!-- /* 电话费wifi */ -->
+    <div class="wifi">
+        <div class="top1"></div>
+        <div class="bottom1"></div>
+    </div>
+    <!-- /* 热门活动 */ -->
+    <div class="hot">
+        
+    </div>
+    <!-- /* 寻找美丽乡村底部的六张图片 */ -->
+    <div class="bottom">
+        <div class="bottom-lef">
+            <div class="first"></div>
+            <div class="second"></div>
+            <div class="third"></div>
+        </div>
+        <div class="bottom-right">
+            <div class="first"></div>
+            <div class="second"></div>
+            <div class="third"></div>
+        </div>
+    </div>
+
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257\351\246\226\351\241\265\345\205\210\345\270\203\345\261\200\347\211\210.html" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257\351\246\226\351\241\265\345\205\210\345\270\203\345\261\200\347\211\210.html"
new file mode 100644
index 0000000000000000000000000000000000000000..786407aa90298b1cd055219458ae04a0e7bcc87f
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\346\220\272\347\250\213\346\211\213\346\234\272\347\253\257\351\246\226\351\241\265\345\205\210\345\270\203\345\261\200\347\211\210.html"
@@ -0,0 +1,597 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+        }
+        .box{
+            width: 381px;
+            height: 1078px;
+            border: 2px solid black;
+            display: flex;
+            flex-direction: column;
+            background-color: #fff;
+        }
+        .header{
+            width: 380px;
+            height: 60px;
+            
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            background-color: white;
+           
+        }
+        .found{
+            width: 325px;
+            height: 27px;
+            border: 1px solid;
+            border-radius: 3px;
+        }
+        .me{
+            width: 35px;
+            height: 40px;
+          
+            display: flex;
+            flex-direction: column;
+        }
+        p{
+            margin-left: 40px;
+            margin-top: 4px;
+            color: gray;
+            font-size: 14px;
+        }
+        .photo{
+            width: 30px;
+            height: 30px;
+            background-image: url(./img/携程/xiecheng-sprite.png);
+           position: absolute;
+           background-position: -114px  98px;
+           
+        
+        }
+        .touxiang{
+            width: 35px;
+            height: 40px;
+            background-image: url(./img/携程/xiecheng-sprite.png);
+            position: absolute;
+           background-size: 316%;
+           background-position: 271px 143px;
+           top: 4px;
+           
+          
+        }
+        .me-txt{
+            
+            color: #1997C8;
+            position: absolute;
+            top: 27px;
+           font-size: 14px;
+        }
+        .banner{
+            width: 380px;
+            height: 76px;
+        
+            background-image: url(./img/携程/xiecheng-focus.jpg);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 100%;
+        }
+  
+
+        .play{
+            width: 380px;
+            height: 70px;
+            
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .one{
+            width: 58px;
+            height: 55px;
+           
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+        }
+        [class^="icon"]{
+            width: 32px;
+            height: 32px;
+        
+            background-image: url(./img/携程/xiecheng-localnav_bg.png);
+            background-repeat: no-repeat;
+            
+            background-size: 100%;
+        }
+       .icon-two{
+        
+            background-position: 0 -32px;
+        }
+        .icon-three{
+            background-position: 0 -64px;
+        }
+        .icon-four{
+            background-position: 0 -96px;
+        }
+        .icon-five{
+            background-position: 0 -128px;
+        }
+        .txt{
+            width: 52px;
+            height: 15px;
+           
+            font-size: 12px;
+            font-weight: bold;
+        }
+        .hotel{
+            width: 380px;
+            height: 378px;
+        }
+        .first
+        {
+            display: flex;
+        }
+        .left{
+            height: 128px;
+            width: 150px;
+          background-image: url(./img/携程/xiecheng-hotel.png);
+          background-position: -31px 45px;
+          background-size: 139%;
+          background-repeat: no-repeat;
+          
+          background-color: #FA6C54;
+          display: flex;
+       justify-content: center;
+       border-radius: 15px 0 0 0;
+        }
+        .ttt{
+            color: white;
+           margin-top: 15px;
+         
+        }
+        .right{
+            width: 230px;
+            height: 58px;
+            border-radius: 0 15px 0 0;
+            background-image:linear-gradient(to right,#FA7453,#FB954E) ;
+        }
+        .right-top{
+            background-color: #FB8351;
+            display: flex;
+            border-radius: 0 20px 0 0;
+            
+        }
+        .r1{
+            width:115px;
+            height: 62px;
+            color: white;
+            border: 1px solid white;
+            text-align: center;
+            line-height: 58px;
+            
+        }
+        .right-bottom{
+            background-color: #FB8351;
+            display: flex;
+            
+        }
+
+
+
+
+        .second
+        {
+            display: flex;
+            margin-top: 5px;
+        }
+        .left2{
+            height: 128px;
+            width: 150px;
+          background-image: url(./img/携程/xiecheng-hotel.png);
+          background-position: -31px 45px;
+          background-size: 139%;
+          background-repeat: no-repeat;
+          
+          background-color: #4C93EC;
+          display: flex;
+       justify-content: center;
+   
+        }
+        .ttt2{
+            color: white;
+           margin-top: 15px;
+         
+        }
+        .right2{
+            width: 230px;
+            height: 58px;
+           
+            background-image:linear-gradient(to right,#51ACED,#53BAED) ;
+        }
+        .right-top2{
+            background-color: #51ACED;
+            display: flex;
+           
+            
+        }
+        .r2{
+            width:115px;
+            height: 62px;
+            color: white;
+            border: 1px solid white;
+            text-align: center;
+            line-height: 58px;
+            
+        }
+        .right-bottom2{
+            background-color: #51ACED;
+            display: flex;
+            
+        }
+
+        .third
+        {
+            display: flex;
+            margin-top: 5px;
+        }
+        .left3{
+            height: 128px;
+            width: 150px;
+          background-image: url(./img/携程/xiecheng-hotel.png);
+          background-position: -31px 45px;
+          background-size: 139%;
+          background-repeat: no-repeat;
+          
+          background-color: #48C794;
+          display: flex;
+       justify-content: center;
+       border-radius: 0 0 15px 0;
+        }
+        .ttt3{
+            color: white;
+           margin-top: 15px;
+         
+        }
+        .right3{
+            width: 230px;
+            height: 58px;
+            border-radius: 0 15px 0 0;
+            background-image:linear-gradient(to right,#57CE7B,#69D35F) ;
+        }
+        .right-top3{
+            background-color: #57CE7B;
+            display: flex;
+            border-radius: 0 0 0 15px;
+            
+        }
+        .r3{
+            width:115px;
+            height: 62px;
+            color: white;
+            border: 1px solid white;
+            text-align: center;
+            line-height: 58px;
+            
+        }
+        .right-bottom3{
+            background-color: #57CE7B;
+            display: flex;
+            
+        }
+        .wifi{
+            width: 380px;
+            height: 118px;
+           background-color: #FFFFFF;
+            display: flex;
+            justify-content: space-around;
+            flex-direction: column;
+            border-radius: 5px;
+            border-right: 1px solid;
+            border-left: 1px solid;
+            
+        }
+        .wifi-top{
+            display: flex;
+            justify-content: space-around;
+            
+        }
+        .wifi1{
+            width: 49px;
+            height: 51px;
+            
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            flex-direction: column;
+          
+            
+        }
+        .wifi-bottom{
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+           
+        }
+        .wifi-icon{
+            width: 30px;
+            height: 23px;
+           
+            background-image: url(./img/携程/xiecheng-subnav-bg.png);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .wifi-txt{
+            width: 45px;
+            height: 19px;
+           font-size: 12px;
+           font-weight: bold;
+        }
+        .hot{
+            width: 380px;
+            height: 60px;
+      
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+           position: relative;
+           background-color: #FFFFFF;
+        left: 5px;
+        border-top: 2px solid gray;
+        border-bottom: 2px gray;
+        }
+        .hot-play{
+            width: 72px;
+            height: 18px;
+            
+      
+            background-image: url(./img/携程/xiecheng-hot.png);
+            background-position: 0 -16px;
+            background-repeat: no-repeat;
+            background-size: 100%;
+           
+        }
+        .many-good{
+            width: 104px;
+            height: 26px;
+            margin-right: 15px;
+            background-color: pink;
+            border-radius: 13px;
+            font-size: 14px;
+            padding: 2px;
+            text-align: center;
+          
+        }
+        
+        .find{
+            width: 380px;
+            height: 134px;
+           border: 1px solid #E4E4E4;
+            display: flex;
+        }
+        .find-tree{
+            width: 190px;
+            height: 134px;
+           
+            background-image: url(./img/携程/xiecheng-pic1.jpg);
+            background-size: 100%;
+
+        }
+        .train{
+            width: 190px;
+            height: 134px;
+         
+            background-image: url(./img/携程/xiecheng-pic2.jpg);
+            background-size: 100%;
+        }
+        .easy{
+            width: 380px;
+            height: 175px;
+            border: 1px solid #E4E4E4;
+            display: flex;
+            flex-direction: column;
+        }
+        .easy-top{
+            display: flex;
+        }
+      
+        .easy-bottom{
+            display: flex;
+        }
+        .easy-one{
+            width: 190px;
+            height: 83px;
+            background-image: url(./img/携程/xiecheng-pic3.jpg);
+            background-size: 100%;
+        }
+        .easy-two{
+            width: 190px;
+            height: 83px;
+      
+            background-image: url(./img/携程/xiecheng-pic4.jpg);
+            background-size: 100%;
+        }
+        .easy-three{
+            width: 190px;
+            height: 83px;
+           
+            background-image: url(./img/携程/xiecheng-pic5.jpg);
+            background-size: 100%;
+        }
+        .easy-four{
+            width: 190px;
+            height: 83px;
+        
+            background-image: url(./img/携程/xiecheng-pic6.jpg);
+            background-size: 100%;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="header">
+            <div class="found">
+                <div class="photo"></div>
+            <p>搜索：目的地/酒店/景点/航班号</p>
+            </div>
+            <div class="me">
+                <div class="touxiang"></div>
+                <div class="me-txt">我的</div>
+            </div>
+        </div>
+        <div class="banner">
+        </div>
+        <div class="play">
+            <div class="one">
+                <div class="icon-one"></div>
+                <div class="txt">景点.玩乐</div>
+            </div>
+            <div class="one">
+                <div class="icon-two"></div>
+                <div class="txt">
+                    景点.玩乐
+                </div>
+            </div>
+            <div class="one">
+                <div class="icon-three"></div>
+                <div class="txt">景点.玩乐</div>
+            </div>
+            <div class="one">
+                <div class="icon-four"></div>
+                <div class="txt">景点.玩乐</div>
+            </div>
+            <div class="one">
+                <div class="icon-five"></div>
+                <div class="txt">景点.玩乐</div>
+            </div>
+        </div>
+        <div class="hotel">
+            <!-- 第一方块 -->
+            <div class="first">
+                <div class="left">
+                <div class="ttt">海外酒店</div>
+                </div>
+                <div class="right">
+                    <div class="right-top">
+                        <div class="r1">海外酒店</div>
+                        <div class="r1">海外酒店</div>
+                    </div>
+                    <div class="right-bottom">
+                        <div class="r1">特价酒店</div>
+                        <div class="r1">特价酒店</div>
+                    </div>
+                </div>
+            </div>
+   
+            <!-- 第二方块 -->
+            <div class="second">
+                    <div class="left2">
+                    <div class="ttt2">海外酒店</div>
+                    </div>
+                    <div class="right2">
+                        <div class="right-top2">
+                            <div class="r2">海外酒店</div>
+                            <div class="r2">海外酒店</div>
+                        </div>
+                        <div class="right-bottom2">
+                            <div class="r2">特价酒店</div>
+                            <div class="r2">特价酒店</div>
+                        </div>
+                    </div>
+                </div>
+            
+            <!-- 第三方块 -->
+            <div class="third">
+                <div class="left3">
+                    <div class="ttt">海外酒店</div>
+                    </div>
+                    <div class="right3">
+                        <div class="right-top3">
+                            <div class="r3">海外酒店</div>
+                            <div class="r3">海外酒店</div>
+                        </div>
+                        <div class="right-bottom3">
+                            <div class="r3">特价酒店</div>
+                            <div class="r3">特价酒店</div>
+                        </div>
+                    </div>
+            </div>
+        </div>
+        <div class="wifi">
+            <div class="wifi-top">
+                <div class="wifi1">
+                <div class=" wifi-icon"></div>
+                <div class=" wifi-txt">电话费</div>
+                </div>
+                <div class="wifi1">
+                    <div class=" wifi-icon"></div>
+                    <div class=" wifi-txt">电话费</div>
+                    </div>
+                <div class="wifi1">
+                    <div class=" wifi-icon"></div>
+                    <div class=" wifi-txt">电话费</div>
+                    </div>
+                <div class="wifi1">
+                    <div class=" wifi-icon"></div>
+                    <div class=" wifi-txt">电话费</div>
+                    </div>
+
+                <div class="wifi1">
+                    <div class=" wifi-icon"></div>
+                    <div class=" wifi-txt">电话费</div>
+                    </div>
+                
+            </div>
+            <div class="wifi-bottom">
+                <div class="wifi1">
+                    <div class=" wifi-icon"></div>
+                    <div class=" wifi-txt">电话费</div>
+                    </div>
+                    <div class="wifi1">
+                        <div class=" wifi-icon"></div>
+                        <div class=" wifi-txt">电话费</div>
+                        </div>
+                    <div class="wifi1">
+                        <div class=" wifi-icon"></div>
+                        <div class=" wifi-txt">电话费</div>
+                        </div>
+                    <div class="wifi1">
+                        <div class=" wifi-icon"></div>
+                        <div class=" wifi-txt">电话费</div>
+                        </div>
+    
+                    <div class="wifi1">
+                        <div class=" wifi-icon"></div>
+                        <div class=" wifi-txt">电话费</div>
+                        </div>
+            </div>
+        </div>
+        <div class="hot">
+            <div class="hot-play"></div>
+            <div class="many-good">获取更多福利</div>
+        </div>
+        <div class="find">
+            <div class="find-tree">
+              
+            </div>
+            <div class="train"></div>
+        </div>
+        <div class="easy">
+            <div class="easy-top">
+            <div class="easy-one"></div>
+            <div class="easy-two"></div>
+        </div>
+        <div class="easy-bottom">
+            <div class="easy-three"></div>
+            <div class="easy-four"></div>
+        </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\346\220\272\347\250\213\347\262\276\347\273\206\347\211\210,\347\254\254\344\272\214\346\254\241\345\201\232.html" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\346\220\272\347\250\213\347\262\276\347\273\206\347\211\210,\347\254\254\344\272\214\346\254\241\345\201\232.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a82b831f79edc1bbd38ca95d6e29425f281ec0aa
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\346\220\272\347\250\213\347\262\276\347\273\206\347\211\210,\347\254\254\344\272\214\346\254\241\345\201\232.html"
@@ -0,0 +1,577 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0px;
+            padding:0px ;    
+        }
+        body{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .box{
+            width: 380px;
+            height: 1005px;
+            border: 1px solid;
+        
+        }
+        .header{
+            width: 380px;
+            height: 48px;
+            
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+        }
+        .search{
+            width: 300px;
+            height: 30px;
+            border: 1px solid;
+            background-image: url(./img/携程/xiecheng-sprite.png);
+            background-size: 88%;
+            background-repeat: no-repeat;
+            background-position: -150 -708;
+
+        }
+        .me{
+            width: 29px;
+            height: 29px;
+           
+            background-image: url(./img/携程/xiecheng-sprite.png);
+            background-size: 344%;
+            background-position: -52px -183px;
+            background-repeat: no-repeat;
+        }
+        .txtt{
+            font-size: 12px;
+            text-align: center;
+            color: blue;
+        }
+        p{
+            margin-left: 38px;
+            margin-top: 5px;
+            color: gray;
+        }
+        .banner{
+            width: 380px;
+           height: 76px;
+           
+      
+            background-image: url(./img/携程/xiecheng-focus.jpg);
+            background-position: 0 0;
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+
+        .play{
+            width: 380px;
+            height: 70px;
+           
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .one{
+            width: 56px;
+            height: 60px;
+            
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            align-items: center;
+        }
+        [class^="icon"]{
+            width:35px ;
+            height: 35px;
+            
+            background-image: url(./img/携程/xiecheng-localnav_bg.png);
+      
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .icon-two{
+            background-position: 0 -35px;
+        }
+        .icon-three{
+            background-position: 0 -70px;
+        }
+        .icon-four{
+            background-position: 0 -105px;
+        }
+        .icon-five{
+            background-position: 0 -140px;
+        }
+        .txt1{
+            width: 56px;
+            height: 15px;
+            font-size: 13px;
+            font-weight: bold;
+        }
+        .hotel{
+            width: 380px;
+            
+        }
+        .first{
+            width: 380px;
+            height: 113px;
+            display: flex;
+            
+        }
+        .left{
+            width: 153px;
+            height: 110px;
+           
+            background-image: url(./img/携程/xiecheng-hotel.png);
+            background-position: -9px 44px;
+            background-repeat: no-repeat;
+            background-size: 106%;
+            background-color: #FA6C54;
+            border-radius: 15px 0 0 0;
+            text-align: center;
+           
+          
+        }
+        .right{
+            width: 227px;
+            height: 110px;
+           
+            display: flex;
+            flex-direction: column;
+            border-radius: 0 23px 0 0;
+            background-image :linear-gradient(to right,#FA7453,#FB954E);
+            
+        }
+       
+        .right-top{
+            width: 227px;
+            height: 54px;
+            display: flex;
+            
+          
+         }
+           
+        .right-bottom{
+            width: 227px;
+            height: 54px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .r1{
+            width: 112px;
+            height: 54px;
+            color: white;
+            text-align: center;
+            border: 1px solid white;
+        }
+       /* 第二个 */
+        .second{
+            width: 380px;
+            height: 113px;
+            display: flex;
+            
+        }
+        .left2{
+            width: 153px;
+            height: 110px;
+           
+            background-image: url(./img/携程/xiecheng-hotel.png);
+            background-position: -9px 44px;
+            background-repeat: no-repeat;
+            background-size: 106%;
+            background-color: #4E9CED;
+          
+        }
+        .ttt{
+            text-align: center;
+            margin-top: 20px;
+            font-size: 20px;
+            color: white;
+        }
+        .right2{
+            width: 227px;
+            height: 110px;
+           
+            display: flex;
+            flex-direction: column;
+          
+            background-image :linear-gradient(to right,#4E9CED,#53BAED);
+            
+        }
+       
+        .right2-top{
+            width: 227px;
+            height: 54px;
+            display: flex;
+          
+         }
+           
+        .right2-bottom{
+            width: 227px;
+            height: 54px;
+            display: flex;
+            
+           
+        }
+        .r2{
+            width: 112px;
+            height: 54px;
+            text-align: center;
+            color: white;
+            border: 1px solid white;
+        }
+       /* 第三个 */
+        .three{
+            width: 380px;
+            height: 113px;
+            display: flex;
+            
+        }
+        .left3{
+            width: 153px;
+            height: 110px;
+           
+            background-image: url(./img/携程/xiecheng-hotel.png);
+            background-position: -9px 44px;
+            background-repeat: no-repeat;
+            background-size: 106%;
+            background-color: #48C794;
+            border-radius: 0 0 0 15px;
+        }
+        .right3{
+            width: 227px;
+            height: 110px;
+           
+            display: flex;
+            flex-direction: column;
+            border-radius: 0 0 22px 0;
+            background-image :linear-gradient(to right,#48C794,#69D35F);
+            
+        }
+       
+        .right3-top{
+            width: 227px;
+            height: 54px;
+            display: flex;
+          
+         }
+           
+        .right3-bottom{
+            width: 227px;
+            height: 54px;
+            display: flex;
+           
+           
+        }
+        .r3{
+            width: 112px;
+            height: 54px;
+            color: white;
+            border: 1px solid white;
+        }
+       
+        .wifi{
+            width: 380px;
+            
+            
+            display: flex;
+            flex-direction: column;
+        }
+        .wifi-top{
+            display: flex;
+            justify-content: space-around;
+        }
+        .wifi-bottom{
+            display: flex;
+            justify-content: space-around;
+        }
+        .phone{
+            width: 47px;
+            height: 56px;
+            
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+      }
+        .phone-top{
+            width: 42px;
+            height: 31px;
+           
+            background-image: url(./img/携程/xiecheng-subnav-bg.png);
+            background-size: 100%;
+            background-repeat: no-repeat;
+            background-position: 0 0;
+        }
+        .txt{
+            width: 56px;
+            height: 20px;
+           
+        }
+        .hot{
+            width: 380px;
+            height: 50px;
+          
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .hot-play{
+            width: 107px;
+            height: 40px;
+            
+            background-image: url(./img/携程/xiecheng-hot.png);
+            background-size: 109%;
+            background-position: 0 -23;
+        }
+        .many{
+            width: 161px;
+            height: 25px;
+            justify-content: 40px;
+            border: 1px solid;
+            border-radius: 30px;
+            background-image: linear-gradient(to right,#F85674,#FC6AB7);
+        }
+        .tt{
+            font-size: 19px;
+            font-weight: bold;
+            margin-left: 18px;
+        }
+        .find{
+            width: 380px;
+            height: 150px;
+            
+            display: flex;
+        }
+        .f{
+            width: 190px;
+            height: 133px;
+            background-image: url(./img/携程/xiecheng-pic1.jpg);
+            background-size: 100%;
+            background-repeat: no-repeat;
+            background-position: 0 0;
+        }
+        .train{
+            width: 190px;
+            height: 150px;
+            background-image: url(./img/携程/xiecheng-pic1.jpg);
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+        
+        .buy{
+            width: 380px;
+            height: 160px;
+           
+            display: flex;
+            flex-direction: column;
+        }
+        .b-top{
+            display: flex;
+            width: 380px;
+            height: 80px;
+           
+
+        }
+        .b-bottom{
+            display: flex;
+            width: 380px;
+            height: 80px;
+           
+        }
+        .b1{
+            width: 190px;
+            height: 80px;
+            background-image: url(./img/携程/xiecheng-pic3.jpg);
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+        .b2{
+            width: 190px;
+            height: 80px;
+            background-image: url(./img/携程/xiecheng-pic4.jpg);
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+        .b3{
+            width: 190px;
+            height: 80px;
+            background-image: url(./img/携程/xiecheng-pic5.jpg);
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+        .b4{
+            width: 190px;
+            height: 80px;
+            background-image: url(./img/携程/xiecheng-pic6.jpg);
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+
+<div class="header">
+    <div class="search">
+        <p>搜索:目的地/酒店/景点/航班号</p>
+    </div>
+    <div class="my">
+        <div class="me"></div>
+        <div class="txtt">我的</div>
+    </div>
+</div>
+
+<div class="banner"></div>
+
+<div class="play">
+    <div class="one">
+        <div class="icon-one"></div>
+        <div class="txt1">景点.玩乐</div>
+    </div>
+    <div class="one">
+        <div class="icon-two"></div>
+        <div class="txt1">景点.玩乐</div>
+    </div>
+    <div class="one">
+        <div class="icon-three"></div>
+        <div class="txt1">景点.玩乐</div>
+    </div>
+    <div class="one">
+        <div class="icon-four"></div>
+        <div class="txt1">景点.玩乐</div>
+    </div>
+    <div class="one">
+        <div class="icon-five"></div>
+        <div class="txt1">景点.玩乐</div>
+    </div>
+</div>
+
+<div class="hotel">
+    <div class="first">
+        <div class="left">
+            <div class="ttt">海外酒店</div>
+        </div>
+        <div class="right">
+            <div class="right-top">
+                <div class="r1">海外酒店</div>
+                <div class="r1">海外酒店</div>
+            </div>
+            <div class="right-bottom">
+                <div class="r1">特价酒店</div>
+                <div class="r1">特价酒店</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="second">
+        <div class="left2"><div class="ttt">海外酒店</div></div>
+        <div class="right2">
+            <div class="right2-top">
+                <div class="r2">海外酒店</div>
+                <div class="r2">海外酒店</div>
+            </div>
+            <div class="right2-bottom">
+                <div class="r2">特价酒店</div>
+                <div class="r2">特价酒店</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="three">
+        <div class="left3"><div class="ttt">海外酒店</div></div>
+        <div class="right3">
+            <div class="right3-top">
+                <div class="r3">海外酒店</div>
+                <div class="r3">海外酒店</div>
+            </div>
+            <div class="right3-bottom">
+                <div class="r3">特价酒店</div>
+                <div class="r3">特价酒店</div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="wifi">
+    <div class="wifi-top">
+        <div class="phone">
+            <div class="phone-top"></div>
+            <div class="txt">电话费</div>
+        </div>
+        <div class="phone">
+            <div class="phone-top"></div>
+            <div class="txt">电话费</div>
+        </div>
+        <div class="phone">
+            <div class="phone-top"></div>
+            <div class="txt">电话费</div>
+        </div>
+        <div class="phone">
+            <div class="phone-top"></div>
+            <div class="txt">电话费</div>
+        </div>
+        <div class="phone">
+            <div class="phone-top"></div>
+            <div class="txt">电话费</div>
+        </div>
+    </div>
+    <div class="wifi-bottom">
+        <div class="phone">
+            <div class="phone-top"></div>
+            <div class="txt">电话费</div>
+        </div>
+        <div class="phone">
+            <div class="phone-top"></div>
+            <div class="txt">电话费</div>
+        </div>
+        <div class="phone">
+            <div class="phone-top"></div>
+            <div class="txt">电话费</div>
+        </div>
+        <div class="phone">
+            <div class="phone-top"></div>
+            <div class="txt">电话费</div>
+        </div>
+        <div class="phone">
+            <div class="phone-top"></div>
+            <div class="txt">电话费</div>
+        </div>
+    </div>
+</div>
+
+<div class="hot">
+    <div class="hot-play"></div>
+    <div class="many">
+        <div class="tt">
+            获取更多福利 >
+        </div>
+    </div>
+</div>
+
+<div class="find">
+    <div class="f"></div>
+    <div class="train"></div>
+</div>
+
+<div class="buy">
+    <div class="b-top"> 
+        <div class="b1"></div>
+    <div class="b2"></div>
+</div>
+   <div class="b-bottom">
+    <div class="b3"></div>
+    <div class="b4"></div>
+   </div>
+   
+</div>
+
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\347\273\217\345\205\270\345\234\243\346\235\257\345\270\203\345\261\200.html" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\347\273\217\345\205\270\345\234\243\346\235\257\345\270\203\345\261\200.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fc378069473a381845ad56775dcf88c1299fd0b3
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\347\273\217\345\205\270\345\234\243\346\235\257\345\270\203\345\261\200.html"
@@ -0,0 +1,80 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .box{
+            margin: 0px;
+            padding: 0px;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+        }
+        .top{
+            flex:1;
+            background-color: #FCF6E4;
+        }
+        .left{
+            width: 500px;
+            height:666px ;
+            background-color: #4F9738;
+        }
+        .center{
+            width: 800px;
+            height:666px ;
+            background-color: white;
+        }
+        .right{
+            width: 500px;
+            height:666px ;
+            background-color: purple;
+        }
+        .bottom{
+            flex:1;
+            background-color: #333333;
+        }
+        .c{
+            flex: 3;
+            display: flex;
+            justify-content: space-around;
+        }
+        @media (max-width: 600px) {
+    .c {
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    .c {
+      width: 100%;
+      height: 33.333%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 5px;
+    }
+    .center{ 
+       order: -1;
+        background-color: white; }
+    .left { 
+       
+        background-color: green; }
+    .right{ 
+      
+        background-color: purple; }
+  }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="top">一天到晚游泳的鱼</div>
+        <div class="c">
+        <div class="left">左侧</div>
+        <div class="center">中间</div>
+        <div class="right">右侧</div>
+    </div>
+        <div class="bottom">向天再借五百年</div>
+    </div>
+    <!-- 屏幕宽度小于600px时，色块顺序从上到下依次为 头部 中间 左侧 右侧 底部 -->
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\351\205\267\347\213\227\346\222\255\346\224\276\345\231\250\345\210\227\350\241\250.html" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\351\205\267\347\213\227\346\222\255\346\224\276\345\231\250\345\210\227\350\241\250.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0f471b7228309f1e00501624b4bd36015e9ada76
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\351\205\267\347\213\227\346\222\255\346\224\276\345\231\250\345\210\227\350\241\250.html"
@@ -0,0 +1,104 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0px;
+            padding: 0px;
+        }
+        .box{
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        padding: 10px;
+        justify-content: space-between;
+        }
+        .imgs{
+            border-radius: 8px;
+        }
+        .photo{
+        width: 150px;
+        height: 200px;
+        /* 包括padding和border在内的宽度计算 */
+        box-sizing: border-box;
+        /* 每个项目占据22%的宽度,保持四个项目一行 */
+        flex:1 1 22%;
+        /* 右边距,确保四个项目一行 */
+        margin-right: 2%;
+
+        padding: 10px;
+        text-align: center;
+        }
+        .number{
+          width: 150px;
+            background-color: rgba(112, 104, 104,0.5);
+            position: relative;
+            top: -20px;
+            left: 16px;
+            color: white;
+           font-size: 16px;
+           border-radius: 8px;
+           text-align: left;
+          
+        }
+        .jiantou{
+            width: 15px;
+            height: 15px;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+
+        <div class="photo">
+            <img src="./img/flex-01.jpg" alt="" class="imgs">
+            <div class="number"><img src="./img/icon_play1.png" alt="" class="jiantou">2444.0万</div>
+            <div class="text">催眠：Delta脑波音乐减压深度睡眠</div>
+        </div>
+
+        <div class="photo">
+            <img src="./img/flex-02.jpg" alt="" class="imgs">
+            <div class="number"><img src="./img/icon_play1.png" alt="" class="jiantou">2444.0万</div>
+            <div class="text">催眠：Delta脑波音乐减压深度睡眠</div>
+        </div>
+
+        <div class="photo">
+            <img src="./img/flex-03.jpg" alt="" class="imgs">
+            <div class="number"><img src="./img/icon_play1.png" alt="" class="jiantou">2444.0万</div>
+            <div class="text">催眠：Delta脑波音乐减压深度睡眠</div>
+        </div>
+
+        <div class="photo">
+            <img src="./img/flex-04.jpg" alt="" class="imgs">
+            <div class="number"><img src="./img/icon_play1.png" alt="" class="jiantou">2444.0万</div>
+            <div class="text">催眠：Delta脑波音乐减压深度睡眠</div>
+        </div>
+
+        <div class="photo">
+            <img src="./img/flex-05.jpg" alt="" class="imgs">
+            <div class="number"><img src="./img/icon_play1.png" alt="" class="jiantou">2444.0万</div>
+            <div class="text">催眠：Delta脑波音乐减压深度睡眠</div>
+        </div>
+
+        <div class="photo">
+            <img src="./img/flex-06.jpg" alt="" class="imgs">
+            <div class="number"><img src="./img/icon_play1.png" alt="" class="jiantou">2444.0万</div>
+            <div class="text">催眠：Delta脑波音乐减压深度睡眠</div>
+        </div>
+
+        <div class="photo">
+            <img src="./img/flex-07.jpg" alt="" class="imgs">
+            <div class="number"><img src="./img/icon_play1.png" alt="" class="jiantou">2444.0万</div>
+            <div class="text">催眠：Delta脑波音乐减压深度睡眠</div>
+        </div>
+
+        <div class="photo">
+            <img src="./img/flex-08.jpg" alt="" class="imgs">
+            <div class="number"><img src="./img/icon_play1.png" alt="" class="jiantou">2444.0万</div>
+            <div class="text">催眠：Delta脑波音乐减压深度睡眠</div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\351\252\260\345\255\220.html" "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\351\252\260\345\255\220.html"
new file mode 100644
index 0000000000000000000000000000000000000000..8e25d825f76d08e218ee64e401fbbf075a62fe52
--- /dev/null
+++ "b/\345\224\220\345\256\207\345\247\227/\347\273\203\344\271\240and\344\275\234\344\270\232/20241104-1108\346\211\200\346\234\211flex\347\273\203\344\271\240/\351\252\260\345\255\220.html"
@@ -0,0 +1,140 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body{
+            display: flex;
+            justify-content: space-around;
+        }
+        .box{
+            width: 100px;
+            height: 100px;
+            border: 1px solid red;
+            border-radius: 5px 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .ball{
+            width: 10px;
+            height: 10px;
+            background-color: black;
+            border-radius: 5px;
+        }
+        .b2{
+            align-items: center;
+            justify-content: space-around;
+            flex-direction: column;
+        }
+        .b3{
+            justify-content: space-around;
+            flex-direction: column;
+        }
+        .b3 :first-child{
+        align-items: flex-start;
+        position: relative;
+        left: -30px;
+        }
+        .b3 :last-child{
+            position: relative;
+            left: 30px;
+        }
+        .b4{
+            justify-content: space-around;
+            flex-direction: column;
+        }
+        .b4 :first-child{
+            position: relative;
+            left: -25px;
+        }
+        .b4 :nth-child(2){
+            position: relative;
+            left: 25px;
+            top: -25px;
+        }
+        .b4 :nth-child(3){
+            position: relative;
+            left: -25px;
+            top: 25px;
+        }
+        .b4 :last-child{
+            position: relative;
+            left: 25px;
+           
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="ball"></div>
+
+    </div>
+    <div class="box b2">
+        <div class="ball"></div>
+        <div class="ball"></div>
+    </div>
+    <div class="box b3">
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+    </div>
+    <div class="box b4">
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+    </div>
+    <div class="box b5">
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        
+    </div>
+    <div class="box b6">
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+    </div>
+    <div class="box b7">
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        
+    </div>
+    <div class="box b8">
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+    </div>
+    <div class="box b9">
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+        <div class="ball"></div>
+       
+    </div>
+</body>
+</html>
\ No newline at end of file