From 96ce0471dfa04ac784fd24759f06a4a59930d13b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=93=E6=96=87=E8=90=8D?= <1721629528@qq.com>
Date: Wed, 24 Nov 2021 17:08:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BA=8620211123=E7=9A=84?=
 =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...\346\240\274\345\270\203\345\261\200.html" |  94 ++++++++++
 ...\345\261\200\351\252\260\345\255\220.html" | 177 ++++++++++++++++++
 2 files changed, 271 insertions(+)
 create mode 100644 "\346\230\223\346\226\207\350\220\215/h5+css3\344\275\234\344\270\232/20211123\344\275\234\344\270\232/\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html"
 create mode 100644 "\346\230\223\346\226\207\350\220\215/h5+css3\344\275\234\344\270\232/20211123\344\275\234\344\270\232/\347\275\221\346\240\274\345\270\203\345\261\200\351\252\260\345\255\220.html"
diff --git "a/\346\230\223\346\226\207\350\220\215/h5+css3\344\275\234\344\270\232/20211123\344\275\234\344\270\232/\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html" "b/\346\230\223\346\226\207\350\220\215/h5+css3\344\275\234\344\270\232/20211123\344\275\234\344\270\232/\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html"
new file mode 100644
index 00000000..3d373213
--- /dev/null
+++ "b/\346\230\223\346\226\207\350\220\215/h5+css3\344\275\234\344\270\232/20211123\344\275\234\344\270\232/\345\237\272\346\234\254\347\275\221\346\240\274\345\270\203\345\261\200.html"
@@ -0,0 +1,94 @@
+<!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>
+    div{
+        width: 375px;
+        height: 375px;
+        border: 1px solid black;
+        display: grid;
+        grid-template-rows:75px 75px 75px 150px ;
+    }
+    .box1{
+        background-color: rgb(255, 0,0);
+    }
+    .box2{
+        background-color: rgb(0, 128, 0);
+    }
+    .box3{
+        background-color:rgb(0, 128, 128) ;
+    }
+    .box4{
+        background-color:rgb(255,255,0 );
+    }
+    .box5{
+        background-color:rgb(255,215,0) ;
+    }
+    .box6{
+        background-color:rgb(255,192,203) ;
+    }
+    .box7{
+        background-color:rgb(128,0,128) ;
+    }
+    .box8{
+        background-color:rgb(0,0,255) ;
+    }
+    .box9{
+        background-color:rgb(0, 0, 0) ;
+    }
+    .box10{
+        background-color: rgb(255, 0,0);
+    }
+    .box11{
+        background-color:rgb(0,128,0) ;
+    }
+    span{
+        color: white;
+        font-size: 40px;
+    }
+    .box-top{
+        display: grid;
+        grid-template-columns:50% 50%;
+    }
+    .box-center1{
+        display: grid;
+        grid-template-columns:33.3% 33.3% 33.3%;
+    }
+    .box-center2{
+        display: grid;
+        grid-template-columns:25% 25% 25% 25%;
+    }
+    .box-bottom{
+        display: grid;
+        grid-template-columns:50% 50% 50% 50%;
+    }
+</style>
+<body>
+    <div>
+        <span class="box-top">
+            <span class=" box1">50%</span>
+            <span class="box-top box2">50%</span>
+        </span>
+        <span class="box-center1">
+            <span class=" box3">33%</span>
+            <span class=" box4">33%</span>
+            <span class=" box5">33%</span>  
+        </span>
+        <span class="box-center2">
+            <span class="box-center2 box6">25%</span>
+            <span class="box-center2 box7">25%</span>
+            <span class="box-center2 box8">25%</span>
+            <span class="box-center2 box9">25%</span>
+        </span>  
+        <span class="box-bottom">
+            <span class="box-bottom box10">50%</span>
+            <span class="box-bottom box11">50%</span>
+        </span>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\230\223\346\226\207\350\220\215/h5+css3\344\275\234\344\270\232/20211123\344\275\234\344\270\232/\347\275\221\346\240\274\345\270\203\345\261\200\351\252\260\345\255\220.html" "b/\346\230\223\346\226\207\350\220\215/h5+css3\344\275\234\344\270\232/20211123\344\275\234\344\270\232/\347\275\221\346\240\274\345\270\203\345\261\200\351\252\260\345\255\220.html"
new file mode 100644
index 00000000..dcaf0723
--- /dev/null
+++ "b/\346\230\223\346\226\207\350\220\215/h5+css3\344\275\234\344\270\232/20211123\344\275\234\344\270\232/\347\275\221\346\240\274\345\270\203\345\261\200\351\252\260\345\255\220.html"
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        .container{
+            width: 640px;
+            height: 340px;
+            border: 1px solid #A8A8A8;
+            margin: auto;
+        }
+        .top{
+            margin: 40px 0px 0px 40px;
+            display: grid;
+            grid-row-gap:40px;
+            grid-column-gap:40px; 
+            grid-template-columns: 110px 110px 110px 110px; 
+            grid-template-rows: 110px ;
+        }
+        .bottom{
+            margin: 40px 0px 0px 120px;
+            display: grid;
+            grid-row-gap:40px;
+            grid-column-gap:40px; 
+            grid-template-columns: 110px 110px 110px; 
+            grid-template-rows: 110px;
+        }
+        .box{
+            /* padding: 5px; */
+            display: grid;
+            grid-template-rows: repeat(3,1fr);
+            grid-template-columns: repeat(3,1fr);
+            grid-template-areas: 'a b c'
+                                 'd e f'
+                                 'g h i';
+            height: 100px;
+            width: 100px;
+            background-color: #E7E7E7;
+            border-radius: 10%;
+            box-shadow: 0px 5px  #D8D8D8;
+        }
+        .item{
+            margin-top: 4px;
+            margin-left: 4px;
+            display: block;
+            width: 25px;
+            height: 22px;
+            border-radius: 50%;
+            background-color: #343434;
+            border-bottom: 3px solid #585858;
+        }
+        .box1>.item{
+            grid-area: e;
+        }
+        .box2>.item:nth-child(1){
+            place-self: a;
+        }
+        .box2>.item:nth-child(2){
+            grid-area: i;
+        }
+        .box3>.item:nth-child(1){
+            grid-area: a;
+        }
+        .box3>.item:nth-child(2){
+            grid-area: e;
+        }
+        .box3>.item:nth-child(3){
+            grid-area: i;
+        }
+        /* 'a b c'
+           'd e f'
+           'g h i'; */
+        .box4>.item:nth-child(1){
+            grid-area: a;
+        }
+        .box4>.item:nth-child(2){
+            grid-area: c;
+        }
+        .box4>.item:nth-child(3){
+            grid-area: g;
+        }
+        .box4>.item:nth-child(4){
+            grid-area: i;
+        }
+        .box5>.item:nth-child(1){
+            grid-area: a;
+        }
+        .box5>.item:nth-child(2){
+            grid-area: c;
+        }
+        .box5>.item:nth-child(3){
+            grid-area: g;
+        }
+        .box5>.item:nth-child(4){
+            grid-area: i;
+        }
+        .box5>.item:nth-child(5){
+            grid-area: e;
+        }
+        .box6>.item:nth-child(1){
+            grid-area: a;
+        }
+        .box6>.item:nth-child(2){
+            grid-area: d;
+        }
+        .box6>.item:nth-child(3){
+            grid-area: g;
+        }
+        .box6>.item:nth-child(4){
+            grid-area: c;
+        }
+        .box6>.item:nth-child(5){
+            grid-area: f;
+        }
+        .box6>.item:nth-child(6){
+            grid-area: i;
+        }
+        .box9{
+        place-items: center ;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="top">
+            <div class="box box1">
+                <span class="item"></span>
+            </div>
+            <div class="box box2">
+                <span class="item"></span>
+                <span class="item"></span>
+            </div>
+            <div class="box box3">
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+            </div>
+            <div class="box box4">
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="box box5">
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+            </div>
+            <div class="box box6">
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+            </div>
+            <div class="box box9">
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

