From 0d7d2bd428c3b062a9a0f4a37791aa2fce39b511 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=99=E7=82=9C=E5=BB=B7?= <1160093753@qq.com>
Date: Sun, 10 Nov 2024 21:45:25 +0800
Subject: [PATCH] 35

---
 .../\344\275\234\344\270\232/20241109.html"   |  71 ++++
 .../20241109\344\272\254\344\270\234.html"    | 268 +++++++++++++++
 ...\345\270\203\345\261\200\344\270\200.html" | 150 +++++++++
 ...\345\270\203\345\261\200\344\270\211.html" | 150 +++++++++
 ...\345\270\203\345\261\200\344\272\214.html" | 156 +++++++++
 ...\345\270\203\345\261\200\345\233\233.html" | 161 +++++++++
 .../20241109\346\220\272\347\250\213.html"    | 308 ++++++++++++++++++
 .../20241109.md"                              |  28 ++
 8 files changed, 1292 insertions(+)
 create mode 100644 "\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109.html"
 create mode 100644 "\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\344\272\254\344\270\234.html"
 create mode 100644 "\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\270\200.html"
 create mode 100644 "\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\270\211.html"
 create mode 100644 "\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\272\214.html"
 create mode 100644 "\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\345\233\233.html"
 create mode 100644 "\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\346\220\272\347\250\213.html"
 create mode 100644 "\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241109.md"
