diff --git "a/\351\255\217\346\205\247\345\251\267/20241028-flex\345\270\203\345\261\200.md" "b/\351\255\217\346\205\247\345\251\267/20241028-flex\345\270\203\345\261\200.md"
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..408a444914575f2b96162cdd9601a09aea8b17f7 100644
--- "a/\351\255\217\346\205\247\345\251\267/20241028-flex\345\270\203\345\261\200.md"
+++ "b/\351\255\217\346\205\247\345\251\267/20241028-flex\345\270\203\345\261\200.md"
@@ -0,0 +1,41 @@
+### Flexbox的基本概念
+1. Flex容器（Flex Container）：
++ 使用display: flex或display: inline-flex的元素。
++ 容器内的直接子元素称为Flex项目（Flex Items）。
+2. Flex项目（Flex Items）：
++ Flex容器内的直接子元素自动成为Flex项目。
+### Flex容器属性
++ display: flex; 或 display: inline-flex;：定义容器为Flex容器。
++ flex-direction：定义主轴的方向（默认是row，即水平方向）。
++ row：水平方向，从左到右。
++ row-reverse：水平方向，从右到左。
++ column：垂直方向，从上到下。
++ column-reverse：垂直方向，从下到上。
++ flex-wrap：定义项目是否换行。
++ nowrap（默认）：不换行。
++ wrap：换行。
++ wrap-reverse：反向换行。
++ flex-flow：flex-direction 和 flex-wrap 的简写。
++ justify-content：定义项目在主轴上的对齐方式。
++ flex-start（默认）：起点对齐。
++ flex-end：终点对齐。
++ center：居中对齐。
++ space-between：两端对齐，项目之间的间隔相等。
++ space-around：每个项目两侧的间隔相等。
++ space-evenly：所有项目之间的间隔相等，包括两端。
++ align-items：定义项目在交叉轴上的对齐方式。
++ stretch（默认）：如果项目未设置高度或设为auto，将占满整个容器的高度。
++ flex-start：交叉轴的起点对齐。
++ flex-end：交叉轴的终点对齐。
++ center：居中对齐。
++ baseline：项目的基线对齐。
++ align-content：定义多行时的对齐方式（当flex-wrap: wrap时使用）。
++ 类似align-items，但适用于多行。
+### Flex项目属性
++ order：定义项目的排列顺序（数值越小，排列越靠前，默认值为0）。
++ flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
++ flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
++ flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。可以是长度值（如20px）或百分比（如30%），默认值为auto。
++ flex：flex-grow、flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。
++ align-self：允许单个项目有与其他项目不同的对齐方式，可覆盖align-items属性。
++ 值同align-items。
\ No newline at end of file
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241028-flex\345\270\203\345\261\200.md" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241028-flex\345\270\203\345\261\200.md"
deleted file mode 100644
index 408a444914575f2b96162cdd9601a09aea8b17f7..0000000000000000000000000000000000000000
--- "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/20241028-flex\345\270\203\345\261\200.md"
+++ /dev/null
@@ -1,41 +0,0 @@
-### Flexbox的基本概念
-1. Flex容器（Flex Container）：
-+ 使用display: flex或display: inline-flex的元素。
-+ 容器内的直接子元素称为Flex项目（Flex Items）。
-2. Flex项目（Flex Items）：
-+ Flex容器内的直接子元素自动成为Flex项目。
-### Flex容器属性
-+ display: flex; 或 display: inline-flex;：定义容器为Flex容器。
-+ flex-direction：定义主轴的方向（默认是row，即水平方向）。
-+ row：水平方向，从左到右。
-+ row-reverse：水平方向，从右到左。
-+ column：垂直方向，从上到下。
-+ column-reverse：垂直方向，从下到上。
-+ flex-wrap：定义项目是否换行。
-+ nowrap（默认）：不换行。
-+ wrap：换行。
-+ wrap-reverse：反向换行。
-+ flex-flow：flex-direction 和 flex-wrap 的简写。
-+ justify-content：定义项目在主轴上的对齐方式。
-+ flex-start（默认）：起点对齐。
-+ flex-end：终点对齐。
-+ center：居中对齐。
-+ space-between：两端对齐，项目之间的间隔相等。
-+ space-around：每个项目两侧的间隔相等。
-+ space-evenly：所有项目之间的间隔相等，包括两端。
-+ align-items：定义项目在交叉轴上的对齐方式。
-+ stretch（默认）：如果项目未设置高度或设为auto，将占满整个容器的高度。
-+ flex-start：交叉轴的起点对齐。
-+ flex-end：交叉轴的终点对齐。
-+ center：居中对齐。
-+ baseline：项目的基线对齐。
-+ align-content：定义多行时的对齐方式（当flex-wrap: wrap时使用）。
-+ 类似align-items，但适用于多行。
-### Flex项目属性
-+ order：定义项目的排列顺序（数值越小，排列越靠前，默认值为0）。
-+ flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
-+ flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
-+ flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）。可以是长度值（如20px）或百分比（如30%），默认值为auto。
-+ flex：flex-grow、flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。
-+ align-self：允许单个项目有与其他项目不同的对齐方式，可覆盖align-items属性。
-+ 值同align-items。
\ No newline at end of file
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/1.html" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6a0283312205ac9c6c1374fd0af4927f422ea9b0
--- /dev/null
+++ "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/1.html"
@@ -0,0 +1,133 @@
+<!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>
+        .div{
+            display: flex;
+            flex-wrap: nowrap;
+            /* width: 785px; */
+            
+        }
+        .box{
+            display: flex;
+            /* flex-direction: column; */
+            justify-content: space-around;
+            align-items: center;
+            flex-grow: 1;
+        }
+        .box div{
+            width: 160px;
+            font-size: 14px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-around;
+
+        }
+        .d1 div{
+            width: 150px;
+        }
+        img{
+            border-radius: 5px;
+            filter: contrast(70%);
+           
+        }
+        li{
+            background-image: url(./icon_play.png);
+            background-size: 11px;
+            background-repeat: no-repeat;
+            background-position: 47px 4px; 
+            list-style-type: none;
+            color:white; 
+            position: relative;
+            left: -35px;
+            top: -30px;
+            padding-left: 70px;
+        }
+        p{
+            width: 150px;
+            position: relative;
+            top:-19px
+        }
+    </style>
+</head>
+<body>
+    <div class="div">
+        <div class="box">
+            <div>
+                <div class="d1">
+                    <div>
+                        <img src="./flex-01.jpg" width="150px">
+                    </div>
+                    <li>2444.0万</li>
+                    <p>催眠：Delta脑波音乐减压深度睡眠</p>
+                </div>
+                <div class="d5">
+                    <div>
+                        <img src="./flex-05.jpg" width="150px">
+                    </div>
+                    <li>24440.0万</li>  
+                    <p>催眠：Delta脑波音乐减压深度睡眠</p>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+            <div>
+                <div class="d2">
+                    <div>
+                        <img src="./flex-02.jpg "width="150px"> 
+                    </div>
+                    <li>24440.0万</li>  
+                    <p>催眠：Delta脑波音乐减压深度睡眠</p>
+                </div>
+                <div class="d6">
+                    <div>
+                        <img src="./flex-06.jpg" width="150px">
+                    </div>
+                    <li>24440.0万</li>  
+                    <p>催眠：Delta脑波音乐减压深度睡眠</p>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+            <div>
+                <div class="d3">
+                    <div>
+                        <img src="./flex-03.jpg" width="150px">
+                    </div>
+                    <li>24440.0万</li>  
+                    <p>催眠：Delta脑波音乐减压深度睡眠</p>
+                </div>
+                <div class="d7">
+                    <div>
+                        <img src="./flex-07.jpg" width="150px">
+                    </div>
+                    <li>24440.0万</li>  
+                    <p>催眠：Delta脑波音乐减压深度睡眠</p>
+                </div>
+            </div>
+        </div>
+        <div class="box">
+           <div>
+            <div class="d4">
+                <div>
+                    <img src="./flex-04.jpg" width="150px">
+                </div>
+                <li>24440.0万</li>  
+                <p>催眠：Delta脑波音乐减压深度睡眠</p>
+            </div>
+            <div class="d8">
+                <div>
+                    <img src="./flex-08.jpg" width="150px">
+                </div>
+                <li>24440.0万</li>  
+                <p>催眠：Delta脑波音乐减压深度睡眠</p>
+            </div>
+           </div>
+        </div>   
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/2.html" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..9bbfb8d1e12737ff69f50d4be2b6d71f7057db20
--- /dev/null
+++ "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/2.html"
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .d1{
+            width: 100%;
+            height: 100px;
+            background-color: pink;
+            border: 1px solid blanchedalmond;
+            position: fixed;
+        }
+        .d2{
+            background-color: black;
+            width: 100%;
+            height: 1000px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="d1"></div>
+    <div  class="d2"> vrevrgvv1111111111111111</div>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-01.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-01.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6fd6241aa7035df30db88d15987e8d0713d4b616
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-01.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-02.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-02.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..20aad004aef3db4620e968c68e6ec46cf8561e2c
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-02.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-03.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-03.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1dedde074d0a4dd594e0202935f767e115fed977
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-03.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-04.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-04.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e0f855a6d755756b600197e011c379b331750c59
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-04.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-05.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-05.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0f61aeb8d5d4fd8c633a03adcf79e644c9462361
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-05.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-06.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-06.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2360b947f7eb61cf485d887da190e231085eaf89
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-06.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-07.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-07.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b478cba7e53eda154668f6bd440c23e1ba147a28
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-07.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-08.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-08.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3e9cfb4b00c6616b836bb1c48d4910c2e547910c
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/flex-08.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/icon-play.png" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/icon-play.png"
new file mode 100644
index 0000000000000000000000000000000000000000..90397f22a7692bd8d87b1c55c11acccee885aced
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/icon-play.png" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/icon_play.png" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/icon_play.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c87d350f3ef7dcd681ca0d640852d52b6e6146a9
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/icon_play.png" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/toutiao-02.jpeg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/toutiao-02.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..a50ce45c112cc151284427f4de0fd771073aba4f
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/toutiao-02.jpeg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-focus.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-focus.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..069ce0537d7d45db2c9048f76b79e4abe25280b9
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-focus.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic1.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic1.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..7705aa7501e842150d1ce783b4bf173532f37b66
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic1.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic2.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic2.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..31410a68c7ac02402e4036bc8f734ab0837aa9f3
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic2.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic3.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic3.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3e18c9f1ed4b4c4bd548e39a9d7521b8bd690c75
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic3.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic4.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic4.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..efed93472231569317f26d6527cf6e762a6868f9
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic4.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic5.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic5.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..15cef359fec0483b5ace790c80cce21e596aa5c7
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic5.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic6.jpg" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic6.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3852d753c67345fe309e2d245015d269b8718288
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-pic6.jpg" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-sprite.png" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-sprite.png"
new file mode 100644
index 0000000000000000000000000000000000000000..c62ccfdccb21c8fa3ebd6030e618b23a8ea91356
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-sprite.png" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-subnav-bg.png" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-subnav-bg.png"
new file mode 100644
index 0000000000000000000000000000000000000000..2604c55046991b9b9498e97fac507a191c4871c6
Binary files /dev/null and "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/xiecheng-subnav-bg.png" differ
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/\346\220\272\347\250\213.html" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/\346\220\272\347\250\213.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e6f95ca6631be67016cb0011ef5cf9744d9a11c9
--- /dev/null
+++ "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\270\211\345\215\201\347\273\274\345\220\210\347\273\203\344\271\240/\346\220\272\347\250\213.html"
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body{
+            height: 844px;
+        }
+        .box{
+            width: 390px;
+            height: 844px;
+            border: 2px solid #7c7c7b;
+            position: relative;
+            margin: auto;
+            
+        }
+        .nav{
+            height: 43px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            position: fixed;
+        }
+        .search{
+            border: 1.5px solid #d5d5d5;
+            border-radius: 5px;
+            width: 320px;
+            height: 23px;
+            position: relative;
+            left: 10px;
+            box-shadow: 1px 2px 4px #d5d5d9;
+            display: flex;
+            align-items: center;
+        }
+        .icon1{
+            background-image: url(./xiecheng-sprite.png);
+            background-repeat: no-repeat;
+            width: 23px;
+            height: 25px;
+            background-position: -57px -285px;
+            background-size: 108px;
+        }
+        .text1{
+            font-size: 12px;
+            font-weight: bolder;
+            color: #7c7b7be3;
+        }
+        .icon2{
+            background-image: url(./xiecheng-sprite.png);
+            background-repeat: no-repeat;
+            background-position: -45px -183px;
+            background-size: 100px;
+            height: 25px;
+            width: 42px;
+        }
+        .nav2{
+            display: flex;
+            flex-direction: column;
+            padding-left: 25px;
+        }
+        .text2{
+            font-size: 12px;
+            color: #099fde;
+            display: flex;
+            justify-content: space-around;
+
+        }
+        .top{
+            height: 77px;
+            background-image: url(./xiecheng-focus.jpg);
+            background-size: 389.8px 77px;
+            margin-top: 43px;
+        }
+        .play{
+            height: 72px;
+            border: 1px solid #7c7c7b;
+        }
+        .hotle{
+            height: 272px;
+            border: 1px solid #7c7c7b;
+        }
+        .wifi{
+            height: 122px;
+            border: 1px solid #7c7c7b;
+        }
+        .act{
+            height: 60px;
+            border: 1px solid #7c7c7b;
+        }
+        .bottom{
+            height: 192px;
+            border: 1px solid #7c7c7b;
+        }
+
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="nav">
+            <div class="search">
+                <div class="icon1"></div>
+                <div class="text1">搜索：目的地/酒店/景点/航班号</div>
+            </div>
+            <div class="nav2">
+                <div class="icon2"></div>
+                <div class="text2">我&nbsp;的</div>
+            </div>
+        </div>
+        <div class="top"></div>
+        <div class="play"></div>
+        <div class="hotle"></div>
+        <div class="wifi"></div>
+        <div class="act"></div>
+        <div class="bottom"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\272\214\345\215\201\344\271\235\345\212\250\347\224\273.html" "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\272\214\345\215\201\344\271\235felx\345\270\203\345\261\200.html"
similarity index 38%
rename from "\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\272\214\345\215\201\344\271\235\345\212\250\347\224\273.html"
rename to "\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\272\214\345\215\201\344\271\235felx\345\270\203\345\261\200.html"
index f075aab28e0eef6d18ec099718abbf90b22d68c5..8f744c34003fc68c436e2c33242cfe5616446042 100644
--- "a/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\272\214\345\215\201\344\271\235\345\212\250\347\224\273.html"
+++ "b/\351\255\217\346\205\247\345\251\267/\344\275\234\344\270\232/\344\272\214\345\215\201\344\271\235felx\345\270\203\345\261\200.html"
@@ -23,7 +23,6 @@
             display: flex;
             justify-content: space-between;
              align-items: center;
-           
         }
         .box2{
             width: 500px;
@@ -71,9 +70,114 @@
             width: 500px;
             height: 300px;
             display: flex;    
-            flex-direction: ;
+            flex-direction:row;
             border: 1px solid rgb(99, 99, 165);
         }
