diff --git "a/\351\231\210\346\200\235\347\235\277/20241104-(flex\345\274\271\346\200\247\347\233\222\345\255\220).md" "b/\351\231\210\346\200\235\347\235\277/20241104-(flex\345\274\271\346\200\247\347\233\222\345\255\220).md"
new file mode 100644
index 0000000000000000000000000000000000000000..3e7339353e1358b7887d421fccffb2182dbc3eec
--- /dev/null
+++ "b/\351\231\210\346\200\235\347\235\277/20241104-(flex\345\274\271\346\200\247\347\233\222\345\255\220).md"
@@ -0,0 +1,1076 @@
+### 课堂笔记
+## 弹性盒子
+
+弹性盒子由弹性容器和弹性子元素组成。
+
+弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
+
+弹性容器内包含了一个或多个弹性子元素。
+
+ * 注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。
+
+弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。
+
+### flex-direction
+flex-direction 属性指定了弹性子元素在父容器中的位置。
+
+语法：
+
+① row：横向从左到右排列（左对齐），默认的排列方式。
+
+② row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
+
+③ column：纵向排列。
+
+④ column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
+以下实例演示了 row-reverse 的使用:
+
+
+
+### justify-content 属性
+内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的【*主轴线*（main axis）】对齐。
+
+justify-content 语法如下：
+
+① flex-start：
+弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
+
+② flex-end：
+弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
+
+③ center：
+弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
+
+④ space-between：
+弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
+
+⑤ space-around：
+弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
+
+### align-items 属性
+align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
+
+语法
+
+① flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
+
+② flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
+
+③ center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
+
+④ baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
+
+⑤ stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。
+
+### flex-wrap 属性
+flex-wrap 属性用于指定弹性盒子的子元素换行方式。
+
+语法
+
+① nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
+
+② wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
+
+③ wrap-reverse -反转 wrap 排列
+
+### 课后作业
+作业一效果图：
+
+![酷狗播放器](./pt/酷狗.gif)
+
+代码：
+```html
+ <style>
+        [class^="d"] {
+            display: flex;
+            justify-content: space-around;
+        }
+
+        [class^="i"] {
+            width: 150px;
+            height: 200px;
+            position: relative;
+            margin-right: 20px;
+        }
+
+        img {
+            border-radius: 9px;
+        }
+
+        .playAll {
+            height: 24px;
+            position: absolute;
+            top: 120px;
+            left: 13px;
+            color: white;
+            line-height: 20px;
+            font-size: 15px;
+        }
+
+        .playAll img {
+            width: 14px;
+            height: 20px;
+            vertical-align: bottom;
+            margin-right: 5px;
+        }
+    </style>
+```
+
+作业二效果图：
+
+![今日头条热门视频列表](./pt/头条.png)
+
+代码：
+```html
+<style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        body{
+            width: 750px;
+            height: 1110px;
+        }
+        .header{
+            height: 120px;
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .icon01{
+            width: 28px;
+            height: 28px;
+        }
+        .icon02{
+            width: 22px;
+            height: 22px;
+
+        }
+        .left{
+            font-size: 30px;
+        }
+        .right{
+            font-size: 22px;
+            color: rgb(255,2,2);
+            margin-right: 230px;
+        }
+        .content{
+            height: 985px;
+            width: 100%;
+        }
+        .video{
+            width: 655px;
+            height: 190px;
+            margin-bottom: 40px ;
+            display: flex;
+        }
+        .pic img{
+            width: 230px;
+            height: 170px;
+            margin-right: 20px;
+        }
+        .txt{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .txt.a1{
+            width: 90px;
+            height: 40px;
+            color: #F14648;
+            background-color: #FFF3F2;
+            border-radius: 8px;
+            text-align: center;
+            line-height: 30px;
+            text-decoration: none;
+        }
+        .txt span{
+            color: gray;
+        }
+        .txt span a{
+            margin-left: 50px;
+        }
+    </style>
+```
+
+作业三效果图：
+
+![经典圣杯布局](./pt/圣杯.gif)
+
+代码：
+```html
+<style>
+    * {
+      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;
+      }
+
+    }
+  </style>
+```
+
+
+作业四效果图：
+
+![布局](./pt/基础布局.png)
+
+代码：
+```html
+<style>
+        * {
+            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;
+        }
+
+        .up {
+            width: 760px;
+            height: 120px;
+            background-color: #90c08d;
+            margin: 0px auto;
+            display: flex;
+            align-items: center;
+            border: 1px solid;
+        }
+
+        .down {
+            width: 760px;
+            height: 420px;
+            background-color: #90c08d;
+            margin: 0px auto;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            border: 1px solid;
+        }
+
+        [class^='dd'] {
+            width: 80px;
+            height: 80px;
+            background-color: #ccd2f7;
+            margin: 20px;
+            border: 1px solid;
+        }
+
+        .dd5 {
+            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^='ll'] {
+            width: 50px;
+            height: 50px;
+            background-color: #ccd2f7;
+            border: 1px solid;
+        }
+
+        .three {
+            width: 200px;
+            height: 50px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
+        .right {
+            width: 480px;
+            height: 370px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+
+        [class^='rr'] {
+            width: 480px;
+            height: 40px;
+            background-color: #ccd2f7;
+            border: 1px solid;
+        }
+    </style>
+```
+
+作业五效果图：
+
+![携程手机端首页](./pt/携程.png)
+
+代码：
+```html
+  <style>
+    * {
+      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(./pt/xiecheng-localnav_bg.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;
+    }
+  </style>
+```
+
+作业六效果图：
+
+![京东首页](./pt/京东.gif)
+
+代码：
+```html
+<style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        .box {
+            width: 390px;
+            height: 1044px;
+        }
+
+        .openJD {
+            width: 390px;
+            height: 50px;
+            display: flex;
+            justify-content: space-between;
+            background-color: #333433;
+        }
+
+        .left {
+            width: 80px;
+            height: 50px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .logo1 {
+            width: 15px;
+            height: 15px;
+            background: url(./pt/dh5-close.png) no-repeat;
+            background-size: contain;
+            /* 保持宽高比，完全包含，可能留白 */
+
+        }
+
+        .logo2 {
+            width: 35px;
+            height: 35px;
+            background: url(./pt/dh5-logo.png) no-repeat;
+            background-size: contain;
+            /* 保持宽高比，完全包含，可能留白 */
+
+        }
+
+        .middle {
+            width: 190px;
+            height: 50px;
+            color: white;
+            font-style: 15px;
+            align-content: center;
+        }
+
+        .right {
+            width: 85px;
+            height: 50px;
+            background-color: #f43515;
+            color: white;
+            line-height: 50px;
+            text-align: center;
+        }
+
+        .search {
+            width: 390px;
+            height: 40px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            background-color: #c30a0b;
+            position: sticky;
+            /* 元素会在页面滚动时保持在视口的顶部，直到它的边界离开视口或父容器的边界。 */
+            z-index: 10;
+            /* 定义了一个元素的堆叠层级，值越大，元素越靠上显示。*/
+            top: 0px;
+        }
+
+        .sLeft {
+            width: 25px;
+            height: 22px;
+            background: url(./pt/dh5-list.png) no-repeat;
+            background-size: contain;
+        }
+
+        .sMiddle {
+            width: 283px;
+            height: 28px;
+            background-color: #fff;
+            border-radius: 15px;
+            display: flex;
+            align-items: center;
+        }
+
+        .jd {
+            width: 22px;
+            height: 17px;
+            background: url(./pt/dh5-jd-sprites.png) no-repeat;
+            background-position: 4px 0;
+            background-size: 180px 180px;
+            border-right: 1px solid grey;
+
+        }
+
+        .find {
+            width: 28px;
+            height: 20px;
+            background: url(./pt/dh5-jd-sprites.png) no-repeat;
+            background-size: 176px 180px;
+            background-position: -68px 3px;
+        }
+
+        .txt {
+            width: 80px;
+            height: 20px;
+            font-size: 12px;
+            line-height: 20px;
+            color: grey;
+        }
+
+        .sRight {
+            width: 30px;
+            height: 40px;
+            color: white;
+            font-size: 14px;
+            line-height: 40px;
+            text-align: center;
+        }
+
+        .adv1 {
+            width: 390px;
+            height: 155px;
+     
+            background-color: #c30a0b;
+            position: relative;
+        }
+
+        .adv1 div {
+            width: 390px;
+            height: 155px;
+            position: absolute;
+            background: url(./pt/jdh5-banner.png) no-repeat;
+            background-size: 390px 155px;
+        }
+
+        .adv2 {
+            width: 390px;
+            height: 140px;
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+        }
+
+        .pt1 {
+            width: 110px;
+            height: 140px;
+            background: url(./pt/dh5-nianhuo1.png) no-repeat;
+            
+            background-size:110px 140px;
+            
+        }
+
+        .pt2 {
+            width: 170px;
+            height: 140px;
+            background: url(./pt/dh5-nianhuo2.png) no-repeat;
+            background-size: 100% 100%;
+            background-size:170px 140px;
+
+        }
+
+        .pt3 {
+            width: 110px;
+            height: 140px;
+            background: url(./pt/jdh5-nianhuo3.png) no-repeat;
+            background-size:110px 140px;
+        }
+
+        .menu {
+            width: 390px;
+            height: 130px;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .menu div {
+            width: 66px;
+            height: 60px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            align-items: center;
+            color: grey;
+            font-size: 12px;
+        }
+
+        .menu [class^='s'] {
+            width: 40px;
+            height: 40px;
+            background-size: contain;
+        }
+
+        
+        .s1 {
+            background: url(./pt/dh5-nav1.png) no-repeat;
+        }
+        .s2 {
+            background: url(./pt/dh5-nav2.png) no-repeat;
+        }
+        .s3 {
+            background: url(./pt/dh5-nav3.png) no-repeat;
+        }
+        .s4 {
+            background: url(./pt/dh5-nav4.png) no-repeat;
+        }
+        .s5 {
+            background: url(./pt/dh5-nav5.png) no-repeat;
+        }
+        .s6 {
+            background: url(./pt/dh5-nav6.png) no-repeat;
+        }
+        .s7 {
+            background: url(./pt/dh5-nav7.png) no-repeat;
+        }
+        .s8 {
+            background: url(./pt/dh5-nav8.png) no-repeat;
+        }
+        .s9 {
+            background: url(./pt/dh5-nav9.png) no-repeat;
+        }
+        .s10 {
+            background: url(./pt/dh5-nav10.png) no-repeat;
+        }
+
+        .seckill {
+            width: 390px;
+            height: 115px;
+            display: flex;
+            justify-content: space-around;
+            flex-direction: column;
+        }
+
+        .topic {
+            width: 390px;
+            height: 23px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .tLeft {
+            width: 205px;
+            height: 23px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .t1,
+        .t3 {
+            font-weight: 900;
+        }
+
+        .t2 {
+            width: 45px;
+            height: 23px;
+            font-weight: 600;
+            background: url(./pt/dh5-ms-dc.png) no-repeat;
+            background-size: 28px 23px;
+            background-position: right;
+
+        }
+
+        .tRight {
+            width: 20px;
+            height: 23px;
+            background-size: 20px 20px;
+            background: url(./pt/dh5-ms-right.png) no-repeat;
+        }
+
+        .image {
+            width: 390px;
+            height: 60px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .image div {
+            width: 60px;
+            height: 60px;
+        }
+
+        .image div:first-child {
+            background: url(./pt/jdh5-ms1.jpg) no-repeat;
+            background-size: 60px 60px;
+        }
+
+        .image div:nth-child(2) {
+            background: url(./pt/jdh5-ms2.jpg) no-repeat;
+            background-size: 60px 60px;
+        }
+
+        .image div:nth-child(3) {
+            background: url(./pt/jdh5-ms3.jpg) no-repeat;
+            background-size: contain;
+        }
+
+        .image div:nth-child(4) {
+            background: url(./pt/jdh5-ms4.jpg) no-repeat;
+            background-size: contain;
+        }
+
+        .image div:nth-child(5) {
+            background: url(./pt/jdh5-ms5.jpg) no-repeat;
+            background-size: contain;
+        }
+
+        .image div:nth-child(6) {
+            background: url(./pt/jdh5-ms6.jpg) no-repeat;
+            background-size: contain;
+        }
+
+        .price {
+            width: 390px;
+            height: 20px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            color: #c30a0b;
+            font-size: 14px;
+            font-weight: 550;
+            text-align: center;
+            line-height: 20px;
+        }
+
+        .price div {
+            width: 60px;
+            height: 20px;
+        }
+
+        .goods {
+            width: 390px;
+            height: 150px;
+            display: flex;
+            justify-content: space-evenly;
+            /*弹性容器中的子元素在主轴上均匀分布，并且在首尾两端也保持相同的间距。*/
+            align-items: center;
+        }
+
+        .g1 {
+            width: 170px;
+            height: 150px;
+            background: url(./pt/jdh5-product1.webp) no-repeat;
+            background-size: contain;
+        }
+
+        .g2 {
+            width: 170px;
+            height: 150px;
+            background: url(./pt/jdh5-product2.webp) no-repeat;
+            background-size: contain;
+        }
+
+        .nav {
+            width: 390px;
+            height: 70px;
+            background-color: #fff;
+            position: sticky;
+            z-index: 10;
+            bottom: 0px;
+        }
+
+        .nav ul {
+            width: 390px;
+            height: 40px;
+            list-style-type: none;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        .nav ul li {
+            width: 65px;
+            height: 40px;
+            color: #545353;
+            line-height: 40px;
+            text-align: center;
+        }
+    </style>
+```
\ No newline at end of file
diff --git "a/\351\231\210\346\200\235\347\235\277/pt/\344\272\254\344\270\234.gif" "b/\351\231\210\346\200\235\347\235\277/pt/\344\272\254\344\270\234.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..3f9912c5ee74f3f743a88d212a4f829b9c698f47
Binary files /dev/null and "b/\351\231\210\346\200\235\347\235\277/pt/\344\272\254\344\270\234.gif" differ
diff --git "a/\351\231\210\346\200\235\347\235\277/pt/\345\234\243\346\235\257.gif" "b/\351\231\210\346\200\235\347\235\277/pt/\345\234\243\346\235\257.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..f7a012f5bd935dd60a5377f0f3f4e0957d865f75
Binary files /dev/null and "b/\351\231\210\346\200\235\347\235\277/pt/\345\234\243\346\235\257.gif" differ
diff --git "a/\351\231\210\346\200\235\347\235\277/pt/\345\237\272\347\241\200\345\270\203\345\261\200.png" "b/\351\231\210\346\200\235\347\235\277/pt/\345\237\272\347\241\200\345\270\203\345\261\200.png"
new file mode 100644
index 0000000000000000000000000000000000000000..d0151a8fdbbdb237c66f75b30ab3b371fb452407
Binary files /dev/null and "b/\351\231\210\346\200\235\347\235\277/pt/\345\237\272\347\241\200\345\270\203\345\261\200.png" differ
diff --git "a/\351\231\210\346\200\235\347\235\277/pt/\345\244\264\346\235\241.png" "b/\351\231\210\346\200\235\347\235\277/pt/\345\244\264\346\235\241.png"
new file mode 100644
index 0000000000000000000000000000000000000000..fbc1d88d6639446b86d811050d56da4b1d7d3967
Binary files /dev/null and "b/\351\231\210\346\200\235\347\235\277/pt/\345\244\264\346\235\241.png" differ
diff --git "a/\351\231\210\346\200\235\347\235\277/pt/\346\220\272\347\250\213.png" "b/\351\231\210\346\200\235\347\235\277/pt/\346\220\272\347\250\213.png"
new file mode 100644
index 0000000000000000000000000000000000000000..f226a6a10076237baa1a84af779cbbfe7af76126
Binary files /dev/null and "b/\351\231\210\346\200\235\347\235\277/pt/\346\220\272\347\250\213.png" differ
diff --git "a/\351\231\210\346\200\235\347\235\277/pt/\351\205\267\347\213\227.gif" "b/\351\231\210\346\200\235\347\235\277/pt/\351\205\267\347\213\227.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..ab274abe20712c87d7e1e3984a284ca42a765e4a
Binary files /dev/null and "b/\351\231\210\346\200\235\347\235\277/pt/\351\205\267\347\213\227.gif" differ