diff --git "a/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109.html" "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109.html"
new file mode 100644
index 0000000..6a3deaf
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109.html"
@@ -0,0 +1,71 @@
+<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;
+        }
+
+        .subject{
+            width: 585px;
+            height: 1270px;
+            border: 1px solid;
+        }
+
+        .decide{
+            width: 585px;
+            height: 70px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        .d1{
+            width: 45px;
+            height: 70px;
+            border: 1px solid;
+        }
+
+        .d2{
+            width: 65px;
+            height: 70px;
+            border: 1px solid;
+        }
+
+        .d3{
+            width: 325px;
+            height: 70px;
+            border: 1px solid;
+        }
+
+        .d4{
+            width: 150px;
+            height: 70px;
+            border: 1px solid;
+        }
+    </style>
+</head>
+<body>
+    <div class="subject">
+        <div class="decide">
+            <div class="d1"></div>
+            <div class="d2"></div>
+            <div class="d3"></div>
+            <div class="d4"></div>
+        </div>
+        <div class="Top">
+            <div class="left"></div>
+            <div class="center">
+                <div class="c1"></div>
+                <div class="c2"></div>
+                <div class="c3"></div>
+                <div class="c4"></div>
+            </div>
+            <div class="right"></div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\344\272\254\344\270\234.html" "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\344\272\254\344\270\234.html"
new file mode 100644
index 0000000..b39e5b5
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\344\272\254\344\270\234.html"
@@ -0,0 +1,268 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .all {
+            display: flex;
+            justify-content: space-around;
+        }
+
+        .one,
+        .two,
+        .three,
+        .four {
+            width: 150px;
+            height: 400px;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .d11 {
+            width: 150px;
+            height: 190px;
+        }
+
+        .d12 {
+            width: 150px;
+            height: 190px;
+        }
+
+        .d21 {
+            width: 150px;
+            height: 190px;
+        }
+
+        .d22 {
+            width: 150px;
+            height: 190px;
+        }
+
+        .d31 {
+            width: 150px;
+            height: 190px;
+        }
+
+        .d32 {
+            width: 150px;
+            height: 190px;
+        }
+
+        .d41 {
+            width: 150px;
+            height: 190px;
+        }
+
+        .d42 {
+            width: 150px;
+            height: 190px;
+        }
+
+        .img1 {
+            width: 150px;
+            height: 150px;
+            border-radius: 7%;
+            background-image: url(https://oss.9ihub.com/test/flex-01.jpg);
+            display: flex;
+            justify-content: left;
+            align-items: end;
+            
+        }
+
+        .img5 {
+            width: 150px;
+            height: 150px;
+            border-radius: 7%;
+            background-image: url(https://oss.9ihub.com/test/flex-05.jpg);
+            margin-top: 20px;
+            display: flex;
+            justify-content: left;
+            align-items: end;
+        }
+
+        .img2 {
+            width: 150px;
+            height: 150px;
+            border-radius: 7%;
+            background-image: url(https://oss.9ihub.com/test/flex-02.jpg);
+            display: flex;
+            justify-content: left;
+            align-items: end;
+        }
+
+        .img6 {
+            width: 150px;
+            height: 150px;
+            border-radius: 7%;
+            background-image: url(https://oss.9ihub.com/test/flex-06.jpg);
+            margin-top: 20px;
+            display: flex;
+            justify-content: left;
+            align-items: end;
+        }
+
+        .img3 {
+            width: 150px;
+            height: 150px;
+            border-radius: 7%;
+            background-image: url(https://oss.9ihub.com/test/flex-03.jpg);
+            display: flex;
+            justify-content: left;
+            align-items: end;
+        }
+
+        .img7 {
+            width: 150px;
+            height: 150px;
+            border-radius: 7%;
+            background-image: url(https://oss.9ihub.com/test/flex-07.jpg);
+            margin-top: 20px;
+            display: flex;
+            justify-content: left;
+            align-items: end;
+        }
+
+        .img4 {
+            width: 150px;
+            height: 150px;
+            border-radius: 7%;
+            background-image: url(https://oss.9ihub.com/test/flex-04.jpg);
+            display: flex;
+            justify-content: left;
+            align-items: end;
+        }
+
+        .img8 {
+            width: 150px;
+            height: 150px;
+            border-radius: 7%;
+            background-image: url(https://oss.9ihub.com/test/flex-08.jpg);
+            margin-top: 20px;
+            display: flex;
+            justify-content: left;
+            align-items: end;
+        }
+
+
+        .pircute {
+            width: 20px;
+            height: 20px;
+            background-image: url(https://oss.9ihub.com/test/icon_play.png);
+            background-size: 15px;
+            background-repeat: no-repeat;
+            margin: 0 0 10px 10px;
+           
+        }
+
+        .people {
+            width: 80px;
+            height: 20px;
+            font-size: 15px;
+            color: white;
+            margin: 0 0 10px 0;
+
+
+            
+        }
+
+        .font {
+            width: 150px;
+            height: 40px;
+            font-size: 14px;
+            margin: 10px 0 20px 0;
+        }
+        
+    </style>
+</head>
+
+<body>
+    <div class="all">
+        <div class="one">
+
+            <div class="d11">
+                <div class="img1">
+                    <div class="pircute"></div>
+                    <div class="people">2444.0万</div>
+                </div>
+                <div class="font">
+                    催眠：Delta脑波音乐减压深度睡眠
+                </div>
+            </div>
+            <div class="d12">
+                <div class="img5">
+                    <div class="pircute"></div>
+                    <div class="people">2444.0万</div>
+                </div>
+                <div class="font">
+                    催眠：Delta脑波音乐减压深度睡眠
+                </div>
+            </div>
+
+        </div>
+        <div class="two">
+            <div class="d21">
+                <div class="img2">
+                    <div class="pircute"></div>
+                    <div class="people">2444.0万</div>
+                </div>
+                <div class="font">
+                    催眠：Delta脑波音乐减压深度睡眠
+                </div>
+            </div>
+            <div class="d22">
+                <div class="img6">
+                    <div class="pircute"></div>
+                    <div class="people">2444.0万</div>
+                </div>
+                <div class="font">
+                    催眠：Delta脑波音乐减压深度睡眠
+                </div>
+            </div>
+
+        </div>
+        <div class="three">
+            <div class="d31">
+                <div class="img3">
+                    <div class="pircute"></div>
+                    <div class="people">2444.0万</div>
+                </div>
+                <div class="font">
+                    催眠：Delta脑波音乐减压深度睡眠
+                </div>
+            </div>
+            <div class="d32">
+                <div class="img7">
+                    <div class="pircute"></div>
+                    <div class="people">2444.0万</div>
+                </div>
+                <div class="font">
+                    催眠：Delta脑波音乐减压深度睡眠
+                </div>
+            </div>
+        </div>
+        <div class="four">
+            <div class="d41">
+                <div class="img4">
+                    <div class="pircute"></div>
+                    <div class="people">2444.0万</div>
+                </div>
+                <div class="font">
+                    催眠：Delta脑波音乐减压深度睡眠
+                </div>
+            </div>
+            <div class="d42">
+                <div class="img8">
+                    <div class="pircute"></div>
+                    <div class="people">2444.0万</div>
+                </div>
+                <div class="font">
+                    催眠：Delta脑波音乐减压深度睡眠
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\270\200.html" "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\270\200.html"
new file mode 100644
index 0000000..7cb38a6
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\270\200.html"
@@ -0,0 +1,150 @@
+<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;
+        }
+
+        .subject1,
+        .subject2 {
+            display: flex;
+            justify-content: space-around;
+        }
+
+        .subject2 {
+
+            margin-top: 20px;
+        }
+
+        .box1-1 {
+            width: 150px;
+            height: 200px;
+            position: relative;
+        }
+
+        .box1-1>img {
+            border-radius: 10px;
+        }
+
+        .img {
+            width: 150px;
+            height: 50px;
+            position: absolute;
+            top: 100px;
+            background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0.5) 100%);
+            border-radius: 0px 0px 10px 10px;
+        }
+
+        .img>img {
+            margin-left: 5px;
+            width: 20px;
+            position: absolute;
+            bottom: 6px;
+            left: 5px;
+        }
+
+        .img>span{
+            width: 100px;
+            color: white;
+            position: absolute;
+            bottom: 9px;
+            left: 33px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="bigbox">
+        <div class="subject1">
+            <div class="box">
+                <div class="box1-1">
+                    <img src="../flex-01.jpg" alt="深度睡眠图片">
+                    <div class="img">
+                        <img src="../icon_play.png" alt="深度睡眠图片">
+                        <span>2444.0万</span>
+                    </div>
+                    <span>催眠:Delta脑波音乐减压深度睡眠</span>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box1-1">
+                    <img src="../flex-02.jpg" alt="深度睡眠图片">
+                    <div class="img">
+                        <img src="../icon_play.png" alt="深度睡眠图片">
+                        <span>2444.0万</span>
+                    </div>
+                    <span>催眠:Delta脑波音乐减压深度睡眠</span>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box1-1">
+                    <img src="../flex-03.jpg" alt="深度睡眠图片">
+                    <div class="img">
+                        <img src="../icon_play.png" alt="深度睡眠图片">
+                        <span>2444.0万</span>
+                    </div>
+                    <span>催眠:Delta脑波音乐减压深度睡眠</span>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box1-1">
+                    <img src="../flex-04.jpg" alt="深度睡眠图片">
+                    <div class="img">
+                        <img src="../icon_play.png" alt="深度睡眠图片">
+                        <span>2444.0万</span>
+                    </div>
+                    <span>催眠:Delta脑波音乐减压深度睡眠</span>
+                </div>
+            </div>
+        </div>
+        <div class="subject2">
+            <div class="box">
+                <div class="box1-1">
+                    <img src="../flex-05.jpg" alt="深度睡眠图片">
+                    <div class="img">
+                        <img src="../icon_play.png" alt="深度睡眠图片">
+                        <span>2444.0万</span>
+                    </div>
+                    <span>催眠:Delta脑波音乐减压深度睡眠</span>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box1-1">
+                    <img src="../flex-06.jpg" alt="深度睡眠图片">
+                    <div class="img">
+                        <img src="../icon_play.png" alt="深度睡眠图片">
+                        <span>2444.0万</span>
+                    </div>
+                    <span>催眠:Delta脑波音乐减压深度睡眠</span>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box1-1">
+                    <img src="../flex-07.jpg" alt="深度睡眠图片">
+                    <div class="img">
+                        <img src="../icon_play.png" alt="深度睡眠图片">
+                        <span>2444.0万</span>
+                    </div>
+                    <span>催眠:Delta脑波音乐减压深度睡眠</span>
+                </div>
+            </div>
+            <div class="box">
+                <div class="box1-1">
+                    <img src="../flex-08.jpg" alt="深度睡眠图片">
+                    <div class="img">
+                        <img src="../icon_play.png" alt="深度睡眠图片">
+                        <span>2444.0万</span>
+                    </div>
+                    <span>催眠:Delta脑波音乐减压深度睡眠</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\270\211.html" "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\270\211.html"
new file mode 100644
index 0000000..79ad310
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\270\211.html"
@@ -0,0 +1,150 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        /* * {
+            margin: auto;
+            padding: auto;
+        } */
+        
+      
+        .all
+        {
+            /* width: 885px;
+            height: 800px; */
+            width: 100%;
+            height: 100%;
+            display: flex ;
+            flex-direction: column;
+        }
+
+        .top {
+            /* width: 885px;
+            height: 45px;
+            background-color: aqua;
+            text-align: center; */
+
+            height: 80px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: aqua;
+        }
+        .center
+        {
+            /* width: 885px;
+            height: 700px;
+            background-color: aquamarine;
+            display: flex; */
+
+            width: 100%;
+            height: 100%;
+            display: flex;
+        }
+        .d2{
+            /* width: 20%;
+            height: 700px;
+            flex: 1;
+            background-color: blueviolet; */
+
+            width: 200px;
+            background-color: blueviolet;
+            display: flex;
+            justify-content: center;
+        }
+        .d3
+        {
+            /* width: 60%;
+            height: 700px;
+            flex: 3;
+            background-color: blue;
+            float: left; */
+
+            flex-grow: 1;
+            display: flex;
+            justify-content: center;
+            background-color: blue;
+        }
+        .d4
+         {  /*width: 20%;
+            height: 700px;
+           flex: 1;
+            background-color: brown;
+            float: left; */ 
+
+            width: 200px;
+            background-color: brown;
+            display: flex;
+
+           
+        }
+        .bottom
+        {
+            /* width: 885px;
+            height: 55px;
+            background-color: burlywood; */
+
+            height: 80px;
+            background-color: burlywood;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+      
+        @media screen and (max-width:625px){
+            .center
+            {
+                flex-direction: column;
+            }
+            .d2
+            {
+                width: 100%;
+                height: 200px;
+                background-color: rgb(10, 97, 140);
+                display: flex;
+                justify-content: center;
+              
+                order: 2;
+            }
+            .d3
+            {
+                order: 1;
+               
+            }
+            .d4
+            {
+                display: flex;
+                justify-content: center;
+                order: 3;
+
+                width: 100%;
+                height: 200px;
+
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="all">
+        <div class="top">
+         一天到晚摸鱼
+        </div>
+        <div class="center">
+            <div class="d2">左侧</div>
+            <div class="d3">中间</div>
+            <div class="d4">右侧</div>
+        </div>
+        <div class="bottom">
+           <p>向天再借五百年</p>
+        </div>
+
+
+
+    </div>
+</body>
+
+</html>
diff --git "a/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\272\214.html" "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\272\214.html"
new file mode 100644
index 0000000..663dfa6
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\344\272\214.html"
@@ -0,0 +1,156 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        body{
+            display: flex;
+            justify-content: center;
+        }
+
+        .subject{
+            display: flex;
+            justify-content: center;
+            width: 900px;
+            flex-wrap: wrap;
+        }
+
+        .subject-1{
+            width: 900px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .title-left,.title-right{
+            height: 100px;
+            display: flex;
+            align-items: center;
+        }
+
+        .title-left>span,.title-right>a{
+            margin-left: 20px;
+            
+        }
+
+        .title-left{
+            height: 100px;
+        }
+
+        .title-left>span{
+            font-size: 50px;
+            line-height: 100px;
+        }
+
+        .title-right>a{
+            font-size: 40px;
+            text-decoration: none;
+            color: red;
+            margin-bottom: 5px;
+        }
+
+        .subject-2{
+            margin-bottom: 40px;
+            display: flex;
+        }
+
+        .content-1>img{
+            width: 400px;
+        }
+
+        .content-2{
+            width: 470px;
+            margin-left: 20px;
+        }
+
+        .c1{
+            font-size: 40px;
+        }
+
+        .c2{
+            width: 100px;
+            height: 40px;
+            background-color: rgb(255,192,203,0.4);
+            text-align: center;
+            line-height: 40px;
+            margin-top: 20px;
+            border-radius: 10px;
+            color: red;
+        }
+
+        .c3{
+            display: flex;
+            justify-content: space-between;
+            margin-top: 20px;
+            font-size: 30px;
+            color: gray;
+        }
+    </style>
+</head>
+<body>
+    <div class="subject">
+        <div class="subject-1">
+            <div class="title-left">
+                <img src="./icon-play.png" alt="这是一个播放器">
+                <span>热门视频</span>
+            </div>
+            <div class="title-right">
+                <img src="./icon-sx2.png" alt="这是一个刷新">
+                <a href="#">换一换</a>
+            </div>
+        </div>
+        <div class="subject-2">
+            <div class="content-1">
+                <img src="./toutiao-02.jpeg" alt="fish">
+            </div>
+            <div class="content-2">
+                <div class="c1">无论做什么鱼:最忌讳用料酒和盐腌制</div>
+                <div class="c2">1万评论</div>
+                <div class="c3">
+                    <div>148万次观看</div>
+                    <div>司马南频道</div>
+                </div>
+            </div>
+        </div>
+        <div class="subject-2">
+            <div class="content-1">
+                <img src="./toutiao-02.jpeg" alt="fish">
+            </div>
+            <div class="content-2">
+                <div class="c1">无论做什么鱼:最忌讳用料酒和盐腌制</div>
+                <div class="c2">1万评论</div>
+                <div class="c3">
+                    <div>148万次观看</div>
+                    <div>司马南频道</div>
+                </div>
+            </div>
+        </div>
+        <div class="subject-2">
+            <div class="content-1">
+                <img src="./toutiao-02.jpeg" alt="fish">
+            </div>
+            <div class="content-2">
+                <div class="c1">无论做什么鱼:最忌讳用料酒和盐腌制</div>
+                <div class="c2">1万评论</div>
+                <div class="c3">
+                    <div>148万次观看</div>
+                    <div>司马南频道</div>
+                </div>
+            </div>
+        </div>
+        <div class="subject-2">
+            <div class="content-1">
+                <img src="./toutiao-02.jpeg" alt="fish">
+            </div>
+            <div class="content-2">
+                <div class="c1">无论做什么鱼:最忌讳用料酒和盐腌制</div>
+                <div class="c2">1万评论</div>
+                <div class="c3">
+                    <div>148万次观看</div>
+                    <div>司马南频道</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\345\233\233.html" "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\345\233\233.html"
new file mode 100644
index 0000000..2c1f3f0
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\345\270\203\345\261\200\345\233\233.html"
@@ -0,0 +1,161 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: auto;
+            padding: auto;
+        }
+
+        .all {
+            width: 800px;
+            height: 600px;
+            background-color: pink;
+            margin-top: 50px;
+            border: 2px solid black;
+        }
+
+        .top {
+            width: 760px;
+            height: 120px;
+            background-color: aquamarine;
+            display: flex;
+            margin-top: 20px;
+
+
+        }
+
+        .top1 {
+            width: 460px;
+            height: 120px;
+            display: flex;
+        }
+
+        .t1,
+        .t2,
+        .t3,
+        .t4,
+        .t5 {
+            width: 80px;
+            height: 80px;
+            background-color: #fff;
+            border: 1px solid black;
+
+
+
+        }
+        
+
+        .bottom {
+            width: 760px;
+            height: 420px;
+            background-color: aquamarine;
+            display: flex;
+            margin-top: 20px;
+        }
+
+        .bleft {
+            width: 200px;
+            height: 370px;
+            background-color:transparent;
+            display: flex;
+            flex-direction: column;
+          
+        }
+
+        .b1 {
+            width: 200px;
+            height: 302px;
+            background-color:aqua;
+            display: flex;
+            margin-top: 0;
+        }
+        .b2
+        {
+            width: 200px;
+            height: 50px;
+            display: flex;
+           
+            
+            
+           
+            
+            
+        }
+        .b21
+        {
+            margin-left: 0px;
+        }
+        .b23
+        {
+            margin-right: 0px;
+        }
+        .b21,.b22,.b23
+        {
+            width: 50px;
+            height: 50px;
+            background-color:aqua;
+            
+            justify-content: space-between;
+            
+           
+         
+        }
+        .bright
+        {
+            width: 480px;
+            height: 370px;
+            background-color:transparent;
+            display: flex;
+            flex-direction: column;
+           
+        }
+        .br1,.br2,.br3,.br4,.br5,.br6,.br7
+        {
+            
+            width: 480px;
+            height: 40px;
+            background-color: aqua;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="all">
+        <div class="top">
+            <div class="top1">
+                <div class="t1"></div>
+                <div class="t2"></div>
+                <div class="t3"></div>
+                <div class="t4"></div>
+            </div>
+            <div class="t5"></div>
+            <!-- <div class="t6"></div>
+        <div class="t7"></div> -->
+        </div>
+        <div class="bottom">
+            <div class="bleft">
+                <div class="b1"></div>
+                <div class="b2">
+                    <div class="b21"></div>
+                    <div class="b22"></div>
+                    <div class="b23"></div>
+                </div>
+            </div>
+            <div class="bright">
+                <div class="br1"></div>
+                <div class="br2"></div>
+                <div class="br3"></div>
+                <div class="br4"></div>
+                <div class="br5"></div>
+                <div class="br6"></div>
+                <div class="br7"></div>
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git "a/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\346\220\272\347\250\213.html" "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\346\220\272\347\250\213.html"
new file mode 100644
index 0000000..a404108
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\344\275\234\344\270\232/20241109\346\220\272\347\250\213.html"
@@ -0,0 +1,308 @@
+<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;
+        }
+
+        .top{
+            width: 320px;
+            height: 34px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .t1{
+            width: 270px;
+            height: 20px;
+            border: 1px solid;
+        }
+
+        .t2{
+            width: 30px;
+            height: 30px;
+            border: 1px solid;
+        }
+
+        .banner{
+            width: 320px;
+            height: 65px;
+            border: 1px solid;
+        }
+
+        .icon{
+            width: 320px;
+            height: 60px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .icon [class^="i"]{
+            width: 45px;
+            height: 40px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .icon [class^="i"] .i{
+            width: 30px;
+            height: 25px;
+            border: 1px solid;
+        }
+
+        .icon [class^="i"] .txt{
+            width: 43px;
+            height: 10px;
+            border: 1px solid;
+        }
+        .content{
+            width: 320px;
+            height: 225px;
+            border: 1px solid;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .content [class^="c"]{
+            width: 315px;
+            height: 70px;
+            border: 1px solid;
+            margin-bottom: 5px;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        .c1-1{
+            width: 185px;
+            height: 130px;
+            border: 1px;
+        }
+
+        .c1-2{
+            width: 180px;
+            height: 135px;
+            border: 1px;
+        }
+
+        .c1-3{
+            width: 180px;
+            height: 135px;
+            border: 1px;
+        }
+
+        .wifi{
+            width: 320px;
+            height: 100px;
+            border: 1px solid;
+        }
+
+        .w1{
+            width: 320px;
+            height: 45px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .w1 [class^="n"]{
+            width: 35px;
+            height: 40px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .w1 [class^="n"] .log{
+            width: 30px;
+            height: 25px;
+            border: 1px solid;
+        }
+
+        .w1 [class^="n"] .text{
+            width: 40px;
+            height: 10px;
+            border: 1px solid;
+        }
+
+        .w2{
+            width: 320px;
+            height: 45px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+        }
+
+        .w2 [class^="n"]{
+            width: 35px;
+            height: 40px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-around;
+            align-items: center;
+            flex-direction: column;
+        }
+
+        .w2 [class^="n"] .log{
+            width: 30px;
+            height: 25px;
+            border: 1px solid;
+        }
+
+        .w2 [class^="n"] .text{
+            width: 40px;
+            height: 10px;
+            border: 1px solid;
+        }
+        .act{
+            width: 320px;
+            height: 50px;
+            border: 1px solid;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .left{
+            width: 90px;
+            height: 50px;
+            border: 1px solid;
+        }
+
+        .right{
+            width: 95px;
+            height: 50px;
+            border: 1px solid;
+        }
+        .ad{
+            width: 320px;
+            height: 260px;
+            border: 1px solid;
+        }
+
+        .ad1{
+            width: 290px;
+            height: 205px;
+            border:1px;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="top">
+            <div class="t1"></div>
+            <div class="t2"></div>
+        </div>
+        <div class="banner"></div>
+        <div class="icon">
+            <div class="i1">
+                <div class="i"></div>
+                <div class="txt"></div>
+            </div>
+            <div class="i2">
+                <div class="i"></div>
+                <div class="txt"></div>
+            </div>
+            <div class="i3">
+                <div class="i"></div>
+                <div class="txt"></div>
+            </div>
+            <div class="i4">
+                <div class="i"></div>
+                <div class="txt"></div>
+            </div>
+            <div class="i5">
+                <div class="i"></div>
+                <div class="txt"></div>
+            </div>
+        </div>
+        <div class="content">
+            <div class="c1">
+                <div class="c1-1"></div>
+                <div class="c1-2">
+                    <div class="c1-2-1"></div>
+                    <div class="c1-2-2"></div>
+                </div>
+                <div class="c1-3">
+                    <div class="c1-3-1"></div>
+                    <div class="c1-3-2"></div>
+                </div>
+            </div>
+            <div class="c2"></div>
+            <div class="c3"></div>
+        </div>
+        <div class="wifi">
+            <div class="w1">
+                <div class="n1">
+                    <div class="log"></div>
+                    <div class="text"></div>
+                </div>
+                <div class="n2">
+                    <div class="log"></div>
+                    <div class="text"></div>
+                </div>
+                <div class="n3">
+                    <div class="log"></div>
+                    <div class="text"></div>
+                </div>
+                <div class="n4">
+                    <div class="log"></div>
+                    <div class="text"></div>
+                </div>
+                <div class="n5">
+                    <div class="log"></div>
+                    <div class="text"></div>
+                </div>
+            </div>
+            <div class="w2">
+                <div class="n6">
+                    <div class="log"></div>
+                    <div class="text"></div>
+                </div>
+                <div class="n7">
+                    <div class="log"></div>
+                    <div class="text"></div>
+                </div>
+                <div class="n8">
+                    <div class="log"></div>
+                    <div class="text"></div>
+                </div>
+                <div class="n9">
+                    <div class="log"></div>
+                    <div class="text"></div>
+                </div>
+                <div class="n10">
+                    <div class="log"></div>
+                    <div class="text"></div>
+                </div>
+            </div>
+        </div>
+        <div class="act">
+            <div class="left"></div>
+            <div class="right"></div>
+        </div>
+        <div class="ad">
+            <div class="ad1"></div>
+            <div class="ad2"></div>
+            <div class="ad3"></div>
+            <div class="ad4"></div>
+            <div class="ad5"></div>
+            <div class="ad6"></div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241109.md" "b/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241109.md"
new file mode 100644
index 0000000..e650a47
--- /dev/null
+++ "b/\351\230\231\347\202\234\345\273\267/\350\257\276\345\240\202\347\254\224\350\256\260/20241109.md"
@@ -0,0 +1,28 @@
+## Flex
+
+### flex 布局的优势
+
++ 1、**flex 布局的子元素不会脱离文档流**
+
++ 2、**flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范**
+
+### 概念：弹性盒子、子元素
+
++ **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**
+
++ **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）
+
+### 概念：主轴和侧轴
+
++ 主轴：flex容器的主轴，默认是水平方向，从左向右
+
++ 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下
+
+### align-items 属性
+
+`align-items`：设置子元素在**侧轴上的对齐方式**。属性值可以是：
+    - `flex-start` 从侧轴开始的方向对齐
+    - `flex-end` 从侧轴结束的方向对齐
+    - `baseline` 基线 默认同flex-start
+    - `center` 中间对齐
+    - `stretch` 拉伸
\ No newline at end of file
-- 
Gitee