+        .box9{
+            width: 500px;
+            height: 300px;
+            display: flex;    
+            flex-direction:column;
+            border: 1px solid rgb(99, 99, 165);
+        }
+        .box10{
+            width: 500px;
+            height: 300px;
+            display: flex;    
+            flex-wrap: wrap;
+            border: 1px solid rgb(99, 99, 165);
+        }
+        .box11{
+            width: 500px;
+            height: 300px;
+            display: flex;    
+            flex-wrap: wrap;
+            align-content: center;
+            border: 1px solid rgb(99, 99, 165);
+        }
+        .d{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: black;
+
+        }
+        .one{
+            width: 100px;
+            height: 100px;
+            border: 2px solid indianred;
+            margin-top:-180px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 5px;
+        }
+        .two{
+            width: 100px;
+            height: 100px;
+            border: 2px solid indianred;
+            margin-top:-180px;
+            display: flex;
+            justify-content: space-around;
+            flex-direction: column;
+            align-items:center;
+            font-size: 40px;
+            border-radius: 5px;
+        }
+        .three{
+            width: 100px;
+            height: 100px;
+            border: 2px solid indianred;
+            margin-top:-180px;
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;          
+            font-size: 40px;
+            border-radius: 5px;
+            
+        }
+        .three .d:nth-child(2){
+            align-self: center;
+        }
+        .three .d:nth-child(3){
+            align-self: flex-end;
+        }
+        .four,.six,.nine{
+            width: 100px;
+            height: 100px;
+            border: 2px solid indianred;
+            margin-top:-180px;
+            display: flex;
+            align-items:center;
+            justify-content: space-around;
+            font-size: 40px;
+            border-radius: 5px;
+        }
+        .min{
+            height:100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .five,.seven{
+            width: 100px;
+            height: 100px;
+            border: 2px solid indianred;
+            margin-top:-180px;
+            display: flex;
+            flex-direction: column;
+            font-size: 40px;
+            border-radius: 5px;
+        }
+        .five .min,.seven .min{
+            flex-direction: row;
+        }
+        .d2{
+            width: 20px;
+            height: 20px;
+        }
+
     </style>
 </head>
 <body>
@@ -128,10 +232,131 @@
     <p>4.主轴方向练习：
         使用flex-direction属性，将子元素的方向从水平改为垂直。
         观察容器和子元素的排列方式如何变化。</p>
-        <div class="box8">
-            <div class="d1"></div>
-            <div class="d1"></div>
-            <div class="d1"></div>
+        <div class="box">
+            <div class="box8">
+                <div class="d1"></div>
+                <div class="d1"></div>
+                <div class="d1"></div>
+            </div>
+            <div class="box9">
+                <div class="d1"></div>
+                <div class="d1"></div>
+                <div class="d1"></div>
+            </div>
+        </div>
+    <p>5.交叉轴方向练习：
+         使用flex-wrap属性，允许子元素在需要时换行。
+         使用align-content属性在多行情况下对齐子元素。</p>
+         <div class="box">
+            <div class="box10">
+                <div class="d1"></div>
+                <div class="d1"></div>
+                <div class="d1"></div>
+            </div>
+            <div class="box11">
+                <div class="d1"></div>
+                <div class="d1"></div>
+                <div class="d1"></div>
+            </div>
+        </div>
+    <p>6. 使用flex实现如下几种布局-骰子布局练习</p>
+    <div class="box">
+        <div class="one">
+            <div class="d"></div>
+        </div>
+        <div class="two">
+            <div class="d"></div>
+            <div class="d"></div>
+        </div>
+        <div class="three">
+            <div class="d"></div>
+            <div class="d"></div>
+            <div class="d"></div>
+        </div>
+        <div class="four">
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+        </div>
+        <div class="five">
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+            <div class="min">
+                <div class="d"></div>
+            </div>
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+        </div>
+        <div class="six">
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+        </div>
+        <div class="seven">
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+            <div class="min">
+                <div class="d"></div>
+            </div>
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+        </div>
+        <div class="nine">
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+            <div class="min">
+                <div class="d"></div>
+                <dic class="d2"></dic>
+                <div class="d"></div> 
+            </div>
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+        </div>
+        <div class="nine">
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
+            <div class="min">
+                <div class="d"></div>
+                <div class="d"></div>
+                <div class="d"></div>
+            </div>
         </div>
+    </div>
 </body>
 </html>
\ No newline at end of file
diff --git "a/\351\255\217\346\205\247\345\251\267/\351\235\231\346\200\201\345\270\203\345\261\200.md" "b/\351\255\217\346\205\247\345\251\267/\351\235\231\346\200\201\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..5ccb28aa1d46e87767563d1843617bb09ab0e345
--- /dev/null
+++ "b/\351\255\217\346\205\247\345\251\267/\351\235\231\346\200\201\345\270\203\345\261\200.md"
@@ -0,0 +1,34 @@
+### 服务器
+1. 登录服务器 `-ssh root @hzhf.域名`
+2. 登录后做的事情
+    + 更新软件源 `-apt update`
+    + 更新操作系统&打补丁 `-apt upgrate -y`
+## 搭建一个静态网站
+1. 安装nginx 
+    `命令:yum install -y nginx`
+2. 设置nginx开机启动和现在启动
+    `命令：systemctl start nginx`
+3. 查看nginx情况 
+    `命令：systemctl status nginx`
+4. 在/var/下创建www文件夹，并在www文件下创建以域名为名称的文件夹
+    ```
+    mkdir /var/www
+    cd /var/www
+    mkdir 域名
+    cd 域名
+    ```
+5. 在XShell界面，点击绿色的像文件的那个图标，然后再弹出的界面将自己写的html文件上传到/var/www/域名
+6. 在/etc/nginx/conf.d/目录下，创建一个以域名为名称的配置文件
+    `vim //etc/nginx/conf.d/hzhf.cn.conf`
+7. 在上一步的基础上，按i进入插件模式，输入下面文本，按esc键进入命令模式，按冒号进入底层命令行模式后，输入wq保存退出，修改nginx网站配置后，输入`nginx -t`测试配置文件是否正确，正确返回`success`，不正确按照提示重新修改配置，正确之后执行`systemctl reload nginx`或`nginx -s reload`命令重新加载配置
+    ```
+    server{
+            listen 80; --监听的端口
+            server_name 域名; --监听的域名
+            location / {
+                root /var/www/域名; --网站所在路径
+                index i.html; --默认的首页文件
+            }
+    }
+    ```
+8. 最后，在华为云控制台，进入ECS实例列表，然后点击进入实例，在左边栏最下点击安全组，点击列表中一行的配置规则，将80端口和443端口加入允许访问列表，并保存即可
\ No newline at end of file