diff --git "a/\346\235\216\345\250\234/20241104-flex\345\261\236\346\200\247\347\254\224\350\256\260.md" "b/\346\235\216\345\250\234/20241104-flex\345\261\236\346\200\247\347\254\224\350\256\260.md"
new file mode 100644
index 0000000000000000000000000000000000000000..9b1ae57b0d3582367fed602c7d7187d7fc8887ef
--- /dev/null
+++ "b/\346\235\216\345\250\234/20241104-flex\345\261\236\346\200\247\347\254\224\350\256\260.md"
@@ -0,0 +1,1435 @@
+# flex属性
+## 容器属性
+### flex-direction：定义主轴方向（行或列）。
+
+- 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：定义项目在交叉轴上的对齐方式。
+- flex-start：交叉轴起始对齐。
+- flex-end：交叉轴结束对齐。
+- center：交叉轴居中对齐。
+- baseline：基于基线对齐。
+- stretch（默认）：如果项目未设置高度或有多余的空间，则会拉伸以填满容器。
+
+### align-content：定义多根轴线的对齐方式（当有折行时）。
+- flex-start：第一根轴线起始对齐。
+- flex-end：最后一根轴线结束对齐。
+- center：所有轴线居中对齐。
+- space-between：轴线两端对齐，轴线之间等距。
+- space-around：每根轴线两侧等距，轴线间距离是轴线与容器边界距离的两倍。
+- stretch（默认）：如果容器有多余的空间，则所有轴线拉伸以填满容器。
+## 项目属性
+- order：定义项目的排序顺序。数值越小，排列越靠前（默认为0）。
+- flex-grow：定义项目的放大比例。如果容器有多余空间，项目将按照这个比例增长。
+- flex-shrink：定义项目的缩小比例。如果容器空间不足，项目将按照这个比例缩小。
+- flex-basis：定义项目在主轴上的初始大小。
+- flex：flex-grow、flex-shrink 和 flex-basis 的简写形式，默认值为 0 1 auto。
+- align-self：允许单个项目有与其他项目不同的交叉轴对齐方式。
+## 媒体查询
+媒体查询（Media Queries）是CSS3中引入的一个功能，它允许网页设计者根据设备的特定特征（如屏幕宽度、分辨率、颜色等）来应用不同的CSS样式。这使得开发者能够创建响应式网页设计，即网页能够根据访问设备的屏幕尺寸和分辨率自动调整布局和样式，以提供最佳的用户体验。
+
+### 媒体查询的基本语法：
+
+```css
+@media not|only mediatype and (expressions) {
+  /* CSS规则 */
+}
+```
+
+- `not` 和 `only` 是可选的关键字，用于排除或指定特定的媒体类型。
+- `mediatype` 是一个媒体类型，如 `screen`、`print`、`speech` 等。
+- `expressions` 是一个或多个条件表达式，用于进一步细化媒体查询。
+
+### 媒体查询的常见使用场景：
+
+1. **屏幕宽度**：
+   - 根据屏幕宽度调整布局和样式，以适应不同设备。
+
+2. **分辨率**：
+   - 为高分辨率设备提供更清晰的图像。
+
+3. **颜色和单色打印**：
+   - 为彩色和单色打印优化样式。
+
+4. **设备方向**：
+   - 根据设备是横向还是纵向调整布局。
+
+### 媒体查询的实例：
+
+```css
+/* 基础样式 */
+body {
+  background-color: lightblue;
+}
+
+/* 当屏幕宽度小于600px时应用的样式 */
+@media (max-width: 600px) {
+  body {
+    background-color: lightgreen;
+  }
+}
+
+/* 当屏幕宽度大于等于1200px时应用的样式 */
+@media (min-width: 1200px) {
+  body {
+    background-color: lightcoral;
+  }
+}
+
+/* 当设备分辨率为高分辨率时应用的样式 */
+@media only screen and (min-resolution: 2dppx) {
+  body {
+    background-color: lightgrey;
+  }
+}
+
+/* 当设备是打印设备时应用的样式 */
+@media print {
+  body {
+    background-color: white;
+  }
+}
+```
+# 作业一
+第一题
+1. 主要代码
+```css
+.box{
+            display: flex;
+        }
+        .box>div{
+            width: 50px;
+            height: 60px;
+            background-color: #022e70;
+            margin-left: 20px;
+        } 
+```
+第二题
+1. 主要代码
+```css
+.box{
+            display: flex;
+            /* 水平上居中对齐 */
+            justify-content: center;
+            /* 在盒子里平分 */
+            justify-content: space-around;
+            /* 在两端对齐平分 */
+             justify-content: space-between;
+        }
+        .box>div{
+            width: 50px;
+            height: 60px;
+            background-color: #022e70;
+            margin-left: 20px;
+        } 
+```
+第三题
+1. 主要代码
+```css
+          .box{
+            display: flex;
+            align-items: center; */
+            align-items: flex-end;
+           align-items: flex-start;
+            height: 100px;
+            border: 1px solid;
+        }
+        .box>div{
+            width: 50px;
+            height: 60px;
+            background-color: #022e70;
+            margin-left: 10px;
+        }
+```
+第四题
+1. 主要代码
+```css
+      .box{
+            display: flex;
+            flex-direction: column;
+        }
+        .box>div{
+            width: 50px;
+            height: 60px;
+            background-color: #022e70;
+            margin-left: 20px;
+            margin-top: 5px;
+        }
+```
+第五题
+1. 主要代码
+```css
+      .box{
+            display: flex;
+            flex-wrap: wrap;
+            align-content: baseline;
+        }
+        .box>div{
+            width: 50px;
+            height: 60px;
+            background-color: #022e70;
+            margin-left: 20px;
+        }
+```
+第六题
+1. 效果如下：
+
+![](./imgs/骰子.png)
+
+2. 主要代码
+```css
+      body>div{
+            margin: 10px;
+            float: left;
+        }
+        .d1{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 6%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .d11{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 100%;
+            margin: 5px;
+        }
+        .d2{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 6%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .d22{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 100%;
+            margin: 5px;
+        }
+        .d3{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 6%;
+            display: flex;
+        }
+        .d33{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 100%;
+            margin: 7px;
+        }
+        .d3>div:nth-child(2){
+            align-self: center;
+        }
+        .d3>div:nth-child(3){
+            align-self: flex-end;
+        }
+        .d4{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 6%;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+        }
+        .d444{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 100%;
+            margin: 10px;
+        }
+        .d44{
+            flex-basis: 100%;
+            display: flex;
+            justify-content: space-between;
+            margin-top: 6px;
+        }
+        .d5{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 6%;
+        }
+        .d555{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 100%;
+            margin: 7px;
+        }
+        .d5>div:nth-child(2){
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .d5>div:nth-child(1){
+            display: flex;
+           justify-content: space-between;
+        }
+        .d5>div:nth-child(3){
+            display: flex;
+           justify-content: space-between;
+        }
+        .d6{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 6%;
+            display: flex;
+            justify-content: space-between;
+        }
+        .d666{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 100%;
+            margin: 7px;
+        }
+        .d6>div:nth-child(1){
+            display: flex;
+            justify-content: space-around;
+            flex-direction: column;
+        }
+        .d6>div:nth-child(2){
+            display: flex;
+            justify-content: space-around;
+            flex-direction: column;
+        }
+        .d7{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 6%;
+        }
+        .d777{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 100%;
+            margin: 7px;
+        }
+        .d7>div:nth-child(2){
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .d7>div:nth-child(1){
+            display: flex;
+           justify-content: space-between;
+        }
+        .d7>div:nth-child(3){
+            display: flex;
+           justify-content: space-between;
+        }
+        .d8{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 6%;
+        }
+        .d888{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 100%;
+            margin: 7px;
+        }
+        .d8>div:nth-child(2){
+            display: flex;
+            justify-content: space-between;
+        }
+        .d8>div:nth-child(1){
+            display: flex;
+           justify-content: space-between;
+        }
+        .d8>div:nth-child(3){
+            display: flex;
+           justify-content: space-between;
+        }
+        .d9{
+            width: 100px;
+            height: 100px;
+            border: 2px solid red;
+            border-radius: 6%;
+            display: flex;
+            flex-wrap: wrap;
+        }
+        .d99{
+            width: 20px;
+            height: 20px;
+            background-color: black;
+            border-radius: 100%;
+            margin: 6.5px;
+        }
+```
+# 作业二
+1. 效果如下
+
+![](./imgs/第一个.gif)
+
+2. 主要代码
+```css
+ .box{
+            display: flex;
+            /* width: 1000px; */
+            /* height: auto; */
+        }
+        .d1{
+            width: 100px;
+            height: 100px;
+            background-color: rosybrown;
+        }
+        .d2{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(131, 60, 60);
+        }
+        .d3{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(156, 59, 59);
+        }
+        .d4{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(158, 34, 34);
+        }
+        .d5{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(189, 20, 20);
+        }
+        .d6{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(114, 11, 11);
+        }
+        .d7{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(51, 3, 3);
+        }
+        .d8{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(19, 1, 1);
+        }
+        .d9{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(27, 185, 34);
+        }
+        .d10{
+            width: 100px;
+            height: 100px;
+            background-color: rgb(5, 37, 78);
+        }
+       @media (max-width:500px) {
+        .box{
+            flex-direction: column;
+        }
+        .box>div:nth-child(n+6){
+            display: none;
+        }
+       }
+```
+# 作业三
+1. 效果如下
+
+![](./imgs/歌曲.gif)
+
+2. 主要代码
+```css
+ .d1>div{
+            width: 150px;
+            height: 150px;
+            float: left;
+            margin: 10px;
+        }
+        .d1 img{
+            border-radius: 7%;
+            position: relative;
+        }
+        .d1 .j{
+            background-image: url(./箭头.png);
+            background-repeat: no-repeat;
+            background-size: 14px;
+            width: 90px;
+            height: 21px;
+            position: absolute;
+            top: 142px;
+            margin-left: 9px;
+        }
+        .j p{
+            font-size: 15px;
+            margin-left: 18px;
+            margin-top: 0px;
+            color: rgb(255, 255, 255);
+        }
+        .d2>div{
+            width: 150px;
+            height: 150px;
+            float: left;
+            margin: 10px;
+        }
+        .d2 img{
+            border-radius: 7%;
+            position: relative;
+        }
+        .d2 .j{
+            background-image: url(./箭头.png);
+            background-repeat: no-repeat;
+            background-size: 14px;
+            width: 90px;
+            height: 21px;
+            position: absolute;
+            top: 364px;
+            margin-left: 10px;
+        }
+        .d1{
+            /* margin-top: 100px; */
+            display: flex;
+            justify-content: space-around;
+        }
+        .d2{
+            display: flex;
+            justify-content: space-around;
+            margin-top: 50px;
+        }
+        .d11>p{
+            margin-top: 5px;
+        }
+        .d22>p{
+            margin-top: 5px;
+        }
+```
+# 作业四
+1. 效果如下
+
+![](./imgs/鱼.png)
+
+2. 主要代码
+```css
+ .box{
+            width: 540px;
+            height: 740px;
+            border: 1px solid;
+            transform: translate(70%,0);
+        }
+        .box>div{
+            margin: 25px;
+        }
+        .top{
+            height: 40px;
+        }
+        .top .a{
+            width: 150px;
+            height: 40px;
+            background-image: url(./播放.png);
+            background-repeat: no-repeat;
+            background-size: 35px;
+        }
+        h3{
+            margin-left: 50px;
+            font-size: 25px;
+        }
+        .b{
+            width: 90px;
+            height: 30px;
+            background-image: url(./刷新.png);
+            background-repeat: no-repeat;
+            background-size: 25px;
+            transform: translate(390px,-60px);
+        }
+        h4{
+            margin-left: 30px;
+            font-size: 20px;
+            color: rgb(233, 54, 54);
+        }
+        .bottom{
+            display: block;
+            flex-direction: column;
+        }
+        .fish{
+            width: 480px;
+            height: 140px;
+        }
+        .imgg{
+            width: 230px;
+            height: 140px;
+            background-image: url(./鱼图.jpeg);
+            background-repeat: no-repeat;
+            background-size: contain;
+            float: left;
+            margin: 10px;
+        }
+      
+       .text p{
+        font-weight: bold;
+        font-size: 20px;
+        transform: translate(0px,10px);
+       }
+       
+       span{
+        background-color: #ffe7e7;
+        color: rgb(233, 54, 54);
+        padding: 6px;
+        border-radius: 10%;
+       }
+       .text2>div{
+        float: left;
+        color: rgb(134, 133, 133);
+        margin-top: 25px;
+        margin-right: 25px;
+        font-size: 16px;
+       }
+```
+# 作业五
+1. 效果如下
+
+![](./imgs/圣杯.gif)
+
+2. 主要代码
+
+```css
+*{
+            margin: 0;
+            padding: 0;
+        }
+        .box{
+            height:100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        .top{
+            background-color: #f1d165;
+            text-align: center;
+        }
+        .center{
+            display: flex;
+            flex-direction: row;
+            flex: 20;
+            text-align: center;
+        }
+        .d1{
+            background-color: darkgreen;
+            order: -1;
+            flex: 0 0 12em;
+        }
+        .d2{
+            background-color: #fff;
+            flex: 1;
+        }
+        .d3{
+            background-color:darkorchid;
+            flex: 0 0 12em;
+            
+        }
+        .bottom{
+            background-color: #363434;
+            text-align: center;
+            color: white;
+        }
+        .top,.bottom{
+            flex: 1;
+        }
+        @media (max-width:500px) {
+            .center{
+            display: flex;
+            flex-direction: column;
+            flex: 20;
+        }
+        .d2{
+            order: -2;
+        }
+        }
+```
+# 作业六
+1. 效果如下
+
+![](./imgs/flex布局.png)
+
+2. 主要代码
+```css
+ .box{
+            width: 800px;
+            height: 600px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            flex-direction: column;
+            background-color: rgb(204, 210, 247);
+        }
+        .top{
+            width: 760px;
+            height: 120px;
+            border: 1px solid;
+            margin: 20px 20px 0px 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background-color: rgb(144, 192, 141);
+        }
+        .top .left{
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+
+        }
+        .top .left>div{
+            width: 80px;
+            height: 80px;
+            margin: 20px 40px 20px 0px;
+            border: 1px solid;
+            margin-right: 40px;
+            background-color: rgb(204, 210, 247);
+        }
+        .top .left:nth-child(1){
+            margin: 20px 40px 20px 20px;
+        }
+        .top .right{
+            width: 80px;
+            height: 80px;
+            border: 1px solid;
+            margin: 20px 20px 20px 0px;
+            background-color: rgb(204, 210, 247);
+        }
+        .last{
+            width: 760px;
+            border: 1px solid;
+            background-color: rgb(144, 192, 141);
+            display: flex;
+            margin: 20px;
+        }
+        .last .left{
+            display: flex;
+            flex-direction: column;
+            
+        }
+        .last .left>.d1{
+            width: 200px;
+            height: 300px;
+            border: 1px solid;
+            background-color: rgb(204, 210, 247);
+            margin: 20px 40px 20px 20px;
+        }
+        .last .left>.d2{
+            display: flex;
+        }
+        .last .left>.d2>div{
+            width: 50px;
+            height: 50px;
+            border: 1px solid;
+            margin: 0px 0px 20px 20px;
+            background-color: rgb(204, 210, 247);
+        }
+        .last .right{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            margin: 5px 20px 20px 0px;
+        }
+        .last .right>div{
+            width: 480px;
+            height: 40px;
+            border: 1px solid;
+            margin: 15px 20px 0px 0px;
+            background-color: rgb(204, 210, 247);
+        }
+```
+# 作业七
+1. 效果如下
+
+![](./imgs/携程.png)
+
+2. 主要代码
+```css
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: #f4f4f4;
+}
+
+.all {
+    width: 390px;
+    height: 844px;
+    margin: 0px auto;
+    background-color: antiquewhite;
+}
+
+.search {
+    width: 390px;
+    height: 45px;
+    background-color: #f4f4f4;
+    position: relative;
+}
+
+.search input {
+    float: left;
+}
+
+.img1 {
+    width: 150px;
+    height: 36px;
+    position: absolute;
+    background-image: url(../../img/flex布局/5-2.png);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: -49px -275px;
+    overflow: hidden;
+    margin-left: 300px;
+    float: left;
+}
+
+.my span {
+    margin-top: 32px;
+    float: left;
+    margin-left: 162px;
+    color: #0e9fdc;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.img {
+    width: 390px;
+    height: 78px;
+    background: url(../../img/flex布局/5-12.jpg) no-repeat;
+    background-size: contain;
+    margin-bottom: 3px;
+}
+
+.nav {
+    /* width: 390px; */
+    height: 65px;
+    background-color: #fff;
+    border-radius: 7px;
+    list-style-type: none;
+    display: flex;
+    justify-content: space-around;
+}
+
+.nav div {
+    width: 77px;
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 12px;
+    font-weight: 500;
+    /* background-color: #fff; */
+}
+
+[class^=li] {
+    width: 35px;
+    height: 35px;
+    background-image: url(../../img/flex布局/5-3.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    margin-top: 7px;
+}
+
+.li2 {
+    background-position: 0 -35px;
+}
+
+.li3 {
+    background-position: 0 -69px;
+}
+
+.li4 {
+    background-position: 0 -105px;
+}
+
+.li5 {
+    background-position: 0 -139px;
+}
+
+.hotel {
+    height: 245px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.h1,
+.h2,
+.h3 {
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+}
+
+[class^='left'] {
+    height: 80px;
+    width: 129px;
+    text-align: center;
+    background-image: url(../../img/flex布局/5-4.png);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: bottom center;
+    line-height: 50px;
+    color: #fff;
+}
+
+.left1 {
+    background-color: #fa6c54;
+}
+
+.left2 {
+    background-color: #4e9ced;
+}
+
+.left3 {
+    background-color: #48c794;
+}
+
+[class^='middle'],
+[class^='right'] {
+    height: 80px;
+    width: 129px;
+    /* background-color: #fb8351; */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+[class^='middle'] div,
+[class^='right'] div {
+    height: 39px;
+    width: 128px;
+    background-color: #fa7453;
+    line-height: 39px;
+    text-align: center;
+    color: #fff;
+}
+
+.middle1 div,
+.right1 div {
+    background-color: #fa6c54;
+}
+
+.middle2 div,
+.right2 div {
+    background-color: #4e9ced;
+}
+
+.middle3 div,
+.right3 div {
+    background-color: #48c794;
+}
+
+.wifi {
+    height: 115px;
+    background-color: #fff;
+    border-radius: 7px;
+    margin-bottom: 3px;
+}
+
+.wifi ul {
+    list-style-type: none;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.wifi ul div {
+    width: 76px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    font-size: 14px;
+}
+
+.wUl .w1 {
+    width: 30px;
+    height: 30px;
+    background: url(../../img/flex布局/5-1.png) no-repeat;
+    background-size: cover;
+    margin-top: 5px;
+}
+
+.active {
+    height: 70px;
+    background-color: #fff;
+    margin-bottom: 3px;
+    position: relative;
+}
+
+.active .a1 {
+    width: 125px;
+    height: 30px;
+    background: url(../../img/flex布局/5-5.png) no-repeat;
+    background-size: cover;
+    background-position: 8px -30px;
+    position: absolute;
+    top: 20px;
+}
+
+.bottom1 {
+    width: 390px;
+    height: 135px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.bottom1 .s1 {
+    width: 200px;
+    height: 135px;
+    background: url(../../img/flex布局/5-6.jpg) no-repeat;
+    background-size: contain;
+}
+
+.bottom1 .s2 {
+    width: 200px;
+    height: 135px;
+    background: url(../../img/flex布局/5-7.jpg) no-repeat;
+    background-size: contain;
+}
+
+.bottom2 {
+    width: 390px;
+    height: 85px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.bottom2 .s3 {
+    width: 200px;
+    height: 85px;
+    background: url(../../img/flex布局/5-8.jpg) no-repeat;
+    background-size: contain;
+}
+
+.bottom2 .s4 {
+    width: 200px;
+    height: 85px;
+    background: url(../../img/flex布局/5-9.jpg) no-repeat;
+    background-size: contain;
+}
+
+.bottom3 {
+    width: 390px;
+    height: 85px;
+    display: flex;
+    justify-content: space-around;
+}
+
+.bottom3 .s5 {
+    width: 200px;
+    height: 85px;
+    background: url(../../img/flex布局/5-10.jpg) no-repeat;
+    background-size: contain;
+}
+
+.bottom3 .s6 {
+    width: 200px;
+    height: 85px;
+    background: url(../../img/flex布局/5-11.jpg) no-repeat;
+    background-size: contain;
+}
+```
+# 作业八
+1. 效果如下
+
+![](./imgs/京东.png)
+
+2. 主要代码
+```css
+*{
+            margin: 0;
+            padding: 0;
+        }
+        .d1{
+            width: 390px;
+            height: 40px;
+            /* border: 1px solid; */
+        }
+       .d1 .left{
+            width: 290px;
+            height: 40px;
+            background-color: rgb(51, 52, 51);
+            float: left;
+        }
+        .h1{
+            background-image: url(./京东img/dh5-close.png);
+            background-repeat: no-repeat;
+            width: 60px;
+            height: 60px;
+            background-size: 20%;
+            transform: translate(17px,14px);
+            float: left;
+        }
+        .h2{
+            background-image: url(./京东img/dh5-logo.png);
+            background-repeat: no-repeat;
+            width: 80px;
+            height: 80px;
+            background-size: 40%;
+            transform: translate(-15px,4px);
+            float: left;
+        }
+        .h3{
+            width: 296px;
+            color: white;
+            font-size: 13px;
+            transform: translate(-35px,10px);
+        }
+        .d1 .right{
+            width: 100px;
+            height: 40px;
+            background-color: rgb(244, 53, 21);
+            float: left;
+            text-align: center;
+            line-height: 40px;
+           
+        }
+        .right a{
+            text-decoration: none;
+            color: white;
+        }
+        .d2{
+            width: 390px;
+            height: 40px;
+            /* border: 1px solid; */
+            background-color: rgb(195, 10, 11);
+            /* display: flex; */
+            position: static;
+            z-index: 10;
+            top: 0;
+        }
+        .d2 .left{
+            background-image: url(./京东img/dh5-list.png);
+            background-repeat: no-repeat;
+            width: 40px;
+            height: 32px;
+            background-size: 55%;
+            transform: translate(15px,10px);
+            float: left;
+        }
+        .d2 .center{
+            width: 280px;
+            height: 30px;
+            background-color: white;
+            border-radius: 15px;
+            transform: translate(55px,4px);
+        }
+        .c1{
+            background-image: url(./京东img/dh5-left-jd.png);
+            background-repeat: no-repeat;
+            width: 40px;
+            height: 30px;
+            background-size: 23px;
+            transform: translate(10px,6px);
+        }
+        .c2{
+            width: 1px;
+            height: 16px;
+            background-color: rgb(179, 178, 178);
+            transform: translate(0px,-23px);
+            float: left;
+        }
+        .c3{
+            background-image: url(./京东img/dh5-jd-sprites.png);
+            background-repeat: no-repeat;
+            background-position: -83px 0px;
+            width: 14px;
+            height: 14px;
+            transform: translate(5px,-22px);
+            background-size: 200px;
+            float: left;
+        }
+        .c4{
+            transform: translate(15px,-25px);
+            float: left;
+        }
+        .d2 .right{
+            transform: translate(200px,-23px);
+        }
+        .d3{
+            width: 390px;
+            height: 163px;
+            /* border: 1px solid; */
+            background-image: url(./京东img/jdh5-banner.png);
+            background-repeat: no-repeat;
+            background-size: 100%;
+            background-color: rgb(195, 10, 11);
+        }
+        .d4{
+            width: 390px;
+            height: 133px;
+            /* border: 1px solid; */
+            display: flex;
+            background-color: rgb(195, 10, 11);
+        }
+        .d4 .f1{
+            background-image: url(./京东img/dh5-nianhuo1.png);
+            background-repeat: no-repeat;
+            width: 300px;
+            height: 345px; 
+            background-size: 102px 132px;
+        }
+        .d4 .f2{
+            background-image: url(./京东img/dh5-nianhuo2.png);
+            background-repeat: no-repeat;
+            width: 585px;
+            height: 370px;
+            background-size: 200px 132px;
+
+        }
+        .d4 .f3{
+            background-image: url(./京东img/jdh5-nianhuo3.png);
+            background-repeat: no-repeat;
+            width: 270px;
+            height: 354px;
+            background-size: 103px;
+
+        }
+        .d5{
+            width: 390px;
+            height: 150px;
+            /* border: 1px solid; */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+        .d5 span{
+            display: block;
+            transform: translate(0px,40px);
+        }
+        .shopping1{
+            width: 350px;
+            height: 60px;
+            display: flex;
+            transform: translate(8px,-15px);
+        }
+        .shopping1 .s1{
+            background-image: url(./京东img/dh5-nav1.png);
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 120px;
+            background-size: 40px;
+        }
+        
+        .shopping1 .s2{
+            background-image: url(./京东img/dh5-nav2.png);
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 120px;
+            background-size: 40px;
+        }
+        .shopping1 .s3{
+            background-image: url(./京东img/dh5-nav3.png);
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 120px;
+            background-size: 40px;
+        }
+        .shopping1 .s4{
+            background-image: url(./京东img/dh5-nav4.png);
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 120px;
+            background-size: 40px;
+        }
+        .shopping1 .s5{
+            background-image: url(./京东img/dh5-nav5.png);
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 120px;
+            background-size: 40px;
+        }
+        .shopping2{
+            width: 350px;
+            height: 60px;
+            display: flex;
+            transform: translate(8px,0px);
+        }
+        .shopping2 .o1{
+            background-image: url(./京东img/dh5-nav6.png);
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 120px;
+            background-size: 40px;
+        }
+        .shopping2 .o2{
+            background-image: url(./京东img/dh5-nav7.png);
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 120px;
+            background-size: 40px;
+        }
+        .shopping2 .o3{
+            background-image: url(./京东img/dh5-nav8.png);
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 120px;
+            background-size: 40px;
+        }
+        .shopping2 .o4{
+            background-image: url(./京东img/dh5-nav9.png);
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 120px;
+            background-size: 40px;
+        }
+        .shopping2 .o5{
+            background-image: url(./京东img/dh5-nav10.png);
+            background-repeat: no-repeat;
+            width: 120px;
+            height: 120px;
+            background-size: 40px;
+        }
+        .d6{
+            width: 390px;
+            height: 160px;
+            /* border: 1px solid; */
+            display: flex;
+            flex-direction: column;
+        }
+        .d6 .top1{
+            display: flex;
+            /* border: 1px solid; */
+            height: 37px;
+        }
+        .m3{
+            background-image: url(./京东img/dh5-ms-dc.png);
+            background-repeat: no-repeat;
+            width: 39px;
+            height: 35px;
+            background-size: 70%;
+            transform: translate(35px,-5px);
+        }
+        .m5{
+            background-image: url(./京东img/dh5-ms-right.png);
+            background-repeat: no-repeat;
+            width: 24px;
+            height: 24px;
+            background-size: 70%;
+            transform: translate(180px,3px);
+        }
+        .d6 .bottom{
+            display: flex;
+            justify-content: space-around;
+            /* flex-wrap: wrap; */
+            /* transform: translate(0px,10px); */
+        }
+        .bo1{
+            background-image: url(./京东img/jdh5-ms1.jpg);
+            background-repeat: no-repeat;
+            width: 150px;
+            height: 150px;
+            background-size: 60px 80px; 
+        }
+        .bo2{
+            background-image: url(./京东img/jdh5-ms2.jpg);
+            background-repeat: no-repeat;
+            width: 150px;
+            height: 150px;
+            background-size: 60px 80px;
+        }
+        .bo3{
+            background-image: url(./京东img/jdh5-ms3.jpg);
+            background-repeat: no-repeat;
+            width: 150px;
+            height: 150px;
+            background-size: 60px 80px;
+        }
+        .bo4{
+            background-image: url(./京东img/jdh5-ms4.jpg);
+            background-repeat: no-repeat;
+            width: 150px;
+            height: 150px;
+            background-size: 60px 80px;
+        }
+        .bo5{
+            background-image: url(./京东img/jdh5-ms5.jpg);
+            background-repeat: no-repeat;
+            width: 150px;
+            height: 150px;
+            background-size: 60px 80px;
+        }
+        .bo6{
+            background-image: url(./京东img/jdh5-ms6.jpg);
+            background-repeat: no-repeat;
+            width: 150px;
+            height: 150px;
+            background-size: 60px 80px;
+        }
+        .d6 span{
+            display: block;
+            color: rgb(195, 10, 11);
+            font-weight:bold;
+            transform: translate(5px,95px);
+        }
+        .d7{
+            width: 390px;
+            height: 182px;
+            /* border: 1px solid; */
+            display: flex;
+            justify-content: space-between;
+            background-color: #dbdada;
+        }
+        .d7 .wu1{
+            background-image: url(./京东img/jdh5-product1.webp);
+            background-repeat: no-repeat;
+            width: 360px;
+            height: 360px;
+            background-size: 200px 180px;
+        }
+        .d7 .wu2{
+            background-image: url(./京东img/jdh5-product2.webp);
+            background-repeat: no-repeat;
+            width: 360px;
+            height: 360px;
+            background-size: 93%;
+            transform: translate(13px,0px);
+        }
+        .d8{
+            width: 390px;
+            height: 85px;
+            /* border: 1px solid; */
+            position: fixed;
+            bottom: 0px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            background-color: #fff;
+            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
+        }
+```
\ No newline at end of file
diff --git "a/\346\235\216\345\250\234/imgs/flex\345\270\203\345\261\200.png" "b/\346\235\216\345\250\234/imgs/flex\345\270\203\345\261\200.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d0a3575916494fb7a700cfaf9c009055ad9d586d
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/flex\345\270\203\345\261\200.png" differ
diff --git "a/\346\235\216\345\250\234/imgs/\344\272\254\344\270\234.png" "b/\346\235\216\345\250\234/imgs/\344\272\254\344\270\234.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f2b800b44739f81556adc943c856b541d0bae454
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/\344\272\254\344\270\234.png" differ
diff --git "a/\346\235\216\345\250\234/imgs/\345\234\243\346\235\257.gif" "b/\346\235\216\345\250\234/imgs/\345\234\243\346\235\257.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..33e39dbfc47bab0918120b21ce7e1ff9ea78ff4a
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/\345\234\243\346\235\257.gif" differ
diff --git "a/\346\235\216\345\250\234/imgs/\346\220\272\347\250\213.png" "b/\346\235\216\345\250\234/imgs/\346\220\272\347\250\213.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f226a6a10076237baa1a84af779cbbfe7af76126
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/\346\220\272\347\250\213.png" differ
diff --git "a/\346\235\216\345\250\234/imgs/\346\255\214\346\233\262.gif" "b/\346\235\216\345\250\234/imgs/\346\255\214\346\233\262.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..789e8877edf222bdd2cc8dc9caa13a65fbc23152
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/\346\255\214\346\233\262.gif" differ
diff --git "a/\346\235\216\345\250\234/imgs/\347\254\254\344\270\200\344\270\252.gif" "b/\346\235\216\345\250\234/imgs/\347\254\254\344\270\200\344\270\252.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..2c27c2a55beb8c68eef779f89ef9a3d561fe8393
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/\347\254\254\344\270\200\344\270\252.gif" differ
diff --git "a/\346\235\216\345\250\234/imgs/\351\252\260\345\255\220.png" "b/\346\235\216\345\250\234/imgs/\351\252\260\345\255\220.png"
new file mode 100644
index 0000000000000000000000000000000000000000..92a60b064aa200ef0c7c156e0999b47346e2a609
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/\351\252\260\345\255\220.png" differ
diff --git "a/\346\235\216\345\250\234/imgs/\351\261\274.png" "b/\346\235\216\345\250\234/imgs/\351\261\274.png"
new file mode 100644
index 0000000000000000000000000000000000000000..11e7efd4c3ec3b0401b4019aa2d99952c373dafc
Binary files /dev/null and "b/\346\235\216\345\250\234/imgs/\351\261\274.png" differ