diff --git "a/\345\274\240\344\277\212\346\235\260/00/flex-01.jpg" "b/\345\274\240\344\277\212\346\235\260/00/flex-01.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..6fd6241aa7035df30db88d15987e8d0713d4b616
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/flex-01.jpg" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/00/flex-02.jpg" "b/\345\274\240\344\277\212\346\235\260/00/flex-02.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..20aad004aef3db4620e968c68e6ec46cf8561e2c
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/flex-02.jpg" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/00/flex-03.jpg" "b/\345\274\240\344\277\212\346\235\260/00/flex-03.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..1dedde074d0a4dd594e0202935f767e115fed977
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/flex-03.jpg" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/00/flex-04.jpg" "b/\345\274\240\344\277\212\346\235\260/00/flex-04.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..e0f855a6d755756b600197e011c379b331750c59
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/flex-04.jpg" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/00/flex-05.jpg" "b/\345\274\240\344\277\212\346\235\260/00/flex-05.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..0f61aeb8d5d4fd8c633a03adcf79e644c9462361
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/flex-05.jpg" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/00/flex-06.jpg" "b/\345\274\240\344\277\212\346\235\260/00/flex-06.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..2360b947f7eb61cf485d887da190e231085eaf89
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/flex-06.jpg" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/00/flex-07.jpg" "b/\345\274\240\344\277\212\346\235\260/00/flex-07.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..b478cba7e53eda154668f6bd440c23e1ba147a28
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/flex-07.jpg" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/00/flex-08.jpg" "b/\345\274\240\344\277\212\346\235\260/00/flex-08.jpg"
new file mode 100644
index 0000000000000000000000000000000000000000..3e9cfb4b00c6616b836bb1c48d4910c2e547910c
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/flex-08.jpg" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/00/icon-play.png" "b/\345\274\240\344\277\212\346\235\260/00/icon-play.png"
new file mode 100644
index 0000000000000000000000000000000000000000..90397f22a7692bd8d87b1c55c11acccee885aced
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/icon-play.png" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/00/icon-sx2.png" "b/\345\274\240\344\277\212\346\235\260/00/icon-sx2.png"
new file mode 100644
index 0000000000000000000000000000000000000000..42f24045e7f7595c562edd4e876ae23144285bbd
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/icon-sx2.png" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/00/toutiao-02.jpeg" "b/\345\274\240\344\277\212\346\235\260/00/toutiao-02.jpeg"
new file mode 100644
index 0000000000000000000000000000000000000000..a50ce45c112cc151284427f4de0fd771073aba4f
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/00/toutiao-02.jpeg" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/20241029-flex\346\224\276\345\244\247\345\270\203\345\261\200.md" "b/\345\274\240\344\277\212\346\235\260/20241029-flex\346\224\276\345\244\247\345\270\203\345\261\200.md"
new file mode 100644
index 0000000000000000000000000000000000000000..0aa0bfb67b171379207ebc6d0c5cbc4307d29e8c
--- /dev/null
+++ "b/\345\274\240\344\277\212\346\235\260/20241029-flex\346\224\276\345\244\247\345\270\203\345\261\200.md"
@@ -0,0 +1,1099 @@
+# flex 放大布局 自适应
+
+## 笔记
+
+## 练习
+
+### 第一题效果图：
+![](./imgssss/1029.1.gif)
+
+### 第一题代码
+```html
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <style>
+
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .c1,.c2{
+
+        
+            display: flex;
+            width: auto;
+            
+            
+        }
+
+        [class^=d]{
+            width: 150px;
+            height: 150px;
+            
+
+            margin-top: 150px;
+            margin-left: 180px;
+            flex: 1;
+           
+          
+
+            
+        }
+
+
+    </style>
+</head>
+<body>
+    <div class="c1">
+
+
+<div class="d1"><img src="./00/flex-01.jpg" alt=""><span>催眠：Delta脑波音乐减压深度睡眠</span></div>
+
+<div class="d2"><img src="./00/flex-02.jpg" alt=""><span>催眠：Delta脑波音乐减压深度睡眠</span></div>
+<div class="d3"><img src="./00/flex-03.jpg" alt=""><span>催眠：Delta脑波音乐减压深度睡眠</span></div>
+<div class="d4"><img src="./00/flex-04.jpg" alt=""><span>催眠：Delta脑波音乐减压深度睡眠</span></div>
+
+    </div>
+
+    <div class="c2">
+
+        <div class="d5"><img src="./00/flex-05.jpg" alt=""><span>催眠：Delta脑波音乐减压深度睡眠</span></div>
+        <div class="d6"><img src="./00/flex-06.jpg" alt=""><span>催眠：Delta脑波音乐减压深度睡眠</span></div>
+        <div class="d7"><img src="./00/flex-07.jpg" alt=""><span>催眠：Delta脑波音乐减压深度睡眠</span></div>
+        <div class="d8"><img src="./00/flex-08.jpg" alt=""><span>催眠：Delta脑波音乐减压深度睡眠</span></div>
+
+    </div>
+</body>
+</html>
+
+```
+
+### 第二题效果图：
+![](./imgssss/29.2.gif)
+
+### 第二题代码
+```html
+
+
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+
+        .box{
+            width: 750px;
+            box-sizing: border-box;
+        }
+
+        .top{
+            position: relative;
+            width: 75%;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            height: 65px;
+            margin-bottom: 15px;
+        }
+
+        .top img:nth-child(1){
+            position: absolute;
+            width: 40px;
+            left: 0px;
+        }
+
+        .top span:nth-child(2){
+            position: absolute;
+            left: 60px;
+            font-size: 40px;
+            font-weight: 400;
+        }
+
+        .top img:nth-child(3){
+            position: absolute;
+            right: 80px;
+            width: 24px;
+        }
+
+        .top span:nth-child(4){
+            position: absolute;
+            right: 0px;
+            color: #FF0000;
+            font-size: 24px;
+        }
+
+        .bottom{
+            width: 75%;
+            margin: 0 auto;
+            list-style: none;
+        }
+
+        .bottom li{
+            margin-bottom: 15px;
+        }
+
+        .bottom li::after{
+            content: "";
+            clear: both;
+            display: block;
+        }
+
+        .bottom li div:nth-child(1){
+            width: 215px;
+            height: 160px;
+            background: url(https://oss.9ihub.com/test/toutiao-02.jpeg) center / cover no-repeat;
+            float: left;
+        }
+
+        .bottom li div:nth-child(2){
+            width: 315px;
+            height: 160px;
+            float: right;
+            position: relative;
+        }
+
+        .bottom li div:nth-child(2) span:nth-child(1){
+            font-size: 30px;
+        }
+
+        .bottom li div:nth-child(2) span:nth-child(2){
+            background-color: #ffeded;
+            color: red;
+            padding: 5px;
+            border-radius: 10px;
+            position: absolute;
+            left: 0px;
+            top: 85px;
+        }
+
+        .bottom li div:nth-child(2) span:nth-child(3){
+            font-size: 20px;
+            color: darkgrey;
+            position: absolute;
+            left: 0px;
+            bottom: 0px;
+        }
+
+        .bottom li div:nth-child(2) span:nth-child(4){
+            font-size: 20px;
+            color: darkgrey;
+            position: absolute;
+            right: 0px;
+            bottom: 0px;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="top">
+            <img src="https://oss.9ihub.com/test/icon-play.png" alt="">
+            <span>热门视频</span>
+            <img src="https://oss.9ihub.com/test/icon-sx2.png" alt="">
+            <span>换一换</span>
+        </div>
+        <ul class="bottom">
+        </ul>
+    </div>
+    <script>
+        const bottom = document.querySelector('.bottom')
+        for (let i = 0; i < 4; i++) {
+            const li = document.createElement('li')
+            li.innerHTML = `
+                <div></div>
+                <div>
+                    <span>无论什么鱼：最忌放盐和料酒研制</span>
+                    <span>1万评论</span>
+                    <span>148万次观看</span>
+                    <span>石马南频道</span>
+                </div>
+            `
+            bottom.appendChild(li)
+        }
+
+    </script>
+</body>
+</html>
+
+```
+
+### 第三题代码
+```html
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        *{
+            margin: 0;
+            padding: 0;
+            text-align: center;
+        }
+
+        html,body{
+            height: 100%;
+        }
+
+        body{
+            display: flex;
+            flex-direction: column;
+
+        }
+
+        .top,.bottom{
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+        }
+
+        .top{
+            background-color: bisque;
+        }
+
+        .center{
+            width: 100%;
+            display: flex;
+            align-items: stretch;
+            flex: 1;
+        }
+
+        .center div{
+            flex-shrink: 0;
+            flex-basis: 200px;
+        }
+
+        .center div:nth-child(1){
+            background-color: green;
+        }
+
+        .center div:nth-child(2){
+            flex: 1 1 200px;
+        }
+
+        .center div:nth-child(3){
+            background-color: purple;
+        }
+
+        .bottom{
+            background-color: black;
+            color: white;
+        }
+
+        @media screen and (max-width:600px) {
+            .center{
+                flex-direction: column;
+            }
+            .center div:nth-child(1){
+                transform: translateY(287.2px);
+            }
+            .center div:nth-child(2){
+                transform: translateY(-200px);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="top">一天到晚游泳的鱼</div>
+    <div class="center">
+        <div>左侧</div>
+        <div>中间</div>
+        <div>右侧</div>
+    </div>
+    <div class="bottom">向天再借500年</div>
+</body>
+</html>
+
+```
+### 第四题代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        @media screen and (max-width:400px) {
+            *{
+                margin: 0;
+                padding: 0;
+            }
+            /* 搜索栏 */
+            .search{
+                width: 100%;
+                height: 45px;
+                background-color: rgb(244, 244, 244);
+                position: fixed;
+                top: 0px;
+                display: flex;
+                align-items: center;
+                border-bottom: 1px solid rgb(206, 206, 206);
+            }
+
+            .search img:nth-child(1){
+                width: 16px;
+                position: absolute;
+                top: 13px;
+                left: 18px;
+            }
+
+            .search input{
+                width: 330px;
+                height: 30px;
+                box-sizing: border-box;
+                border:1px solid rgb(206, 206, 206);
+                text-indent: 30px;
+                margin-left: 10px;
+                border-radius: 5px;
+                box-shadow: 1px 1px 1px rgb(219, 219, 219);
+            }
+
+            .search img:nth-child(3){
+                width: 25px;
+                height: 25px;
+                position: absolute;
+                top: 3px;
+                right: 8px;
+            }
+
+            .search span{
+                font-size: 14px;
+                position: absolute;
+                color: rgb(137, 190, 223);
+                bottom: 0px;
+                right: 6px;
+            }
+            /* 图片 */
+            .img-big{
+                width: 100%;
+                height: 80px;
+                background: url(https://oss.9ihub.com/test/xiecheng-focus.jpg) center / contain no-repeat;
+                margin-top: 45px;
+            }
+            /* 内容区域 */
+            .content{
+                background-color: rgb(244, 244, 244);
+            }
+
+            .content::before{
+                content: "";
+                display: table;
+            }
+
+            /* 内容区域-景点 */
+            .scenicSpot{
+                width: 98%;
+                height: 65px;
+                margin: 7px auto 2px;
+                border-radius: 5px;
+                background-color: rgb(255, 255, 255);
+                display: flex;
+                align-items: center;
+                justify-content: space-evenly
+            }
+
+            .scenicSpot>div{
+                width: 55px;
+                height: 55px;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                font-size: 12px;
+            }
+
+            .scenicSpot .img-small{
+                width: 36px;
+                height: 36px;
+                background: url(https://oss.9ihub.com/test/xiecheng-localnav_bg.png);
+                background-size: cover;
+            }
+            /* 内容区域-酒店 */
+            .hotel{
+                width: 98%;
+                margin: 2px auto;                
+                color: white;
+                text-align: center;
+                line-height: 43px;
+            }
+
+            .hotel::after{
+                content: "";
+                clear: both;
+                display: block;
+            }
+
+            .hotel>div::after{
+                content: "";
+                clear: both;
+                display: block;
+            }
+
+            .hotel .big-box{
+                width: 33%;
+                height: 88px;
+                background-image: linear-gradient(to right,rgb(250, 91, 86) 0%,rgb(250, 108, 84) 100%);
+                box-sizing: border-box;
+                float: left;
+                position: relative;
+            }
+
+            .hotel .small-box{
+                width: 33%;
+                height: 43px;
+                float: left;
+                box-sizing: border-box;
+                margin-bottom: 2px;
+                margin-left: 1px;
+                font-size: 16px;
+            }
+
+            .hotel .big-box img{
+                width: 100%;
+                position: absolute;
+                bottom: 0px;
+                left: 0px;
+            }
+
+            .border-top-left-radius{
+                border-top-left-radius: 10px;
+            }
+
+            .border-top-right-radius{
+                border-top-right-radius: 10px;
+            }
+
+            .border-bottom-left-radius{
+                border-bottom-left-radius: 10px;
+            }
+
+            .border-bottom-right-radius{
+                border-bottom-right-radius: 10px;
+            }
+
+            /* 内容区域-话费 */
+            .mesh{
+                width: 98%;
+                margin: 2px auto;
+                background-color: rgb(255, 255, 255);
+                border-radius: 5px;
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .mesh::before{
+                content: "";
+                display: table;
+            }
+
+            .mesh>div{
+                width: 20%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                margin-top: 9px;
+                font-size: 14px;
+            }
+
+            .mesh .mesh-img{
+                width: 40px;
+                height: 40px;
+                background: url(https://oss.9ihub.com/test/xiecheng-subnav-bg.png) top center / cover no-repeat;
+            }
+            /* 内容区域-活动头部 */
+            .activity-top{
+                width: 98%;
+                height: 60px;
+                border-top:1px solid rgb(197, 197, 195) ;
+                margin: 5px auto;
+                background-color: rgb(255, 255, 255);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+            }
+
+            .activity-top div:nth-child(1){
+                width: 75px;
+                height: 20px;
+                margin-left: 5px;
+                background: url(https://oss.9ihub.com/test/xiecheng-hot.png) center / cover no-repeat;
+            }
+
+            .activity-top div:nth-child(2){
+                width: 130px;
+                height: 30px;
+                border-radius: 20px;
+                font-size: 16px;
+                color: white;
+                text-align: center;
+                line-height: 30px;
+                margin-right: 5px;
+                background-image: linear-gradient(to right,rgb(248, 86, 116),rgb(249, 105, 181));
+            }
+
+            /* 内容区域-活动 */
+            .activit{
+                width: 98%;
+                margin: 5px auto;
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .activit>div{
+                width: 49%;
+                margin-bottom:7px;
+                background-size: cover;
+                background-position: center;
+                background-repeat: no-repeat;
+            }
+
+            .activit>div:nth-child(2n-1){
+                margin-right:7px;
+            }
+
+            .activit .activit-big-box{
+                height: 140px;
+            }
+
+            .activit .activit-small-box{
+                height: 70px;
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="search">
+        <img src="../xiecheng-sprite.png" alt="">
+        <input type="text" placeholder="搜索:目的地/酒店/景点/航班号">
+        <img src="../xiecheng-sprit1e.png" alt="">
+        <span>我 的</span>
+    </div>
+
+    <div class="img-big"></div>
+
+    <div class="content">
+        <div class="scenicSpot"></div>
+        <div class="hotel"></div>
+        <div class="mesh"></div>
+        <div class="activity-top">
+            <div></div>
+            <div>获取更多福利 &gt;</div>
+        </div>
+        <div class="activit"></div>
+    </div>
+
+    <script>
+        //渲染景点
+        const scenicSpot = document.querySelector('.scenicSpot')
+        for (let i = 0; i < 5; i++) {
+            const div = document.createElement('div')
+            div.innerHTML = `
+                <div class="img-small"></div>
+                <span>景点·玩乐</span>
+            `
+            scenicSpot.appendChild(div)
+        }
+        const imgSmallAll = document.querySelectorAll('.img-small')
+        for (let i = 0; i < imgSmallAll.length; i++) {
+            imgSmallAll[i].style.backgroundPositionY = `${-36*i}px`
+        }
+        //渲染酒店
+        let color = [
+            {
+                color1:'rgb(250, 108, 84)',
+                color2:'rgb(250, 116, 83)',
+                color3:'rgb(251, 131, 81)',
+                color4:'rgb(249, 148, 77)'
+                
+            },
+            {
+                color1:'rgb(76, 147, 236)',
+                color2:'rgb(80, 163, 236)',
+                color3:'rgb(81, 172, 237)',
+                color4:'rgb(83, 186, 237)'
+            },
+            {
+                color1:'rgb(58, 196, 166)',
+                color2:'rgb(75, 201, 138)',
+                color3:'rgb(91, 206, 115)',
+                color4:'rgb(105, 211, 95)'
+            }
+        ]
+        const hotel = document.querySelector('.hotel')            
+        for (let i = 0; i < 3; i++) {
+            const div = document.createElement('div')
+            div.innerHTML = `
+                <div class="big-box" style="background-image: linear-gradient(to right,${color[i].color1} 0%,${color[i].color2} 100%)">
+                    <div>海外酒店</div>
+                    <img src="https://oss.9ihub.com/test/xiecheng-hotel.png" alt="">
+                </div>
+                <div class="small-box" style="background-image: linear-gradient(to right,${color[i].color2} 0%,${color[i].color3} 100%)">海外酒店</div>
+                <div class="small-box" style="background-image: linear-gradient(to right,${color[i].color3} 0%,${color[i].color4} 100%)">海外酒店</div>
+                <div class="small-box" style="background-image: linear-gradient(to right,${color[i].color2} 0%,${color[i].color3} 100%)">特价酒店</div>
+                <div class="small-box" style="background-image: linear-gradient(to right,${color[i].color3} 0%,${color[i].color4} 100%)">特价酒店</div>
+            `
+            hotel.appendChild(div)
+        }
+
+        const radiusBigBox = document.querySelectorAll('.big-box')
+        radiusBigBox[0].classList.add('border-top-left-radius')
+        radiusBigBox[radiusBigBox.length-1].classList.add('border-bottom-left-radius')
+
+        const radiusSmallBox = document.querySelectorAll('.small-box')
+        radiusSmallBox[1].classList.add('border-top-right-radius')
+        radiusSmallBox[radiusSmallBox.length-1].classList.add('border-bottom-right-radius')
+        //渲染电话
+        const mesh = document.querySelector('.mesh')            
+        for (let i = 0; i < 10; i++) {
+            const div = document.createElement('div')
+            div.innerHTML = `
+                <div class="mesh-img"></div>
+                <span>电话费</span>
+            `
+            mesh.appendChild(div)
+        }
+        //渲染活动
+        const activit = document.querySelector('.activit')            
+        for (let i = 0; i < 6; i++) {
+            const div = document.createElement('div')
+            if (i < 2) {
+                div.classList.add('activit-big-box')
+            }else{
+                div.classList.add('activit-small-box')
+            }
+            div.style.backgroundImage = `url(https://oss.9ihub.com/test/xiecheng-pic${i+1}.jpg)`
+            activit.appendChild(div)
+        }
+
+
+    </script>
+</body>
+</html>
+
+```
+
+### 第五题代码
+```html
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        @media screen and (max-width:400px) {
+            *{
+                margin: 0;
+                padding: 0;
+            }
+
+            body{
+                background-color: rgb(246, 246, 246);
+            }
+            /* 底部导航栏模块 */
+            .bottom{
+                width: 100%;
+                height: 85px;
+                background-color: rgb(255, 255, 255);
+                position: fixed;
+                bottom: 0px;
+                display: flex;
+                align-items: center;
+            }
+
+            .bottom span{
+                flex: 1;
+                text-align: center;
+                font-size: 16px;
+            }
+            /* 打开APP模块 */
+            .top{
+                width: 100%;
+                height: 45px;
+                background-color: rgb(51, 52, 51);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                color: rgb(255, 255, 255);
+            }
+
+            .top div:nth-child(1){
+                width: 14px;
+                height: 14px;
+                margin-left: 10px;
+                background: url(https://oss.9ihub.com/test/dh5-close.png) center / cover no-repeat;
+            }
+
+            .top img {
+                width: 35px;
+            }
+
+            .top div:nth-child(4){
+                width: 100px;
+                height: 100%;
+                background-color: rgb(244, 53, 21);
+                text-align: center;
+                line-height: 45px;
+                border-left: 1px solid rgb(157, 98, 87);
+            }
+            /* 搜索框模块 */
+            .search{
+                width: 100%;
+                height: 45px;
+                background-color: rgb(195, 10, 11);
+                position: sticky;
+                top: 0px;
+                display: flex;
+                justify-content: space-evenly;
+                align-items: center;
+            }
+
+            .search>img:nth-child(1){
+                width: 25px;
+            }
+
+            .search div{
+                position: absolute;
+                display: flex;
+                left: 60px;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .search div img:nth-child(1){
+                width: 23px;
+                margin-right: 5px;
+            }
+
+            .search div img:nth-child(3){
+                width: 15px;
+                margin-left: 5px;
+            }
+
+            .search input{
+                width: 290px;
+                height: 30px;
+                border: white;
+                border-radius: 30px;
+                box-shadow: 1px 1px 1px rgb(111, 66, 62);
+                text-indent: 70px;
+            }
+
+            .search input::placeholder{
+                font-size: 12px;
+                color: rgb(137, 136, 133);
+            }
+
+            .search>span{
+                color: rgb(255, 255, 255);
+            }
+
+            /* 活动模块 */
+            .activity{
+                width: 100%;
+                height: 300px;
+                background-color: rgb(195, 10, 11);
+            }
+
+            .activity>div:nth-child(1){
+                width: 100%;
+                height: 155px;
+                background: url(https://oss.9ihub.com/test/jdh5-banner.png) center / contain no-repeat;
+                margin-bottom: 5px;
+            }
+
+            .activity>div:nth-child(2){
+                width: 100%;
+                height: 140px;
+                display: flex;
+            }
+
+            .activity>div:nth-child(2) img:not(.img-2){
+                flex: 1;
+            }
+
+            .activity>div:nth-child(2) img:nth-child(2){
+                width: 160px;
+            }
+            /* tap栏模块 */
+            .tapBar{
+                width: 100%;
+                height: 150px;
+                background-color: rgb(255, 255, 255);
+            }
+
+            .tapBar ul{
+                width: 90%;
+                height: 100%;
+                margin: 0 auto;
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            .tapBar li{
+                width: 20%;
+                height: 50%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                color: rgb(205, 204, 206);
+                font-size: 12px;
+            }
+
+            .tapBar li div{
+                width: 40px;
+                height: 40px;
+            }
+            /* 秒杀模块 */
+            .seckill{
+                width: 100%;
+                height: 140px;
+                background-color: rgb(255, 255, 255);
+            }
+
+            .seckill>div:nth-child(1){
+                width: 100%;
+                height: 30px;
+                font-size: 14px;
+                font-weight: 900;
+                display: flex;
+                align-items: center;
+                position: relative;
+            }
+
+            .seckill>div:nth-child(1) *{
+                position: absolute;
+            }
+
+            .seckill>div:nth-child(1) span:nth-child(1){
+                left: 10px;
+            }
+
+            .seckill>div:nth-child(1) span:nth-child(2){
+                left: 83px;
+            }
+
+            .seckill>div:nth-child(1) img:nth-child(3){
+                width: 20px;
+                left: 105px;
+            }
+
+            .seckill>div:nth-child(1) span:nth-child(4){
+                left: 130px;
+            }
+
+            .seckill>div:nth-child(1) img:nth-child(5){
+                width: 15px;
+                right: 5px;
+            }
+
+            .seckill>div:nth-child(2){
+                width: 100%;
+                height: 110px;
+            }
+            
+            .seckill>div:nth-child(2) ul{
+                width: 93%;
+                height: 100px;
+                margin: 5px auto;
+                display: flex;
+                justify-content: space-around;
+            }
+
+            .seckill>div:nth-child(2) li{
+                width: 16.66%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+                align-items: center;
+            }
+
+            .seckill>div:nth-child(2) img{
+                width: 99%;
+                margin: 0 auto;
+            }
+
+            .seckill>div:nth-child(2) span{
+                color: rgb(238, 66, 62);
+            }
+
+            /* 商品模块 */
+            .commodity{
+                width: 100%;
+                padding: 0px 5px;
+                box-sizing: border-box;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+            }
+
+            .commodity img{
+                width: 48%;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="top">
+        <div></div>
+        <img src="https://oss.9ihub.com/test/dh5-logo.png" alt="">
+        <span>打开京东APP，购物更轻松</span>
+        <div>立即打开</div>
+    </div>
+
+    <div class="search">
+        <img src="https://oss.9ihub.com/test/dh5-list.png" alt="">
+        <div>
+            <img src="https://oss.9ihub.com/test/dh5-left-jd.png" alt="">
+            <span>|</span>
+            <img src="../dh5-jd-sprites.png" alt="">
+        </div>
+        <input type="text" placeholder="键盘鼠标套餐">
+        <span>登录</span>
+    </div>
+
+    <div class="activity">
+        <div></div>
+        <div>
+            <img src="https://oss.9ihub.com/test/dh5-nianhuo1.png" alt="">
+            <img class="img-2" src="https://oss.9ihub.com/test/dh5-nianhuo2.png" alt="">
+            <img src="https://oss.9ihub.com/test/jdh5-nianhuo3.png" alt="">
+        </div>
+    </div>
+
+    <div class="tapBar">
+        <ul></ul>
+    </div>
+
+    <div class="seckill">
+        <div>
+            <span>京东秒杀</span>
+            <span>18</span>
+            <img src="https://oss.9ihub.com/test/dh5-ms-dc.png" alt="">
+            <span>更多秒杀</span>
+            <img src="https://oss.9ihub.com/test/dh5-ms-right.png" alt="">
+        </div>
+        <div>
+            <ul></ul>
+        </div>
+    </div>
+
+    <div class="commodity"></div>
+
+    <div class="bottom">
+        <span>首页</span>
+        <span>分类</span>
+        <span>京喜</span>
+        <span>购物车</span>
+        <span>未登录</span>
+    </div>
+
+    <script>
+        //渲染tap栏模块
+        let arr1 = [
+            'https://oss.9ihub.com/test/dh5-nav1.png',
+            'https://oss.9ihub.com/test/dh5-nav2.png',
+            'https://oss.9ihub.com/test/dh5-nav3.png',
+            'https://oss.9ihub.com/test/dh5-nav4.png',
+            'https://oss.9ihub.com/test/dh5-nav5.png',
+            'https://oss.9ihub.com/test/dh5-nav6.png',
+            'https://oss.9ihub.com/test/dh5-nav7.png',
+            'https://oss.9ihub.com/test/dh5-nav8.png',
+            'https://oss.9ihub.com/test/dh5-nav9.png',
+            'https://oss.9ihub.com/test/dh5-nav10.png',
+        ]
+        const tapBarUl = document.querySelector('.tapBar ul')
+        arr1.forEach(item => {
+            const li = document.createElement('li')
+            li.innerHTML = `
+                <div style="background: url(${item}) center / contain no-repeat;"></div>
+                <span>京东超市</span>
+            `
+            tapBarUl.appendChild(li)
+        })
+
+        //渲染秒杀模块
+        let arr2 = [
+            {
+                src : 'https://oss.9ihub.com/test/jdh5-ms1.jpg',
+                price : '25'
+            },
+            {
+                src : 'https://oss.9ihub.com/test/jdh5-ms2.jpg',
+                price : '2568'
+            },
+            {
+                src : 'https://oss.9ihub.com/test/jdh5-ms3.jpg',
+                price : '28.8'
+            },
+            {
+                src : 'https://oss.9ihub.com/test/jdh5-ms4.jpg',
+                price : '19.7'
+            },
+            {
+                src : 'https://oss.9ihub.com/test/jdh5-ms5.jpg',
+                price : '420'
+            },
+            {
+                src : 'https://oss.9ihub.com/test/jdh5-ms6.jpg',
+                price : '42.9'
+            }
+        ]
+        const seckillUl = document.querySelector('.seckill>div:nth-child(2) ul')
+        arr2.forEach(item => {
+            const li = document.createElement('li')
+            const {src,price} = item
+            li.innerHTML = `
+                <img src="${src}" alt="">
+                <span>￥${price}</span>
+            `
+            seckillUl.appendChild(li)
+        })
+
+        //渲染商品模块
+        let arr3 = [
+            'https://oss.9ihub.com/test/jdh5-product1.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp',
+            'https://oss.9ihub.com/test/jdh5-product2.webp'
+        ]
+
+        const commodity = document.querySelector('.commodity')
+        arr3.forEach(item => {
+            const img = document.createElement('img')
+            img.src = item
+            commodity.appendChild(img)
+        })
+    </script>
+</body>
+</html>
+```
\ No newline at end of file
diff --git "a/\345\274\240\344\277\212\346\235\260/imgssss/1029.1.gif" "b/\345\274\240\344\277\212\346\235\260/imgssss/1029.1.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..ee7084b16d28f697548e935481fa6b8dee2222a4
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/imgssss/1029.1.gif" differ
diff --git "a/\345\274\240\344\277\212\346\235\260/imgssss/29.2.gif" "b/\345\274\240\344\277\212\346\235\260/imgssss/29.2.gif"
new file mode 100644
index 0000000000000000000000000000000000000000..b9a37af43398cdd90d44de1635d759d798c46f94
Binary files /dev/null and "b/\345\274\240\344\277\212\346\235\260/imgssss/29.2.gif" differ