diff --git "a/\351\230\231\346\263\263\347\217\215/20241104(flex\345\270\203\345\261\200).md" "b/\351\230\231\346\263\263\347\217\215/20241104(flex\345\270\203\345\261\200).md"
new file mode 100644
index 0000000000000000000000000000000000000000..01d730f2ed10a552e8f11817c15b837ab5a4ade8
--- /dev/null
+++ "b/\351\230\231\346\263\263\347\217\215/20241104(flex\345\270\203\345\261\200).md"
@@ -0,0 +1,1045 @@
+# flex布局(重点!!!)
+## flex 布局的优势
+- flex 布局的子元素不会脱离文档流
+- flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范
+
+
+## 概念：弹性盒子、子元素
+- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
+- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
+
+
+## 概念：主轴和侧轴
+- 主轴：flex容器的主轴，默认是水平方向，从左向右。
+- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
+
+
+**主轴和侧轴不是固定不变的，可以通过 `flex-direction` 更换方向**
+
+
+
+
+# 弹性盒子
+## 声明定义
+>使用display:flex 或 display:inline-flex 声明一个父容器为弹性盒子。(一般使用display:flex)
+
+
+## flex-direction 属性
+>用于设置盒子中子元素的排列方向。
+
+### 属性值
+- row	从左到右水平排列子元素（默认值）
+- column	从上到下垂直排列子元素
+- row-reverse	从右向左排列子元素
+- column-reverse	从下到上垂直排列子元素
+
+**子元素默认从左到右排列**
+
+
+## flex-wrap 属性
+>控制子元素溢出时的换行处理。
+
+
+## justify-content 属性
+>控制子元素在主轴上的排列方式。
+
+
+
+
+# 弹性元素
+## justify-content 属性
+### justify-content: flex-start; 设置子元素在主轴上的对齐方式。属性值可以是：
+- flex-start 从主轴的起点对齐（默认值）
+- flex-end 从主轴的终点对齐
+- center 居中对齐
+- space-around 在父盒子里平分
+- space-between 两端对齐 平分
+
+
+## align-items 属性
+>设置子元素在侧轴上的对齐方式。
+
+### 属性值
+- flex-start 从侧轴开始的方向对齐 
+- flex-end 从侧轴结束的方向对齐 
+- baseline 基线 默认同flex-start 
+- center 中间对齐 
+- stretch 拉伸
+
+
+
+# 课后作业
+## 骰子
+![](./rendering/骰子.png)
+```
+body{
+            margin: 20px;
+            display: flex;
+            justify-content: space-around;
+        }
+        body>div{
+            display: flex;
+            width: 80px;
+            height: 80px;
+            border-radius: 5px;
+            border:2px solid red ;
+            box-sizing: border-box;
+        }
+        p{
+            width: 12px;
+            height: 12px;
+            background-color: black;
+            border-radius: 12px;
+            margin: 3px;
+        }
+        .one{
+            justify-content: center;
+            align-items: center;
+        }
+        .two{
+            justify-content: space-around;
+            align-items: center;
+            flex-direction: column;
+        }
+        .three{
+            justify-content: space-around;
+            align-items: center;
+            flex-direction: column;
+        }
+        .three :nth-child(1){
+            align-self: flex-start;
+        }
+        .three :nth-child(3){
+            align-self: flex-end;
+        }
+        .four{
+            justify-content: space-around;
+            /* align-items: center; */
+            flex-direction: column;
+        }
+        .four div{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+        }
+        .five{
+            justify-content: space-around;
+            /* align-items: center; */
+            flex-direction: column;
+        }
+        .five div{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+        }    
+        .six{
+            justify-content: space-around;
+            /* align-items: center; */
+            flex-direction: column;
+        }
+        .six div{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+        }   
+        .seven{
+            justify-content: space-around;
+            /* align-items: center; */
+            flex-direction: column;
+        }
+        .seven div{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+        }
+        .eight{
+            justify-content: space-around;
+            /* align-items: center; */
+            flex-direction: column;
+        }
+        .eight div{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+        .nine{
+            justify-content: space-around;
+            /* align-items: center; */
+            flex-direction: column;
+        }
+        .nine div{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+```
+## 酷狗音乐
+![](./rendering/酷狗音乐呀.gif)
+```
+ .box{
+            height: 1200px;
+            margin: 0 auto;
+        }
+        .top, .bottom{
+            height: 250px;
+            display: flex;
+            justify-content: space-between; 
+        }
+       
+        .im{
+            background-repeat: no-repeat;
+            width: 150px;
+            height: 150px;
+            position: relative;
+        }
+        .p{
+            font-size: 14px;
+            width: 150px;
+            padding-top: 5px;
+        }
+        .bf,.bf2{
+            width: 150px;
+            height: 40px;
+            position: absolute;
+            top: 13%;
+        }
+        .bf2{
+            top: 41%;
+        }
+        .bfj{
+            width: 22px;
+            height: 26px;
+            background-size: 13px 17px;
+            background-repeat: no-repeat;
+            background-image: url(./image/播放键.png);
+            margin-top: 5px;
+            background-position: 7px 3px;
+        }
+        .bfl{
+            width: 100px; 
+            height: 30px;
+            color: white;
+            padding-left: 25px;
+        }
+        .t1,.t2,.t3,.t4,.t5,.b1,.b2,.b3,.b4,.b5{
+            border-radius: 10px;
+        }
+        .t1{
+            background-image: url(./image/酷狗1.jpg);
+            
+        }
+        .t2{
+            background-image: url(./image/酷狗2.jpg);
+           
+        }
+        .t3{
+            background-image: url(./image/酷狗3.jpg);
+           
+        }
+        .t4{
+            background-image: url(./image/酷狗4.jpg);
+            
+        }
+
+        .b1{
+            background-image: url(./image/酷狗5.jpg);
+           
+        }
+        .b2{
+            background-image: url(./image/酷狗6.jpg);
+           
+        }
+        .b3{
+            background-image: url(./image/酷狗7.jpg);
+           
+        }
+        .b4{
+            background-image: url(./image/酷狗8.jpg);
+            
+        }
+```
+
+## 今日头条
+![](./rendering/今日头条.png)
+```
+.top{
+            width: 550px;
+            height: 30px;
+            display: flex;
+        }
+        .bfj{
+            width: 25px;
+            height: 25px;
+            background-size: 25px 25px;
+            background-image: url(./image/今日头条播放键.png);
+            margin-top: 5px;
+            margin-right: 10px;
+        }
+        .txt{
+            font-size: 24px;
+        }
+        .hyh{
+            margin-top: 10px;
+            margin-left: 175px;
+            width: 20px;
+            height: 20px;
+            background-size: 20px 20px;
+            background-image: url(./image/换一换.png);
+        }
+        .txt2{
+            margin-left: 8px;
+            margin-top: 5px;
+            font-size: 18px;
+            color: red;
+        }
+        .content{
+            width: 550px;
+            height: 430px;
+        }
+        .fish{
+            width: 170px;
+            height: 110px;
+            background-size: 170px 110px;
+            background-image: url(./image/今日头条鱼.jpeg);
+        }
+        .o{
+            display: flex;
+            padding-top: 25px;
+        }
+        .two{
+            width:225px;
+            height: 110px;
+            margin-left: 13px;
+        }
+        .wb{
+            width: 220px;
+            font-size: 19px;
+        }
+        .pl{
+            width: 70px;
+            height: 25px;
+            text-align: center;
+            background-color: rgb(249, 237, 237);
+            color: red;
+            font-size: 14px;
+            border-radius: 7px;
+            padding-top: 5px;
+            margin-top: 5px;
+        }
+        .bottom{
+            margin-top: 5px;
+            font-size: 16px;
+            color: gray;
+        }
+```
+
+## 圣杯布局
+![](./rendering/圣杯页面.gif)
+```
+ * {
+      margin: 0;
+      padding: 0;
+    }
+    .body {
+      width: 100vw;
+      height: 100vh;
+    }
+    .top {
+      width: 100vw;
+      height: 100px;
+      background-color: #fcf6e3;
+      text-align: center;
+      line-height: 100px;
+    }
+    .middle {
+      width: 100vw;
+      height: calc(100vh - 200px);
+      background-color: pink;
+      display: flex;
+      text-align: center;
+    }
+    .left {
+      width: 200px;
+      height: 100%;
+      background-color: green;
+    }
+    .center {
+      height: 100%;
+      width: calc(100vw - 400px);
+      background-color: white;
+    }
+    .right {
+      width: 200px;
+      height: 100%;
+      background-color: purple;
+    }
+    .bottom {
+      width: 100vw;
+      height: 100px;
+      background-color: black;
+      text-align: center;
+      line-height: 100px;
+      color: white;
+    }
+    @media screen and (max-width: 500px) {
+      .middle {
+        flex-direction: column;
+      }
+      .center {
+        width: 100%;
+        order: 1;
+      }
+      .left {
+        width: 100%;
+        order: 2;
+      }
+      .right {
+        width: 100%;
+        order: 3;
+      }
+    }
+```
+
+## 基本布局
+![](./rendering/基本布局.png)
+```
+* {
+            margin: 0;
+            padding: 0;
+            background-color: #90c08d;
+        }
+        .box {
+            width: 800px;
+            height: 600px;
+            background-color: #ccd2f7;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-evenly;
+            margin: 20px auto;
+            border: 1px solid;
+        }
+        .one {
+            width: 760px;
+            height: 120px;
+            background-color: #90c08d;
+            margin: 0px auto;
+            display: flex;
+            align-items: center;
+            border: 1px solid;
+        }
+        .two {
+            width: 760px;
+            height: 420px;
+            background-color: #90c08d;
+            margin: 0px auto;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            border: 1px solid;
+        }
+        [class^='oo'] {
+            width: 80px;
+            height: 80px;
+            background-color: #ccd2f7;
+            margin: 20px;
+            border: 1px solid;
+        }
+        .oo5 {
+            margin-left: 180px;
+        }
+
+        .left {
+            width: 200px;
+            height: 370px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .l1 {
+            width: 200px;
+            height: 300px;
+            background-color: #ccd2f7;
+            border: 1px solid;
+        }
+        [class^='t1'] {
+            width: 50px;
+            height: 50px;
+            background-color: #ccd2f7;
+            border: 1px solid;
+        }
+        .three {
+            width: 200px;
+            height: 50px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+        .three2 {
+            width: 480px;
+            height: 370px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        [class^='t2'] {
+            width: 480px;
+            height: 40px;
+            background-color: #ccd2f7;
+            border: 1px solid;
+        }
+```
+
+## 携程
+![](./rendering/携程页面.gif)
+```
+ .box {
+            width: 100vw;
+            height: 100%;
+            flex-direction: column;
+            display: flex;
+        }
+        .header {
+            width: 750px;
+            height: 50px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            position: fixed;
+            top: 0;
+        }
+        .ssk {
+            width: 600px;
+            height: 25px;
+            border: 1px solid;
+            border-radius: 5px;
+            padding-left: 2px;
+            padding-top: 3px;
+            margin-left: -15px;
+            display: flex;
+        }
+        .ss {
+            width: 17px;
+            height: 17px;
+            background-image: url(./image/xiecheng-sprite.png);
+            background-repeat: no-repeat;
+            background-size: 80px;
+            background-position: -42px -211px;
+            margin-left: 10px;
+        }
+        .plh {
+            width: 400px;
+            height: 15px;
+            padding-left: 20px;
+            margin-top: -2px;
+            color: gray;
+        }
+        .my {
+            width: 40px;
+            height: 40px;
+        }
+        .mine {
+            background-image: url(./image/xiecheng-sprite.png);
+            width: 30px;
+            height: 30px;
+            background-size: 128px;
+            background-position: -71px -237px;
+        }
+        .wd {
+            font-size: 12px;
+            padding-left: 4px;
+            margin-top: -2px;
+        }
+        .none {
+            width: 750px;
+            height: 50px;
+        }
+
+        .gt {
+            width: 750px;
+            background-size: 750px 150px;
+            border: 1px solid;
+        }
+        .menu {
+            width: 750px;
+            height: 100px;
+            display: flex;
+            border: 1px solid;
+            justify-content: space-around;
+            padding-top: 15px;
+        }
+        .mm {
+            width: 60px;
+            height: 60px;
+            background-size: 59px 294px;
+        }
+        .mm>p {
+            width: 90px;
+            padding-top: 49px;
+            font-size: 20px;
+        }
+        .m1,.m2,.m3, .m4,.m5 {
+            background-image: url(./携程素材/menu.png);
+        }
+        .m2 {
+            background-position: 1px -58px;
+        }
+        .m3 {
+            background-position: 1px -117px;
+        }
+        .m4 {
+            background-position: 1px -176px;
+        }
+        .m5 {
+            background-position: 1px -235px;
+        }
+        .hotel {
+            width: 750px;
+            height: 585px;
+            border: 1px solid;
+            margin-top: 5px;
+            font-size: 26px;
+            color: white;
+        }
+        .ht {
+            padding-left: 60px;
+            margin-top: 30px;
+        }
+        .op {
+            background-image: url(./携程素材/酒店.png);
+            width: 260px;
+            height: 185px;
+            background-size: 279px 98px;
+            background-repeat: no-repeat;
+            background-position: -14px 83px;
+        }
+        .ot,.tt,.tht {
+            padding-left: 69px;
+        }
+        .one, .two,.three {
+            width: 750px;
+            height: 190px;
+            display: flex;
+        }
+        .o1,.o21, .o22, .o31, .o32 {
+            background-color: orangered;
+        }
+        .t1,.t21, .t22,.t31,.t32 {
+            background-color: skyblue;
+        }
+        .th1,.th21,.th22,.th31, .th32 {
+            background-color: greenyellow;
+        }
+        .o1,.o2,.o3,.t1, .t2,.t3,.th1, .th2, .th3 {
+            width: 250px;
+            height: 185px;
+        }
+        .o21,.o22,.o31, .o32, .t21, .t22, .t31, .t32,.th21,.th22, .th31, .th32 {
+            width: 245px;
+            height: 90px;
+        }
+        .o1,.o2, .t1,.t2,.th1,.th2 {
+            margin-right: 5px;
+        }
+        .o21,.o31, .t21, .t31, .th21,.th31 {
+            margin-bottom: 5px;
+        }
+        .two,.three {
+            margin-top: 5px;
+        }
+        .wifi {
+            width: 750px;
+            height: 190px;
+            border: 1px solid;
+        }
+        .w1,.w2 {
+            width: 750px;
+            height: 90px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .w1 {
+            padding-bottom: 5px;
+        }
+        .wf1,.wf2,.wf3,.wf4,.wf5,.wf6,.wf7,.wf8,.wf9,.wf10 {
+            width: 80px;
+            height: 80px;
+            background-image: url(./携程素材/图标.png);
+            background-repeat: no-repeat;
+            background-size: 67px 786px;
+            background-position: 9px 14px;
+        }
+        .tel {
+            margin-top: 65px;
+            margin-left: 15px;
+            font-size: 14px;
+        }
+        .hot {
+            width: 750px;
+            height: 100px;
+            border: 1px solid;
+            display: flex;
+        }
+        .ad {
+            width: 150px;
+            height: 50px;
+            background-image: url(./携程素材/temai.png);
+            background-position: 2px -30px;
+            margin-top: 30px;
+            margin-left: 30px;
+        }
+        .fl {
+            margin-top: 51px;
+            margin-left: 416px;
+            height: 30px;
+            background-color: rgb(221, 55, 138);
+            border: 1px solid rgb(221, 55, 138);
+            border-radius: 15px;
+            color: white;
+            font-size: 18px;
+            padding-left: 5px;
+            padding-top: 2px;
+        }
+        .bigi {
+            width: 750px;
+            height: 250px;
+            border: 1px solid;
+            display: flex;
+            background-size: 100% 100%;
+        }
+        .i1,.i2 {
+            width: 375px;
+            height: 250px;
+            background-size: 375px 250px;
+        }
+        .left,.right {
+            width: 375px;
+            height: 160px;
+        }
+        .i1 {
+            background-image: url(./携程素材/xc1.jpg);
+        }
+        .i2 {
+            background-image: url(./携程素材/gt.jpg);
+        }
+
+        .littlei {
+            width: 750px;
+            height: 300px;
+            border: 1px solid;
+            display: flex;
+            background-repeat: no-repeat;
+
+        }
+        .i3,.i4,.i5,.i6 {
+            width: 372px;
+            height: 150px;
+            background-size: 372px 150px;
+        }
+        .i3 {
+            background-image: url(./携程素材/票.jpg);
+        }
+        .i4 {
+            background-image: url(./携程素材/会员.jpg);
+        }
+        .i5 {
+            background-image: url(./携程素材/券.jpg);
+        }
+        .i6 {
+            background-image: url(./携程素材/商城.jpg);
+        }
+```
+
+## 京东
+![](./rendering/京东页面.gif)
+```
+.box {
+            width: 100%;
+            height: 700px;
+            margin: 0 auto;
+        }
+        .top {
+            width: 310px;
+            height: 35px;
+            display: flex;
+        }
+        .left1 {
+            width: 230px;
+            height: 35px;
+            display: flex;
+            background-color: gray;
+            justify-content: space-around;
+        }
+        .x {
+            width: 15px;
+            height: 15px;
+            background-image: url(./京东素材/x.png);
+            background-size: 15px 15px;
+            margin-top: 7px;
+            margin-left: 5px;
+            background-repeat: no-repeat;
+        }
+        .jd {
+            background-repeat: no-repeat;
+            margin-left: 5px;
+            width: 30px;
+            height: 30px;
+            background-image: url(./京东素材/京东.png);
+            background-size: 30px 30px;
+        }
+        .plh {
+            width: 160px;
+            height: 35px;
+            font-size: 12px;
+            padding-left: 15px;
+            padding-top: 7px;
+            color: white;
+        }
+        .right1 {
+            width: 80px;
+            height: 35px;
+            background-color: red;
+        }
+        .ljdk {
+            padding-left: 10px;
+            font-size: 14px;
+            color: white;
+            padding-top: 25px;
+        }
+        .kong {
+            width: 310px;
+            height: 35px;
+        }
+        .header {
+            width: 310px;
+            height: 35px;
+            display: flex;
+            background-color: red;
+            position: sticky;
+            z-index: 10;
+            top: 0;
+        }
+
+        .left2 {
+            width: 260px;
+            height: 35px;
+            display: flex;
+        }
+        .san {
+            width: 17px;
+            height: 15px;
+            background-image: url(./京东素材/san.png);
+            background-size: 17px 15px;
+            background-repeat: no-repeat;
+            margin-top: 7px;
+            margin-left: 5px;
+        }
+        .ssk {
+            width: 210px;
+            height: 25px;
+            border-radius: 10px;
+            margin-left: 10px;
+            margin-top: 4px;
+            background-color: white;
+            display: flex;
+        }
+        .logoJD {
+            width: 24px;
+            height: 16px;
+            background-image: url(./京东素材/JD.png);
+            background-repeat: no-repeat;
+            background-size: 19px 16px;
+            padding-left: 5px;
+            padding-top: 11px;
+            background-position: 4px 3px;
+
+        }
+        .logoss {
+            width: 25px;
+            height: 20px;
+            background-repeat: no-repeat;
+            background-size: 295px 243px;
+            background-position: -123px 2px;
+            background-image: url(./京东素材/图标.png);
+        }
+        .plh2 {
+            padding-left: 15px;
+        }
+        .right2 {
+            width: 70px;
+            height: 35px;
+        }
+        .newyear {
+            width: 310px;
+            height: 120px;
+            background-color: red;
+        }
+        .np {
+            width: 310px;
+            height: 120px;
+            background-image: url(./京东素材/newyear.png);
+            background-size: 310px 120px;
+        }
+        .iphone {
+            width: 310px;
+            height: 105px;
+            display: flex;
+        }
+        .one,.three {
+            width: 95px;
+            height: 105px;
+        }
+        .two {
+            width: 127px;
+            height: 105px;
+        }
+        .one {
+            background-image: url(./京东素材/one.png);
+            background-size: 95px 105px;
+        }
+        .two {
+            background-image: url(./京东素材/two.png);
+            background-size: 127px 105px;
+        }
+        .three {
+            background-image: url(./京东素材/three.png);
+            background-size: 95px 105px;
+        }
+        .first {
+            width: 310px;
+            height: 60px;
+            display: flex;
+        }
+        .second {
+            width: 310px;
+            height: 60px;
+            display: flex;
+        }
+        .first, .second {
+            justify-content: space-around;
+            align-items: center;
+        }
+         .tb1, .tb2,.tb3,.tb4, .tb5,.tb6,.tb7,.tb8,.tb9,.tb10 {
+            width: 40px;
+            height: 40px;
+            background-size: 40px 40px;
+        }
+        .tb1 {
+            background-image: url(./京东素材/1.png);
+        }
+        .tb2 {
+            background-image: url(./京东素材/2.png);
+        }
+        .tb3 {
+            background-image: url(./京东素材/3.png);
+        }
+        .tb4 {
+            background-image: url(./京东素材/4.png);
+        }
+        .tb5 {
+            background-image: url(./京东素材/5.png);
+        }
+        .tb6 {
+            background-image: url(./京东素材/6.png);
+        }
+        .tb7 {
+            background-image: url(./京东素材/7.png);
+        }
+        .tb8 {
+            background-image: url(./京东素材/8.png);
+        }
+        .tb9 {
+            background-image: url(./京东素材/88.png);
+        }
+        .tb10 {
+            background-image: url(./京东素材/10.png);
+        }
+        .jdcs {
+            width: 50px;
+            height: 30px;
+        }
+        .tp {
+            width: 310px;
+            height: 130px;
+            font-size: 12px;
+            color: gray;
+        }
+        .tp1, .tp2,.tp3,.tp4,.tp5,.tp6,.tp7,.tp8,.tp9,.tp10 {
+            width: 50px;
+            height: 50px;
+            background-size: 50px 50px;
+        }
+        .p1,.p2,.p3, .p4,.p5,.p6 {
+            width: 50px;
+            height: 50px;
+            background-size: 50px 50px;
+        }
+        .p1 {
+            background-image: url(./京东素材/图片1.jpg);
+        }
+        .p2 {
+            background-image: url(./京东素材/图片2.jpg);
+        }
+        .p3 {
+            background-image: url(./京东素材/图片3.jpg);
+        }
+        .p4 {
+            background-image: url(./京东素材/图片4.jpg);
+        }
+        .p5 {
+            background-image: url(./京东素材/图片5.jpg);
+        }
+        .p6 {
+            background-image: url(./京东素材/图片6.jpg);
+        }
+        .money {
+            display: flex;
+            font-size: 14px;
+            color: red;
+            padding-top: 5px;
+            padding-left: 5px;
+        }
+        .ms {
+            width: 310px;
+            height: 20px;
+            font-size: 14px;
+        }
+        .sp {
+            width: 310px;
+            height: 80px;
+            display: flex;
+        }
+        .goods {
+            width: 310px;
+            height: 140px;
+            display: flex;
+        }
+        .g1,.g2 {
+            width: 155px;
+            height: 140px;
+            background-size: 155px 140px;
+        }
+        .g1 {
+            background-image: url(./京东素材/大米.webp);
+        }
+        .g2 {
+            background-image: url(./京东素材/大米2.webp);
+        }
+        .bottom {
+            width: 310px;
+            height: 50px;
+            display: flex;
+            position: sticky;
+            bottom: 0px;
+            left: auto;
+            justify-content: space-around;
+            background-color: #fff;
+        }
+        .b1,.b2,.b3,.b4,.b5 {
+            width: 50px;
+            height: 50px;
+            padding-top: 6px;
+        }
+```
\ No newline at end of file
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/\344\272\254\344\270\234\351\241\265\351\235\242.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/\344\272\254\344\270\234\351\241\265\351\235\242.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..31581fd4eac42b3ac624cb49980c35ce4bef0866
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/\344\272\254\344\270\234\351\241\265\351\235\242.gif" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/\344\273\212\346\227\245\345\244\264\346\235\241.png" "b/\351\230\231\346\263\263\347\217\215/rendering/\344\273\212\346\227\245\345\244\264\346\235\241.png"
new file mode 100644
index 0000000000000000000000000000000000000000..af1983361793acfa62ca89ced00e14ea6d0e2111
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/\344\273\212\346\227\245\345\244\264\346\235\241.png" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/\345\234\243\346\235\257\351\241\265\351\235\242.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/\345\234\243\346\235\257\351\241\265\351\235\242.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..7d97e93bfb036164ebf04e1b24c496dcfd07e3f1
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/\345\234\243\346\235\257\351\241\265\351\235\242.gif" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/\345\237\272\346\234\254\345\270\203\345\261\200.png" "b/\351\230\231\346\263\263\347\217\215/rendering/\345\237\272\346\234\254\345\270\203\345\261\200.png"
new file mode 100644
index 0000000000000000000000000000000000000000..53d5545935bc0337700e78112d4bed31d27f584c
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/\345\237\272\346\234\254\345\270\203\345\261\200.png" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/\346\220\272\347\250\213\351\241\265\351\235\242.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/\346\220\272\347\250\213\351\241\265\351\235\242.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..85d1971891ed73a5775c5f7e0ac3efc6d347a02e
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/\346\220\272\347\250\213\351\241\265\351\235\242.gif" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/\351\205\267\347\213\227\351\237\263\344\271\220\345\221\200.gif" "b/\351\230\231\346\263\263\347\217\215/rendering/\351\205\267\347\213\227\351\237\263\344\271\220\345\221\200.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..46e8b2229a9771b0a576fb3815189aab95977ebe
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/\351\205\267\347\213\227\351\237\263\344\271\220\345\221\200.gif" differ
diff --git "a/\351\230\231\346\263\263\347\217\215/rendering/\351\252\260\345\255\220.png" "b/\351\230\231\346\263\263\347\217\215/rendering/\351\252\260\345\255\220.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e4d35830d617674aba8a33584b62e582fc4732f1
Binary files /dev/null and "b/\351\230\231\346\263\263\347\217\215/rendering/\351\252\260\345\255\220.png" differ