diff --git "a/\346\235\216\346\200\235/20241104-flex.md" "b/\346\235\216\346\200\235/20241104-flex.md"
new file mode 100644
index 0000000000000000000000000000000000000000..f0308878b7c3e623fd6e1bc9096a4e0193ecf8f2
--- /dev/null
+++ "b/\346\235\216\346\200\235/20241104-flex.md"
@@ -0,0 +1,235 @@
+
+
+### align-items属性
+align-items：设置子元素在侧轴上的对齐方式。
+属性值可以是：
+ - flex-start 从侧轴开始的方向对齐 
+ - flex-end 从侧轴结束的方向对齐 
+ - baseline 基线 默认同flex-start 
+ - center 中间对齐 
+ - stretch 拉伸
+
+#### 拉伸属性
+
+flex-basis、flex-grow和flex-shrink是Flexbox布局中控制弹性盒子大小的三个主要属性
+
+flex-grow
+ 作用：定义弹性盒子相对于其他弹性盒子的拉伸比例
+ 默认值：0（不拉伸）
+ 用法：flex-grow: <number>;，其中<number>是一个正整数，表示该弹性盒子应该拉伸占据的额外空间的比例。
+
+
+flex-shrink
+ 作用：定义了弹性盒子在必要时收缩的比例
+ 默认值：1（在必要时收缩）
+ 用法：flex-shrink: <number>;，其中<number>是一个正整数，表示该弹性盒子应该收缩以适应容器空间的减少的比例。
+
+
+flex-basis
+ 作用:定义了弹性盒子在分配多余空间之前的初始大小。
+ 定义：flex-basis属性指定了弹性盒子在分配多余空间之前，它的默认大小。这个大小是主轴方向上的，可以是长度值（如px、em等）或百分比。
+ 用法：flex-basis: <length> | auto | content;
+ <length>：指定一个具体的长度值作为弹性盒子的初始大小。
+ auto：默认值，表示弹性盒子的初始大小基于其内容的实际大小。
+ content（实验性功能）：表示弹性盒子的初始大小基于其内容的大小，但会考虑一些额外的因素，如内边距和边框。然而，content值目前并不是所有浏览器都支持的标准值。
+
+
+这三个属性可以单独使用，也可以通过flex简写属性一起设置。
+flex：1 1 auto;
+
+
+
+媒体式查询：
+ @media screen and(max-width:500px){
+    .x{
+        flex-direction:column;
+    }
+ }
+ 当屏幕的宽度不大于500px时设置class为x的弹性盒子的主轴从上到下对齐
+
+
+
+ ## 练习
+1. 播放器
+![alt text](<屏幕截图 2024-11-10 151954.png>)
+ ```
+  .i1{
+            width: 150px;
+            height: 150px;
+            background: url(../图片素材/flex-01.jpg);
+            border-radius: 10px;
+        }
+        .i2{
+            width: 150px;
+            height: 150px;
+            background: url(../图片素材/flex-02.jpg);
+            border-radius: 10px;
+        }
+        .i3{
+            width: 150px;
+            height: 150px;
+            background: url(../图片素材/flex-03.jpg);
+            border-radius: 10px;
+        }
+        .i4{
+            width: 150px;
+            height: 150px;
+            background: url(../图片素材/flex-04.jpg);
+            border-radius: 10px;
+        }
+        .i5{
+            width: 150px;
+            height: 150px;
+            background: url(../图片素材/flex-05.jpg);
+            border-radius: 10px;
+        }
+        .i6{
+            width: 150px;
+            height: 150px;
+            background: url(../图片素材/flex-06.jpg);
+            border-radius: 10px;
+        }
+        .i7{
+            width: 150px;
+            height: 150px;
+            background: url(../图片素材/flex-07.jpg);
+            border-radius: 10px;
+        }
+        .i8{
+            width: 150px;
+            height: 150px;
+            background: url(../图片素材/flex-08.jpg);
+            border-radius: 10px;
+        }
+        
+        .t1{
+            display: flex;
+            flex-direction: row;
+        }
+        .t2{
+            display: flex;
+            flex-direction: row;
+        }
+        .d1{
+            width: 48%;
+            margin: 2%;
+            float: left;
+            box-sizing: border-box;
+            margin-top: 20px;
+            
+            padding-top: 2px;
+            position: relative;
+        }
+        span{
+            position: absolute;
+            top: 120px;
+            left: 5px;
+            color: white;
+            font-size: small;
+        }
+        p{
+            width: 150px;
+            margin-top: 5px;
+            font-size: small;
+        }
+        @media only screen and (max-width:500px) and (min-width：0px){
+            .d1{
+                
+                margin:0 20px 0 0;
+                float: none;
+            }
+        }
+    </style>
+ ```
+
+ 2. 视频
+ ```
+ <style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .all{
+            width: 550px;
+            height: 700px;
+        }
+        
+        .top{
+            position: relative;
+            
+            height: 70px;
+            margin: 10px;
+        }
+        .img1{
+            width: 45px;
+            position: absolute;
+            top: 5px;
+            left: 0px;
+        }
+        .top1{
+            position: absolute;
+            top: 0px;
+            left: 55px;
+            font-size: 38px;
+            font-weight: 350px;
+        }
+        .img2{
+            width: 30px;
+            position: absolute;
+            top: 17px;
+            right: 80px;
+        }
+        .top2{
+            position: absolute;
+            top: 13px;
+            right: 5px;
+            font-size: 25px;
+            font-weight: 300;
+            color: red;
+        }
+        .middle{
+            margin: 10px;
+        }
+        .d1{
+            position: relative;
+            height: 180px;
+            
+        }
+        .syximg{
+            width: 250px;
+        }
+        .text{
+            
+            position: absolute;
+            top: 0;
+            right: 0px;
+        }
+        .t1{
+            width: 250px;
+            font-size: 24px;
+            font-weight: 400;
+        }
+        .t2{
+            width: 80px;
+            height: 30px;
+            position: absolute;
+            top: 75px;
+            left: 0;
+            background-color: rgb(168, 223, 245);
+            color: blue;
+            text-align: center;
+            line-height: 30px;
+            border-radius: 10%;
+        }
+        .mb1{
+            position: absolute;
+            top: 125px;
+            left: 0;
+        }
+        .mb2{
+            position: absolute;
+            top: 125px;
+            right: 0;
+        }
+    </style>
+ ```
\ No newline at end of file
diff --git "a/\346\235\216\346\200\235/20241106-\351\235\231\346\200\201\347\275\221\347\253\231.md" "b/\346\235\216\346\200\235/20241106-\351\235\231\346\200\201\347\275\221\347\253\231.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b35275821b7b77b70e55ad012c7d6e786ebbc344
--- /dev/null
+++ "b/\346\235\216\346\200\235/20241106-\351\235\231\346\200\201\347\275\221\347\253\231.md"
@@ -0,0 +1,84 @@
+ 
+## 笔记
+ 
+ 协议 http\https
+ 主机地址
+ 端口（默认为:80，个人为:8080或:8088）
+ 访问路径
+ 虚拟参数
+
+静态网站搭建必备条件
+1. 具有公网IP地址的主机（服务器）
+   已经通过备案的域名
+
+2. 在主机上部署网站
+    web服务器
+        nginx
+        apache
+    已经写好的网站
+
+
+
+
+## 作业
+
+3. 经典圣杯布局
+![alt text](<屏幕截图 2024-11-10 152041.png>)
+![alt text](<屏幕截图 2024-11-10 152052.png>)
+```
+<style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .top{
+            width: 100%;
+            height: 80px;
+            background-color: wheat;
+            text-align: center;
+        }
+        .mid{
+            width: 100%;
+            height: 500px;
+            background-color: red;
+            display: flex;
+            text-align: center;
+        }
+        .left{
+            width: 25%;
+            height: 500px;
+            background-color: green;
+        }
+        .middle{
+            width: 50%;
+            height: 500px;
+            background-color: white;
+            
+        }
+        .right{
+            width: 25%;
+            height: 500px;
+            background-color: purple;
+        }
+        @media  (max-width:500px) {
+            .mid{
+                display: grid;
+                
+            }
+            .middle{
+                width: 100%;
+                height: 300px;
+                
+                order: -1;
+            }
+            .left{
+                width: 100%;
+                height: 100px;
+            }
+            .right{
+                width: 100%;
+                height: 100px;
+            }
+        }
+    </style>
+```
\ No newline at end of file
diff --git "a/\346\235\216\346\200\235/20241107-\345\270\203\345\261\200\346\241\206\346\236\266.md" "b/\346\235\216\346\200\235/20241107-\345\270\203\345\261\200\346\241\206\346\236\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..791ccbd55824988952c86e4e9e5766aaaae1fe71
--- /dev/null
+++ "b/\346\235\216\346\200\235/20241107-\345\270\203\345\261\200\346\241\206\346\236\266.md"
@@ -0,0 +1,808 @@
+## 练习
+
+5. 携程
+![alt text](<屏幕截图 2024-11-10 152147.png>)
+```
+<style>
+        *{
+            margin: 0;
+            padding: 0;
+        }
+        .all{
+            margin: 5px;
+        }
+        .top{
+            width: 430px;
+            height: 50px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .t1{
+            width: 360px;
+            height: 25px;
+            border: 1px solid;
+
+        }
+        .t11{
+            background-image: url(../图片素材/xiecheng-sprite.png);
+            background-repeat: no-repeat;
+            background-position: -118px -558px;
+        }
+        .t1p{
+            position: relative;
+            top: 0;
+            left: 25px;
+        }
+        .t2{
+            width: 30px;
+            height: 40px;
+           
+            background-image: url(../图片素材/xiecheng-sprite.png);
+            background-repeat: no-repeat;
+            background-position: -65px -220px;
+            background-size: 120px;
+        }
+        .t1p2{
+            font-size: 15px;
+            position: relative;
+            top: 25px;
+            left: 0;
+            color: lightskyblue;
+        }
+        .banner{
+            width: 430px;
+            height: 75px;
+            border: 1px solid;
+            background-image: url(../图片素材/xiecheng-focus.jpg);
+            background-size: cover;
+        }
+        .play{
+            width: 430px;
+            height: 75px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+           
+        }
+        .j1{
+            width: 35px;
+            height: 45px;
+            
+            background-image: url(../图片素材/xiecheng-localnav_bg.png);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: 0 10px;
+            position: relative;
+            top: -4px;
+            left: 9px;
+        }
+        .j3{
+            width: 35px;
+            height: 45px;
+            
+            background-image: url(../图片素材/xiecheng-localnav_bg.png);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: 0 10px;
+            position: relative;
+            top: -4px;
+            left: 9px;
+        }
+        .j4{
+            width: 35px;
+            height: 45px;
+            
+            background-image: url(../图片素材/xiecheng-localnav_bg.png);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: 0 10px;
+            position: relative;
+            top: -4px;
+            left: 9px;
+        }
+        .j5{
+            width: 35px;
+            height: 45px;
+            
+            background-image: url(../图片素材/xiecheng-localnav_bg.png);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: 0 10px;
+            position: relative;
+            top: -4px;
+            left: 9px;
+        }
+        .j6{
+            width: 35px;
+            height: 45px;
+            
+            background-image: url(../图片素材/xiecheng-localnav_bg.png);
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: 0 10px;
+            position: relative;
+            top: -4px;
+            left: 9px;
+        }
+        .j2{
+            width: 60px;
+            height: 15px;
+            
+            font-size: 13px;
+        }
+        .hotel{
+            width: 430px;
+            height: 275px;
+            border: 1px solid;
+        }
+        .htop{
+            width: 430px;
+            height: 90px;
+            display: flex;
+            
+            align-items: center;
+            justify-content: space-between;
+        }
+        .htleft{
+            width: 140px;
+            height: 90px;
+            
+            background-color: lightcoral;
+            background-image: url(../图片素材/xiecheng-hotel.png);
+            background-repeat: no-repeat;
+            background-position: 4px 29px;
+            background-size: contain;
+            color: white;
+            display: flex;
+            
+            
+        }
+        .htright{
+            width: 280px;
+            height: 90px;
+            
+            display: flex;
+        }
+        .htright [class^='htr']{
+            width: 136px;
+            height: 40px;
+            margin: 2px;
+            display: flex;
+            
+            line-height: 45px;
+           
+            justify-content: center;
+            background-image: linear-gradient(to right,rgb(255, 115, 0),orange);
+            color: white;
+        }
+        .hmiddle{
+            
+            display: flex;
+           
+        }
+        .hbottom{
+            
+            display: flex;
+        }
+
+        .wifi{
+            width: 430px;
+            height: 115px;
+            
+        }
+        .wtop{
+            width: 430px;
+            height: 55px;
+            
+            display: flex;
+        }
+        .i{
+            width: 85px;
+            
+            background-image: url(../图片素材/xiecheng-subnav-bg.png);
+            background-repeat: no-repeat;
+            background-size: 40px;
+            background-position: 20px 10px;
+        }
+        .dhf{
+            position: relative;
+            top: 33px;
+            left: 15px;
+            font-size: 16px;
+        }
+        .wbottom{
+            width: 430px;
+            height: 55px;
+            
+            display: flex;
+        }
+        .hot{
+            width: 430px;
+            height: 60px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .hot1{
+            width: 100px;
+            height: 30px;
+            background-image: url(../图片素材/xiecheng-hot.png);
+            background-repeat: no-repeat;
+            background-size: 100px;
+            background-position: 5px -19px;
+            
+        }
+        .hot2{
+            width: 130px;
+            height: 30px;
+            background-color: palevioletred;
+            border-radius: 20px;
+            
+        }
+        .hot2p{
+            color: white;
+            align-items: center;
+            line-height: 30px;
+        }
+
+        .but{
+            width: 430px;
+            height: 315px;
+            border: 1px solid;
+        }
+        .but1{
+            width: 430px;
+            height: 110px;
+            border: 1px solid;
+            display: flex;
+        }
+        .left1{
+            width: 215px;
+            height: 110px;
+            border: 1px solid;
+            background-image: url(../图片素材/xiecheng-pic1.jpg);
+            background-repeat: no-repeat;
+            background-size: 180px;
+        }
+        .right1{
+            width: 215px;
+            height: 110px;
+            border: 1px solid;
+            background-image: url(../图片素材/xiecheng-pic2.jpg);
+            background-repeat: no-repeat;
+            background-size: 180px;
+        }
+        .but2{
+            width: 430px;
+            height: 100px;
+            border: 1px solid;
+            display: flex;
+        }
+        .left2{
+            width: 215px;
+            height: 100px;
+            border: 1px solid;
+            background-image: url(../图片素材/xiecheng-pic3.jpg);
+            background-repeat: no-repeat;
+            background-size: 210px;
+        }
+        .right2{
+            width: 215px;
+            height: 100px;
+            border: 1px solid;
+            background-image: url(../图片素材/xiecheng-pic4.jpg);
+            background-repeat: no-repeat;
+            background-size: 210px;
+        }
+        .but3{
+            width: 430px;
+            height: 100px;
+            border: 1px solid;
+            display: flex;
+        }
+        .left3{
+            width: 215px;
+            height: 100px;
+            border: 1px solid;
+            background-image: url(../图片素材/xiecheng-pic5.jpg);
+            background-repeat: no-repeat;
+            background-size: 210px;
+        }
+        .right3{
+            width: 215px;
+            height: 100px;
+            border: 1px solid;
+            background-image: url(../图片素材/xiecheng-pic6.jpg);
+            background-repeat: no-repeat;
+            background-size: 210px;
+        }
+    </style>
+</head>
+<body>
+    <div class="all">
+        <div class="top">
+            <div class="t1"><div class="t11"><p class="t1p">搜索：目的地/酒店/景点/航班</p></div></div>
+            <div class="t2"><p class="t1p2">我的</p></div>
+        </div>
+        <div class="banner"></div>
+        <div class="play">
+            <div class="p1">
+                <div class="j1"></div>
+                <div class="j2">景点.玩乐</div>
+            </div>
+            <div class="p1">
+                <div class="j3"></div>
+                <div class="j2">景点.玩乐</div>
+            </div>
+            <div class="p1">
+                <div class="j4"></div>
+                <div class="j2">景点.玩乐</div>
+            </div>
+            <div class="p1">
+                <div class="j5"></div>
+                <div class="j2">景点.玩乐</div>
+            </div>
+            <div class="p1">
+                <div class="j6"></div>
+                <div class="j2">景点.玩乐</div>
+            </div>
+        </div>
+        <div class="hotel">
+            <div class="htop">
+                <div class="htleft">海外酒店</div>
+                <div class="htright">
+                    <div class="hh1">
+                    <div class="htr1">海外酒店</div>
+                    <div class="htr2">海外酒店</div></div>
+                    <div class="hh2">
+                    <div class="htr3">特价酒店</div>
+                    <div class="htr4">特价酒店</div></div>
+                </div>
+            </div>
+            <div class="hmiddle">
+                <div class="htleft">海外酒店</div>
+                <div class="htright">
+                    <div class="hh1">
+                    <div class="htr1">海外酒店</div>
+                    <div class="htr2">海外酒店</div></div>
+                    <div class="hh2">
+                    <div class="htr3">特价酒店</div>
+                    <div class="htr4">特价酒店</div></div>
+                </div>
+            </div>
+            <div class="hbottom">
+                <div class="htleft">海外酒店</div>
+                <div class="htright">
+                    <div class="hh1">
+                    <div class="htr1">海外酒店</div>
+                    <div class="htr2">海外酒店</div></div>
+                    <div class="hh2">
+                    <div class="htr3">特价酒店</div>
+                    <div class="htr4">特价酒店</div></div>
+                </div>
+            </div>
+        </div>
+        <div class="wifi">
+            <div class="wtop">
+                <div class="i"><p class="dhf">电话费</p></div>
+                <div class="i"><p class="dhf">电话费</p></div>
+                <div class="i"><p class="dhf">电话费</p></div>
+                <div class="i"><p class="dhf">电话费</p></div>
+                <div class="i"><p class="dhf">电话费</p></div>
+            </div>
+            <div class="wbottom">
+                <div class="i"><p class="dhf">电话费</p></div>
+                <div class="i"><p class="dhf">电话费</p></div>
+                <div class="i"><p class="dhf">电话费</p></div>
+                <div class="i"><p class="dhf">电话费</p></div>
+                <div class="i"><p class="dhf">电话费</p></div>
+            </div>
+        </div>
+        <div class="hot">
+            <div class="hot1"></div>
+            <div class="hot2"><p class="hot2p">获取更多福利></p></div>
+        </div>
+        <div class="but">
+            <div class="but1">
+                <div class="left1"></div>
+                <div class="right1"></div>
+            </div>
+            <div class="but2">
+                <div class="left2"></div>
+                <div class="right2"></div>
+            </div>
+            <div class="but3">
+                <div class="left3"></div>
+                <div class="right3"></div>
+            </div>
+        </div>
+    </div>
+</body>
+```
+
+6. 京东
+![alt text](<屏幕截图 2024-11-10 151933.png>)
+```
+ *{
+            margin: 0px;
+            padding: 0px;
+        }
+        body{
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+        }
+        .box{
+            width: 390px;
+            height: 970px;
+            display: flex;
+            flex-direction: column;
+        }
+        .top{
+            width: 390px;
+            height: 40px;
+            display: flex;
+            background-color: #322e2e;
+        }
+        .x{
+            width: 30px;
+            background-image: url(https://oss.9ihub.com/test/dh5-close.png);
+            background-position: 7px 9px;
+            background-size: 60%;
+            background-repeat: no-repeat;
+        }
+        .a1{
+            width:250px;
+            background-image: url(https://oss.9ihub.com/test/dh5-logo.png);
+            background-repeat: no-repeat;
+            background-position: 3px 5px;
+            background-size: 10%;
+            margin-top: 3px;
+            margin-left: 10px;
+        }
+        .a1>span{
+            font-size: 13px;
+            color: white;
+            position: relative;
+            top: 5px;
+            left: 40px;
+        }
+        .a2{
+            background-color: rgb(242, 79, 79);
+            color: white;
+            width: 110px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .center{
+            width: 390px;
+            height: 310px;
+            display: flex;
+            background-color: rgb(195, 10, 11);
+        }
+        .search{
+            width: 390px;
+            height: 40px;
+            
+        }
+        .s1{
+            width: 390px;
+            height: 40px;       
+            background-color: rgb(195, 10, 11);
+            background-image: url(https://oss.9ihub.com/test/dh5-list.png);
+            background-repeat: no-repeat;
+            background-position: 10px 12px;
+            background-size: 5%;
+            position: sticky;
+            top: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .ssk{
+            width: 260px;
+            height: 30px;
+            background-color: #fff;
+            border-radius: 15px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: -30px;
+            background-image: url(https://oss.9ihub.com/test/dh5-left-jd.png);
+            background-repeat: no-repeat;
+            background-size: 8%;
+            background-position: 8px 8px;
+        }
+        .gan{
+            color: lightgray;
+            position: relative;
+            top: -2px;
+            left: 3px;
+        }
+        .ss{
+            width: 25px;
+            height: 25px;
+            background-image: url(https://oss.9ihub.com/test/dh5-jd-sprites.png);
+            background-repeat: no-repeat;
+            background-position: -148px 3px;
+            background-size: 1000%;
+        }
+        .s1 input{
+            border: none;
+            margin-left: 8px;
+        }
+        .s1 span{
+            color: white;
+            position: relative;
+            right: -45px;
+            top: 0px;
+        }
+        .s2{
+            width: 390px;
+            height:150px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-banner.png);
+            background-size: 100%;
+            background-repeat: no-repeat;
+        }
+        .s3{
+            height: 115px;
+            margin-top: 5px;
+            display: flex;
+        }
+        .ss1{
+            width: 92px;
+            height: 130px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nianhuo1.png);
+            background-repeat: no-repeat;
+            background-position: 5px 0;
+            background-size: 95%;
+        }
+        .ss2{
+            width: 200px;
+            height: 130px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nianhuo2.png);
+            background-repeat: no-repeat;
+            background-position: 6px 0;
+            background-size:95%;
+        }
+        .ss3{
+            width: 92px;
+            height: 130px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-nianhuo3.png);
+            background-repeat: no-repeat;
+            background-position: 3px 0;
+            background-size: 95%;
+        }
+        .shop{
+            width: 390px;
+            height: 150px;
+        }
+        .one,.two{
+            height: 60px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .d1{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav1.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d2{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav2.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d3{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav3.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d4{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav4.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d5{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav5.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d6{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav6.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d7{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav7.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d8{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav8.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d9{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav9.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .d10{
+            width:50px;
+            height: 40px;
+            background-image: url(https://oss.9ihub.com/test/dh5-nav10.png);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 80%;
+        }
+        .jdcs{
+            width: 50px;
+            height:10px;
+            font-size: 12px;
+            color: rgb(170, 168, 168);
+            position: relative;
+            top: 40px;
+        }
+        .jdms{
+            width: 390px;
+            height: 130px;
+            margin-top: 10px;
+        }
+        .j1{
+            width: 390px;
+            height: 20px;
+            display: flex;
+        }
+        .ms,.gd{
+            width:100px;
+            font-weight: bold;
+            position: relative;
+            left: 5px;
+        }
+        .dc{
+            width:20px;
+            background-image: url(https://oss.9ihub.com/test/dh5-ms-dc.png);
+            background-size:100%;
+            background-repeat: no-repeat;
+            margin-left: 5px;
+        }
+        .tt{
+            width: 15px;
+            background-image: url(https://oss.9ihub.com/test/dh5-ms-right.png);
+            background-repeat: no-repeat;
+            background-size: 100%;
+            position: relative;
+            top: 5px;
+            right:-145px;
+        }
+        .j2{
+            width: 390px;
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .ji1{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms1.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .ji2{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms2.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .ji3{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms3.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .ji4{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms4.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .ji5{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms5.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .ji6{
+            width: 65px;
+            height: 90px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-ms6.jpg);
+            background-repeat: no-repeat;
+            background-size: 100%;
+        }
+        .money{
+            width: 50px;
+            height: 30px;
+            color:red;
+            font-size: 13px;
+            position: relative;
+            top: 65px;
+            left: 15px;
+        }
+        .sp{
+            width: 390px;
+            height: 200px;
+            display: flex;
+            background-color: rgb(247, 247, 247);
+        }
+        .l1{
+            width: 195px;  
+            height: 195px;
+            margin: 10px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-product1.webp);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 100%;
+        }
+        .l2{
+            width: 195px;
+            height: 195px;
+            margin: 10px;
+            background-image: url(https://oss.9ihub.com/test/jdh5-product2.webp);
+            background-repeat: no-repeat;
+            background-position: 0 0;
+            background-size: 100%;
+        }
+        .banner{
+            width: 390px;
+            height: 80px;
+            background-color: #8bd4e0;
+            position: fixed;
+            bottom: 0;
+            z-index: 1000;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+        .ooo{
+            color: lightgray;
+        }
+```
\ No newline at end of file