From 86d039d2d5a0531b3760b1a76e71693eb4a28c77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B5=E4=B8=96=E9=91=AB?= <2575692094@qq.com>
Date: Wed, 24 Nov 2021 22:03:05 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E2=80=9C11.24=E2=80=9D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\347\255\233\345\255\220.html"            | 207 ++++++++++++++++++
 1 file changed, 207 insertions(+)
 create mode 100644 "11.24\344\275\234\344\270\232/\347\255\233\345\255\220.html"
diff --git "a/11.24\344\275\234\344\270\232/\347\255\233\345\255\220.html" "b/11.24\344\275\234\344\270\232/\347\255\233\345\255\220.html"
new file mode 100644
index 0000000..5ef4170
--- /dev/null
+++ "b/11.24\344\275\234\344\270\232/\347\255\233\345\255\220.html"
@@ -0,0 +1,207 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .container{
+        display: flex;
+        justify-content: space-evenly;
+    }
+    .item{
+        background-color: #E7E7E7;
+        height: 100px;
+        width: 100px;
+        border-radius: 10px;
+        box-shadow: 0px 5px 2px #D7D7D7;
+        display:  inline-flex ;
+        justify-content: center;
+        
+    }
+    .circular{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+        align-self: center;
+      
+    }
+    .item2{
+        background-color: #E7E7E7;
+        height: 100px;
+        width: 100px;
+        border-radius: 10px;
+        box-shadow: 0px 5px 2px #D7D7D7;
+        display:  inline-flex ;
+        justify-content: space-between;
+    }
+    .circular1{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+        align-self: flex-start;
+    }
+    .circular2{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+        align-self: flex-end;
+    }
+    .item3{
+        background-color: #E7E7E7;
+        height: 100px;
+        width: 100px;
+        border-radius: 10px;
+        box-shadow: 0px 5px 2px #D7D7D7;
+        display:  inline-flex ;
+        justify-content: space-between;
+    }
+    .circular3{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+       
+    }
+    .circular4{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+        align-self: center;
+    }
+    .circular5{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+        align-self: flex-end;
+    }
+    .item4{
+        background-color: #E7E7E7;
+        height: 100px;
+        width: 100px;
+        border-radius: 10px;
+        box-shadow: 0px 5px 2px #D7D7D7;
+        display:  inline-flex ;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+    .circular6{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+       
+
+    }
+    .circular7{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+        align-self:flex-end;
+        
+    }
+    .circular8{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+        
+    
+        
+    }
+    .circular9{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+        
+       
+    }
+    .c{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+    .item5{
+        background-color: #E7E7E7;
+        height: 100px;
+        width: 100px;
+        border-radius: 10px;
+        box-shadow: 0px 5px 2px #D7D7D7;
+        display:  inline-flex ;
+        flex-wrap: wrap;
+        justify-content: space-between;
+    }
+    .circular10{
+        background-color:#333333;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%; 
+        align-self: center;
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="item"> <div class="circular"></div></div>
+        <div class="item2"><div class="circular1"></div><div class="circular2"></div></div>
+        <div class="item3"><div class="circular3"></div><div class="circular4"></div><div class="circular5"></div></div>
+        <div class="item4">
+        <div class="c">
+            <div class="circular6"></div>
+            <div class="circular7"></div>
+        </div>
+        <div class="c">
+            <div class="circular8"></div>
+            <div class="circular9"></div>
+        </div>
+        </div >
+        <div class="item5">
+            <div class="c">
+                <div class="circular6"></div>
+                <div class="circular7"></div>
+                
+            </div>
+            <div class="circular10"></div>
+            <div class="c">
+                <div class="circular8"></div>
+                <div class="circular9"></div>
+            
+        </div></div>
+        <div class="item4">
+            <div class="c">
+                <div class="circular6"></div>
+                <div class="circular7"></div>
+                <div class="circular7"></div>
+            </div>
+            <div class="c">
+                <div class="circular8"></div>
+                <div class="circular9"></div>
+                <div class="circular7"></div>
+            </div>
+        </div>
+        <div class="item4">
+            <div class="c">
+                <div class="circular6"></div>
+                <div class="circular7"></div>
+                <div class="circular7"></div>
+                <div class="circular7"></div>
+            </div>
+            <div class="c">
+                <div class="circular8"></div>
+                <div class="circular9"></div>
+                <div class="circular7"></div>
+                <div class="circular7"></div>
+            </div>
+        </div>
+    </div>
+    </div>
+
+</body>
+</html>
\ No newline at end of file
-- 
Gitee


From bf9b39862858612741aade485395cb7b3a9b8309 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=B5=E4=B8=96=E9=91=AB?= <2575692094@qq.com>
Date: Fri, 26 Nov 2021 00:16:06 +0800
Subject: [PATCH 2/2] =?UTF-8?q?11.25=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../\347\255\233\345\255\220.html"            |   0
 ...\346\240\274\345\270\203\345\261\200.html" | 131 ++++++++++++++++++
 ...\346\240\274\347\255\233\345\255\220.html" | 121 ++++++++++++++++
 3 files changed, 252 insertions(+)
 rename "11.24\344\275\234\344\270\232/\347\255\233\345\255\220.html" => "\351\202\265\344\270\226\351\221\253/11.24\345\274\271\346\200\247\347\233\222\345\255\220\344\275\234\344\270\232/\347\255\233\345\255\220.html" (100%)
 create mode 100644 "\351\202\265\344\270\226\351\221\253/11.25\347\275\221\346\240\274\345\270\203\345\261\200grid\344\275\234\344\270\232/\345\256\236\347\216\260\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html"
 create mode 100644 "\351\202\265\344\270\226\351\221\253/11.25\347\275\221\346\240\274\345\270\203\345\261\200grid\344\275\234\344\270\232/\347\275\221\346\240\274\347\255\233\345\255\220.html"

diff --git "a/11.24\344\275\234\344\270\232/\347\255\233\345\255\220.html" "b/\351\202\265\344\270\226\351\221\253/11.24\345\274\271\346\200\247\347\233\222\345\255\220\344\275\234\344\270\232/\347\255\233\345\255\220.html"
similarity index 100%
rename from "11.24\344\275\234\344\270\232/\347\255\233\345\255\220.html"
rename to "\351\202\265\344\270\226\351\221\253/11.24\345\274\271\346\200\247\347\233\222\345\255\220\344\275\234\344\270\232/\347\255\233\345\255\220.html"
diff --git "a/\351\202\265\344\270\226\351\221\253/11.25\347\275\221\346\240\274\345\270\203\345\261\200grid\344\275\234\344\270\232/\345\256\236\347\216\260\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html" "b/\351\202\265\344\270\226\351\221\253/11.25\347\275\221\346\240\274\345\270\203\345\261\200grid\344\275\234\344\270\232/\345\256\236\347\216\260\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html"
new file mode 100644
index 0000000..d9646b5
--- /dev/null
+++ "b/\351\202\265\344\270\226\351\221\253/11.25\347\275\221\346\240\274\345\270\203\345\261\200grid\344\275\234\344\270\232/\345\256\236\347\216\260\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html"
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .contain{
+        display:grid;
+        width: 400px;
+        height: 400px;
+        /* 每行的比例 */
+        grid-template-rows: 20% 20% 60%;
+    }
+
+    .item50 {
+        display: grid;
+        /* 将列等分为两部分2x50% */
+        grid-template-columns: repeat(2,1fr);
+    }
+
+    .item33 {
+        display: grid;
+         /* 将列等分为三部分3x33% */
+        grid-template-columns: repeat(3,1fr);
+    }
+
+    .item25 {
+        display: grid;
+        /* 将列等分为四部分4x25%   */
+        grid-template-columns: repeat(4,1fr);
+        /* 将行等分为三部分2x30%   */
+        grid-template-rows: repeat(3,1fr);
+    
+    
+        grid-template-areas: 'a b c d'
+                             'A A C C'
+                             'A A C C';
+    }
+
+    .item1 {
+        background-color: red;
+        color: white;
+        font-size: 3em;
+       
+    }
+
+    .item2 {
+        background-color: green;
+        color: white;
+        font-size: 3em;
+    }
+    .item3 {
+        background-color: lightgreen;
+        color: white;
+        font-size: 3em;
+    }
+    .item4 {
+        background-color: yellow;
+        color: white;
+        font-size: 3em;
+    }
+    .item5 {
+        background-color: orange;
+        color: white;
+        font-size: 3em;
+        
+    }
+    .item6 {
+        background-color: pink;
+        color: white;
+        font-size: 3em;
+        grid-area: a;
+    }
+    .item7 {
+        background-color: purple;
+        color: white;
+        font-size: 3em;
+        grid-area: b;
+    }
+    .item8 {
+        background-color: blue;
+        color: white;
+        font-size: 3em;
+        grid-area: c;
+    }
+    .item9 {
+        background-color: black;
+        color: white;
+        font-size: 3em;
+        grid-area: d;
+    }
+    .item10{
+        background-color: red;
+        color: white;
+        font-size: 3em;
+        grid-area: A;
+    }
+    .item11 {
+        background-color: green;
+        color: white;
+        font-size: 3em;
+        grid-area: C;
+    }
+</style>
+
+<body>
+    <div class="contain">
+        <div class="item50">
+            <div class="item1">50%</div>
+            <div class="item2">50%</div>
+        </div>
+        <div class="item33">
+            <div class="item3">33%</div>
+            <div class="item4">33%</div>
+            <div class="item5">33%</div>
+        </div>
+        <div class="item25">
+            <div class="item6">25%</div>
+            <div class="item7">25%</div>
+            <div class="item8">25%</div>
+            <div class="item9">25%</div>
+            <div class="item10">50%</div>
+            <div class="item11">50%</div>    
+        </div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\202\265\344\270\226\351\221\253/11.25\347\275\221\346\240\274\345\270\203\345\261\200grid\344\275\234\344\270\232/\347\275\221\346\240\274\347\255\233\345\255\220.html" "b/\351\202\265\344\270\226\351\221\253/11.25\347\275\221\346\240\274\345\270\203\345\261\200grid\344\275\234\344\270\232/\347\275\221\346\240\274\347\255\233\345\255\220.html"
new file mode 100644
index 0000000..8e48fde
--- /dev/null
+++ "b/\351\202\265\344\270\226\351\221\253/11.25\347\275\221\346\240\274\345\270\203\345\261\200grid\344\275\234\344\270\232/\347\275\221\346\240\274\347\255\233\345\255\220.html"
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<style>
+    .container {
+        display: grid;
+        width: 600px;
+        height: 300px;
+        background-color:#eee;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+       
+
+    }
+
+    #item {
+        /* border: 1px solid black; */
+        width: 100px;
+        height: 100px;
+        background-color: pink;
+        display: grid;
+        grid-template-columns: repeat(3, 33.33%);
+        grid-template-rows: repeat(3, 33.33%);
+        border-radius: 10px;
+
+    }
+    #d1{    
+        display: grid;
+        justify-self: center;
+    }
+</style>
+
+<body>
+    <div class="container">
+        <div id="item">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+        </div>
+        <div id="item">
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+        </div>
+        <div id="item">
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+        </div>
+        <div id="item">
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+        </div>
+        <div id="item">
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; " ></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+        </div>
+        <div id="item">
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div ></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+        </div>
+        <div id="item">
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+            <div id="d1" style="width: 20px;height: 20px;border-radius: 50%;background-color: black; align-self: center; "></div>
+        </div>
+
+    </div>
+</body>
+
+</html>
\ No newline at end of file
-- 
Gitee

