From c43b80993dd857faf82c515ecd67d89cb49a4b69 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E5=BF=83=E9=92=B0?= <3486274891@qq.com>
Date: Mon, 29 Nov 2021 13:00:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A411.24~11.26=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../flex.html"                                |  11 +
 .../\351\252\260\345\255\220.html"            | 235 ++++++++++++++++++
 .../\347\275\221\346\240\274.html"            |  62 +++++
 .../\351\252\260\345\255\220.html"            | 214 ++++++++++++++++
 .../\346\227\266\351\222\237.html"            |  65 +++++
 5 files changed, 587 insertions(+)
 create mode 100644 "\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/flex.html"
 create mode 100644 "\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/\351\252\260\345\255\220.html"
 create mode 100644 "\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\347\275\221\346\240\274.html"
 create mode 100644 "\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\351\252\260\345\255\220.html"
 create mode 100644 "\351\273\204\345\277\203\351\222\260/2021.11.26 CSS3\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273_09/\346\227\266\351\222\237.html"
diff --git "a/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/flex.html" "b/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/flex.html"
new file mode 100644
index 0000000..d01f779
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/flex.html"
@@ -0,0 +1,11 @@
+<!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>
+<body>
+    
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/\351\252\260\345\255\220.html" "b/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/\351\252\260\345\255\220.html"
new file mode 100644
index 0000000..7fa3df5
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.11.24\345\274\271\346\200\247\347\233\222\345\255\220/\351\252\260\345\255\220.html"
@@ -0,0 +1,235 @@
+<!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>
+         body{
+            background-color:aliceblue;
+        }
+        /* 点 */
+        .item{
+            width:24px;
+            height: 24px;
+            border-radius: 50%;
+            margin:4px;
+            background-color: #333;
+            /* box-shadow: 5px 5px rgb(153, 153, 153); */
+            /* flex-basis: 50%;
+            justify-content: space-between;
+            display: flex; */
+        }
+
+        /* 第一个骰子 */
+       
+        .box1{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;  /*阴影*/
+            display: flex;
+            justify-content: center; /*居中*/
+            align-items: center; /*垂直居中对齐*/
+
+        }
+       
+
+        /*第二个骰子  */
+        .box2{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+            display: flex;
+            justify-content: space-between; /*两端对齐。between是中间的意思*/
+        }
+
+        .box2 .item:nth-child(2){
+            align-self: flex-end;
+        }
+
+        /* 第三个骰子 */
+        .box3{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+            display: flex;
+            justify-content: space-between;  /*两端对齐。between是中间的意思*/
+        }
+
+        .item:nth-child(2){
+            align-self: center;
+        }
+        .item:nth-child(3){
+            align-self: flex-end;
+        }
+
+        /* 第四个骰子 */
+        .box4{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+            display: flex;
+            justify-content: space-around;
+           
+        }
+        .box4-top{
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+            
+        }
+        .box4-buttom{
+            display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+        }
+        <!--  /* 第五个骰子 */ -->
+        .box5{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+           align-content: space-between;
+           display: flex;
+        }
+        .box5-top{
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+            
+        }
+        .box5-center{
+            align-self: center;
+        }
+        .box5-buttom{
+            display: flex;
+                flex-direction: column;
+                justify-content: space-around;
+        }
+
+
+        <!--  /* 第六个骰子 */ -->
+        .box6{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;/*宽度不足时，换行显示。但是是从下往上开始，原本换行在下面的子项仙子啊跑到上面。*/
+            align-content: space-between;
+            flex-direction: column;
+        }
+
+        <!--  /* 第九个骰子 */ -->
+        .box9{
+            background-color:#f1eeee;
+            margin:16px;
+            padding:4px;
+            width:104px;
+            height: 104px;
+            border-radius: 10%;
+            box-shadow: -5px -5px 5px white;
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;/*宽度不足时，换行显示。但是是从下往上开始，原本换行在下面的子项仙子啊跑到上面。*/
+            align-content: space-between;
+            flex-direction: column;
+        }
+          
+    </style>
+</head>
+<body>
+    <!--  /* 第一个骰子 */ -->
+    <div class="">
+    <div class="box1">
+        <div class="item"></div>
+    </div>
+
+    <!--  /* 第二个骰子 */ -->
+    <div class="box2">
+        <div class="item"></div>
+        <div class="item"></div>
+    </div>
+
+    <!--  /* 第三个骰子 */ -->
+    <div class="box3">
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+    </div>
+
+    <!--  /* 第四个骰子 */ -->
+    <div class="box4">
+        <div class="box4-top"> 
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>    
+        <div class="box4-buttom"> 
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+    </div>
+
+    <!--  /* 第五个骰子 */ -->
+    <div class="box5">
+        <div class="box5-top"> 
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+        <div class="box5-center">
+            <div class="item"></div>
+        </div>    
+        <div class="box5-buttom"> 
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+    </div>
+
+    <!--  /* 第六个骰子 */ -->
+    <div class="box6">
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+    </div>
+
+    <!--  /* 第九个骰子 */ -->
+    <div class="box9">
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+        <div class="item"></div>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\347\275\221\346\240\274.html" "b/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\347\275\221\346\240\274.html"
new file mode 100644
index 0000000..13f6ecd
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\347\275\221\346\240\274.html"	
@@ -0,0 +1,62 @@
+<!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>
+        *{
+            padding: 0;
+            margin: 0;
+            font-size: 50px;
+            color: #fff;
+        }
+        .couten{
+            display: grid;
+            width: 600px;
+            height: 700px;
+            background-color: #f2f2f2;
+        }
+        .one{
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }
+        .two{
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+        .three{
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+        }
+        .four{
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+        }
+    </style>
+  
+</head>
+<body>
+    <div class="couten">
+        <div class="one">
+            <div style="background-color: red;">50%</div>
+            <div style="background-color: green;">50%</div>
+        </div>
+        <div class="two">
+            <div style="background-color: yellow;">33%</div>
+            <div style="background-color: brown;">33%</div>
+            <div style="background-color: blue;">33%</div>
+        </div>
+        <div class="three">
+            <div style="background-color: skyblue;">25%</div>
+            <div style="background-color: pink;">25%</div>
+            <div style="background-color: plum;">25%</div>
+            <div style="background-color: purple;">25%</div>
+        </div>
+        <div class="four">
+            <div style="background-color: orange;">50%</div>
+            <div style="background-color: royalblue;">50%</div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\351\252\260\345\255\220.html" "b/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\351\252\260\345\255\220.html"
new file mode 100644
index 0000000..77f709b
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.11.25 CSS3grid\347\275\221\346\240\274\345\270\203\345\261\200/\351\252\260\345\255\220.html"	
@@ -0,0 +1,214 @@
+<!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>
+    <style>
+        .item{
+            width: 20px;
+            height: 20px;
+            background-color:black;
+            border-radius: 50%;
+            margin: 5px;
+            align-items: center;
+            justify-items: center;
+       }
+        .box1{
+            border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i";
+            margin: 2px;
+        }
+        .box1 div{
+            grid-area: e;
+        }
+       .box2{
+        border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i";
+            margin: 2px;
+        }
+        .box2 div:nth-of-type(2){
+            grid-area: i;
+        }
+
+        .box3{
+            border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            margin: 2px;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i";
+           
+        }
+        .box3 div:nth-of-type(2){
+            grid-area: e;
+        }
+        .box3 div:nth-of-type(3){
+            grid-area: i;
+        }
+
+        .box4{
+            border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            margin: 2px;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i"; 
+        }
+        .box4 div:nth-of-type(2){
+            grid-area: c;
+            
+        }
+        .box4 div:nth-of-type(3){
+            grid-area: g;  
+        }
+        .box4 div:nth-of-type(4){
+            grid-area: i;  
+        }
+
+        .box5{
+            border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            margin: 2px;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i"; 
+        }
+        .box5 div:nth-of-type(2){
+            grid-area: c;
+            
+        }
+        .box5 div:nth-of-type(3){
+            grid-area: e;  
+        }
+        .box5 div:nth-of-type(4){
+            grid-area: g;  
+        }
+        .box5 div:nth-of-type(5){
+            grid-area: i;  
+        }
+
+        .box6{
+            border: 1px solid black;
+            width: 100px;
+            height: 100px;
+            border-radius: 10px;
+            background: pink;
+            margin: 2px;
+            display: grid;
+            grid-template-columns:repeat(3 , 1fr) ;
+            grid-template-rows: repeat(3 , 1fr);
+            grid-template-areas: 
+            "a b c"
+            "d e f"
+            "g h i"; 
+        }
+        .box6 div:nth-of-type(2){
+            grid-area: c;
+            
+        }
+        .box6 div:nth-of-type(3){
+            grid-area: d;  
+        }
+        .box6 div:nth-of-type(4){
+            grid-area: f;  
+        }
+        .box6 div:nth-of-type(5){
+            grid-area: g;  
+        }
+        .box6 div:nth-of-type(6){
+            grid-area: i;  
+        }
+    </style>
+</head>
+<body>
+    <div class="">
+        <div class="box1">
+            <div class="item"></div>
+        </div>
+    
+        <!--  /* 第二个骰子 */ -->
+        <div class="box2">
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+    
+        <!--  /* 第三个骰子 */ -->
+        <div class="box3">
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+    
+        <!--  /* 第四个骰子 */ -->
+        <div class="box4">
+                <div class="item"></div>
+                <div class="item"></div>
+                <div class="item"></div>
+                <div class="item"></div>
+        </div>
+    
+        <!--  /* 第五个骰子 */ -->
+        <div class="box5">
+                <div class="item"></div>
+                <div class="item"></div>
+                <div class="item"></div> 
+                <div class="item"></div>
+                <div class="item"></div>
+        </div>
+    
+        <!--  /* 第六个骰子 */ -->
+        <div class="box6">
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+            <div class="item"></div>
+        </div>
+    
+    </div> 
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\345\277\203\351\222\260/2021.11.26 CSS3\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273_09/\346\227\266\351\222\237.html" "b/\351\273\204\345\277\203\351\222\260/2021.11.26 CSS3\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273_09/\346\227\266\351\222\237.html"
new file mode 100644
index 0000000..4b14e73
--- /dev/null
+++ "b/\351\273\204\345\277\203\351\222\260/2021.11.26 CSS3\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273_09/\346\227\266\351\222\237.html"	
@@ -0,0 +1,65 @@
+<!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>
+    <style>
+        .clock{
+            width: 300px;
+            height: 300px;
+            border-radius: 50%;
+            margin: 10px auto;
+            position: absolute;
+            border: 1px solid black;
+        }
+        .d{
+            width: 30px;
+            height: 30px;
+            background-color: pink;
+            border-radius: 50px;
+            position: absolute;
+            transform: translate(130px,130px);
+        }
+        .x{
+            width: 10px;
+            height: 50px;
+            background-color: blue;
+            position: absolute;
+            transform: translate(140px,145px);
+        }
+        .f{
+            width: 6px;
+            height: 80px;
+            background-color: bisque;
+            position: absolute;
+            transform: translate(140px,145px);
+        }
+        .m{
+            width: 2px;
+            height: 100px;
+            background-color: beige;
+            position: absolute;
+            left: 145px;
+            top: 50px;
+            transform-origin: bottom;
+            animation: mz 60s steps(60) infinite;
+        }
+        @keyframes mz{
+            from{}
+            to{
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="clock">
+        <div class=" d"></div>
+        <div class="x"></div>
+        <div class="f"></div>
+        <div class="m"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

