From b5f8d702854d63e8fc63efbbeb6633633857c629 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=91=E7=A2=A7=E4=BB=99?= <z17850218495@outlook.com>
Date: Thu, 7 Nov 2024 10:56:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=B9=E6=80=A7=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...71\346\200\247\345\270\203\345\261\200.md" | 572 ++++++++++++++++++
 1 file changed, 572 insertions(+)
 create mode 100644 "\351\203\221\347\242\247\344\273\231/2024-11-04\345\274\271\346\200\247\345\270\203\345\261\200.md"

diff --git "a/\351\203\221\347\242\247\344\273\231/2024-11-04\345\274\271\346\200\247\345\270\203\345\261\200.md" "b/\351\203\221\347\242\247\344\273\231/2024-11-04\345\274\271\346\200\247\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..e12e492
--- /dev/null
+++ "b/\351\203\221\347\242\247\344\273\231/2024-11-04\345\274\271\346\200\247\345\270\203\345\261\200.md"
@@ -0,0 +1,572 @@
+## 效果图
+[练习](http://zhengmuyun.cn/练习.png)
+[酷狗](http://zhengmuyun.cn/酷狗.png)
+[骰子](http://zhengmuyun.cn/骰子.png)
+[今日头条](http://zhengmuyun.cn/今日头条.mp4)
+[圣杯](http://zhengmuyun.cn/圣杯.mp4)
+[携程](http://zhengmuyun.cn/携程.mp4)
+[京东](http://zhengmuyun.cn/京东.png)
+[布局2](http://zhengmuyun.cn/布局2.png)
+[布局](http://zhengmuyun.cn/布局.mp4)
+### 重要代码
+```html
+--------------------------------------------
+携程
+        .box{
+               height: 100vh;
+               width: 700px;
+           }
+           .header{
+             height: 70px;
+             width: 700px;
+             border: 1px solid;
+             display: flex;
+             
+             justify-content: space-around;
+             align-items: center;
+           }
+           .left{
+            width: 450px;
+            height: 50px;
+            border-radius: 10px;
+            line-height: 40px;
+            padding-left: 60px;
+            padding-top: 5px;
+            font-size: 20px;
+            color: gray;
+            box-shadow: 5px 5px 3px -2px gray;
+            border: 1px solid gray;
+            background: url(./图片/xiecheng-sprite.png) no-repeat -108px -549px;
+         }
+         .right{
+            width: 60px;
+            height: 50px;
+            border-radius: 10px;
+            line-height: 100px;
+            color: skyblue;
+            text-align: center;
+            background: url(./图片/xiecheng-sprite.png) no-repeat -108px -389px;
+          
+         }
+           .total{
+               width: 700px;
+               height: 150px;
+               border: 1px solid;
+               background: url(./图片/xiecheng-focus.jpg) no-repeat;
+           }
+           .munu{
+               height: 100px;
+               width:700px;
+               border: 1px solid;
+               display: flex;
+           
+               justify-content: space-around;
+           }
+           [class^="n"]{
+            line-height: 160px;
+            font-size: 20px;
+          }
+         .n1{
+            height: 65px;
+            margin-top: 5px;
+            background: url(./图片/xiecheng-localnav_bg.png)no-repeat 0px 0px;
+         }
+         .n2{
+            height: 65px;
+            margin-top: 5px;
+            background: url(./图片/xiecheng-localnav_bg.png)no-repeat 0px -63px;
+         }
+         .n3{
+            height: 65px;
+            margin-top: 5px;
+            background: url(./图片/xiecheng-localnav_bg.png)no-repeat 0px -130px;
+         }
+         .n4{
+            height: 65px;
+            margin-top: 5px;
+            background: url(./图片/xiecheng-localnav_bg.png)no-repeat 0px -191px;
+      
+         }
+         .n5{
+            height: 65px;
+            margin-top: 5px;
+            background: url(./图片/xiecheng-localnav_bg.png)no-repeat 0px -255px;
+         }
+           .tal{
+            width: 700px;
+            height: 600px;
+            border: 1px solid;
+            display: flex;
+            flex-direction: column;
+           }
+           .to-t{
+            height: 300px;
+            width: 700px;
+            display: flex;
+            flex-wrap: wrap;
+            color: white;
+            border: 2px solid white;
+            justify-content: space-around;
+            align-items: center;
+         }
+         .q{
+           background-image: linear-gradient(to right,rgb(250, 91, 86),rgb(251, 131, 81 ), rgb(251, 149, 78));
+        }
+        .w{
+        background-image: linear-gradient(to right,rgb(78, 156, 237),rgb(81, 172, 237 ), rgb(83, 186, 237));
+        }
+        .e{
+        background-image: linear-gradient(to right,rgb(72, 199, 148),rgb(91, 206, 115), rgb(105, 211, 95));
+        }
+           .x{
+            width: 200px;
+            font-size: 30px;
+            height: 100px;
+         }
+         .x:nth-child(4){
+            background: url(./图片/xiecheng-hotel.png) no-repeat;
+            background-position: -100px ;
+            margin-top: -50px; 
+         }
+           .wifi {
+            width: 700px;
+            height: 200px;
+            border: 1px solid;
+            display: flex;
+            flex-wrap: wrap;     
+            align-items: center;
+            justify-content: space-around;
+           }
+           .v{
+            width: 130px;
+            height: 48px;
+            margin-left: 10px;
+            border-bottom: 1px solid white;
+            line-height: 120px;   
+            background: url(./图片/xiecheng-subnav-bg.png) no-repeat 0px 0px;
+        }
+           .active{
+               height: 60px;
+               width: 700px;
+               border: 1px solid;
+           }
+           .a1{
+            width: 160px;
+            height: 100px;
+            background: url(./图片/xiecheng-hot.png) no-repeat 13px -29px;
+       }
+         .beti{
+            width: 700px;
+            height: 700px;
+            border: 1px solid;
+         }
+     
+      .b1{
+         width: 700px;
+         height: 300px;
+         display: flex;
+      }
+      .b2{
+        width: 700px;
+        height: 300px;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .j1{
+         width: 350px;
+         height: 300px;
+         background: url(./图片/xiecheng-pic1.jpg) no-repeat ;
+         background-size: 350px;
+      }
+      .j2{
+         width: 350px;
+         height: 300px;
+         background: url(./图片/xiecheng-pic2.jpg) no-repeat ;
+         background-size: 350px;
+      }
+       .s1{
+         width: 350px;
+         height: 200px;
+         background: url(./图片/xiecheng-pic3.jpg) no-repeat ;
+         background-size: 350px;
+       }
+       .s2{
+         width: 350px;
+         height: 200px;
+         background: url(./图片/xiecheng-pic4.jpg) no-repeat ;
+         background-size: 350px;
+       }
+       .s3{
+         width: 350px;
+         height: 200px;
+         background: url(./图片/xiecheng-pic5.jpg) no-repeat ;
+         background-size: 350px;
+       }
+       .s4{
+         width: 350px;
+         height: 200px;
+         background: url(./图片/xiecheng-pic6.jpg) no-repeat ;
+         background-size: 350px;
+       }
+------------------------------------------------    
+京东
+        .box{
+            height: 1140px;
+            width: 430px;
+            border: 1px solid;
+        }
+        .header{
+            height: 40px;
+            width: 430px;   
+            border: 1px solid ;
+            display: flex;
+        }
+        .left{
+            width: 40px;
+            height: 40px;
+            background: url(./图片2/dh5-close.png) no-repeat ;
+            background-size: 10px;
+            background-position: 5px;
+            background-color: black;   
+        }
+        .center{
+            width: 370px;
+            height: 40px;
+            background: url(./图片2/dh5-logo.png) no-repeat;
+            background-size: 30px;
+            line-height: 40px;
+            padding-left: 60px;
+            background-position: 5px;
+            background-color: black;
+            color: white;
+        }
+        .right{
+            width: 180px;
+            height: 40px;
+            line-height: 40px;
+            text-align: center;
+            background-color: red;
+            color: white;
+        }
+        .de{
+            width: 430px;
+            height: 40px;
+            border: 1px solid ;
+            display: flex;
+            background-color: red;
+        }
+        .z{
+        height: 40px;
+        width: 60px;
+        background: url(./图片2/dh5-jd-sprites.png) no-repeat 0px -33px;
+        background-size: 291px;
+       }
+       .x{
+        height: 42px;
+        width: 40px;
+        background: url(./图片2/dh5-jd-sprites.png) no-repeat 0px 9px;
+        background-size: 305px;     
+       }
+       .o{
+        display: flex;
+        line-height: 36px;
+        height: 36px;
+        border-radius: 10px;
+        border: 1px solid white;
+        background-color: white;
+       }
+       .c{
+        height: 40px;
+        width: 40px;
+        background: url(./图片2/dh5-jd-sprites.png) no-repeat -165px 6px;
+        background-size: 400px;
+       }
+       .i{
+         width: 150px;
+         height: 40px;   
+       }
+        .v{
+            height: 40px;
+            width: 60px;
+            text-align: center;
+            margin-left: 100px;
+            color: white;
+            font-size: 20px;
+        }
+        .total{
+            width: 430px;
+            height: 200px;
+            border: 1px solid gold;
+            background: url(./图片2/jdh5-banner.png) no-repeat;
+            background-size: 480px 190px;
+            border-radius: 10px;       
+            background-color: rgb(235, 60, 60);
+        }
+        .tal{
+            height: 130px;
+            width: 430px;
+            border: 1px solid ;
+            display: flex;
+        }
+        .q{
+            height: 130px;
+            width: 120px;
+            background: url(./图片2/dh5-nianhuo1.png) no-repeat;
+            background-size: 115px 130px;
+        }
+        .w{
+            height: 130px;
+            width: 208px;
+      
+            background: url(./图片2/dh5-nianhuo2.png) no-repeat;
+            background-size: 200px 129px;    
+        }        
+        .e{
+            height: 130px;
+            width: 120px;
+            background: url(./图片2/jdh5-nianhuo3.png) no-repeat;
+            background-size: 120px 130px;
+        } 
+        .numu{        
+            height: 200px;
+            width: 430px;
+            border: 1px solid ;
+            display: flex;
+            justify-content: space-around;
+            flex-direction: column;
+            align-items: center;
+     
+        }
+        .top{
+            width: 400px;
+            height: 100px;
+            display: flex;
+        }
+        .bot{
+            width: 400px;
+            height: 100px;
+            display: flex;
+            justify-content: space-around;
+        }
+        .o1,.o2,.o3,.o4,.o5,.o6,.o7,.o8,.o9,.n1{
+        width: 80px;
+        height: 80px;
+        line-height: 160px;
+        text-align: center;
+        color: gainsboro;    
+       }
+       .o1{
+        background: url(./图片2/dh5-nav1.png) no-repeat;
+        background-size: 70px;
+       }
+       .o2{
+        background: url(./图片2/dh5-nav2.png) no-repeat;
+        background-size: 70px;
+       }
+       .o3{
+        background: url(./图片2/dh5-nav3.png) no-repeat;
+        background-size: 70px;
+       }
+       .o4{
+        background: url(./图片2/dh5-nav4.png) no-repeat;
+        background-size: 70px;
+       }
+       .o5{
+        background: url(./图片2/dh5-nav5.png) no-repeat;
+        background-size: 70px;
+       }
+       .o6{
+        background: url(./图片2/dh5-nav6.png) no-repeat;
+        background-size: 70px;
+       }
+       .o7{
+        background: url(./图片2/dh5-nav7.png) no-repeat;
+        background-size: 70px;
+       }
+       .o8{
+        background: url(./图片2/dh5-nav8.png) no-repeat;
+        background-size: 70px;
+       }
+       .o9{
+        background: url(./图片2/dh5-nav9.png) no-repeat;
+        background-size: 70px;
+       }
+       .n1{
+        background: url(./图片2/dh5-nav10.png) no-repeat;
+        background-size: 70px;
+       }
+     .ms{
+        height: 40px;
+        width: 430px;
+        border: 1px solid ;
+        display: flex;
+        font-size: 28px;
+        font-weight: bold;    
+        }
+        .n2{
+        width: 320px;
+        height: 40px;
+       }
+       .n3{
+        width: 60px;
+        height: 32px;
+        margin-left: 70px;
+        background: url(./图片2/dh5-jd-sprites.png) no-repeat -354px -46px;
+        transform: rotate(-90deg);
+       }
+       .n4{
+        width: 400px;
+        height: 130px;
+        display: flex;
+
+       }
+       .m{
+        width: 430px;
+        height: 110px;
+        line-height: 180px;
+        text-align: center;
+        display: flex;
+        color: red;
+       }
+      .m1,.m2,.m3,.m4,.m5,.m6{
+            width: 80px;
+            height: 110px;
+            background: url(./图片2/jdh5-ms1.jpg) no-repeat;
+            background-size: 70px;
+     } 
+     .m2{
+        background: url(./图片2/jdh5-ms2.jpg) no-repeat;
+        background-size: 70px;
+     }
+     .m3{
+        background: url(./图片2/jdh5-ms3.jpg) no-repeat;
+        background-size: 70px;
+     }
+     .m4{
+        background: url(./图片2/jdh5-ms4.jpg) no-repeat;
+        background-size: 70px;
+     }
+     .m5{
+        background: url(./图片2/jdh5-ms5.jpg) no-repeat;
+        background-size: 70px;
+     }
+     .m6{
+        background: url(./图片2/jdh5-ms6.jpg) no-repeat;
+        background-size: 70px;
+     }  
+        .tu{
+            height: 220px;
+            width: 430px;
+            border: 1px solid ;
+            display: flex;
+        }
+        .le{
+            height: 220px;
+            width: 220px;
+            background: url(./图片2/jdh5-product1.webp) no-repeat;
+            background-size: 200px 220px;
+            background-color:wheat;
+        }
+        .ri{
+            height: 220px;
+            width: 210px;
+            background: url(./图片2/jdh5-product2.webp) no-repeat;
+            background-size: 210px 220px;
+            background-color:wheat;  
+        }
+        .fo{
+            width: 430px;
+            height: 100px;
+            border: 1px solid ;
+            display: flex;
+            font-size: 25px;
+            justify-content: space-around;
+            align-items: center;
+            color: gainsboro;
+        }
+        .d{
+            width: 100px;
+            height:100px;
+            line-height: 100px;
+        }
+--------------------------------
+骰子
+     .con{
+            width: 1000px;
+            height: 200px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-evenly;
+        }
+        .o1,.o2{
+            width: 100px;
+            height: 100px;
+            border: 3px solid red;
+            border-radius: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .o2{
+            flex-direction: column;
+            align-items: center;
+            justify-content: space-evenly;
+        }
+        .o3,.o4,.o5,.o6,.o7,.o8,.o9{
+            width: 100px;
+            height: 100px;
+            border: 3px solid red;
+            border-radius: 5px;
+            display: flex;
+            flex-wrap:wrap ;
+            align-content: space-around;
+        }  
+        .n1,.n2,.n3,.n4,.n5,.n6,.n7,.n8,.n9{
+             height: 20px;
+             width: 20px;
+             border-radius: 100px;
+             background-color: black;
+        }
+       .o3 .k:nth-child(1){
+           justify-content:start;
+       }
+       .o3 .k:nth-child(3){
+        justify-content:flex-end;
+       }
+        .k{
+            width: 100px;
+            display: flex;
+            justify-content: space-around;         
+        }
+      .l{
+       background-color: white;
+    }
+```
+
+# 弹性盒子
+使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。
+备注：一般是用 `display:flex`这个属性。`display:inline-flex`用得较少。
+## flex-direction 属性
+
+`flex-direction`：用于设置盒子中**子元素**的排列方向。属性值可以是：
+
+| 属性值         | 描述                             |
+| :------------- | :------------------------------- |
+| row            | 从左到右水平排列子元素（默认值） |
+| column         | 从上到下垂直排列子元素           |
+| row-reverse    | 从右向左排列子元素               |
+| column-reverse | 从下到上垂直排列子元素           |
+## flex-wrap属性
+`flex-wrap`：控制子元素溢出时的换行处理。
+
+## justify-content 属性
+
+`justify-content`：控制子元素在主轴上的排列方式。
+`justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是：
+
+- `flex-start` 从主轴的起点对齐（默认值）
+- `flex-end` 从主轴的终点对齐
+- `center` 居中对齐
+- `space-around` 在父盒子里平分
+- `space-between` 两端对齐 平分
\ No newline at end of file
-- 
Gitee