From 11608510f3e96a4dc7c986fcb0dbdb05827f5c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=97=E6=8C=AF=E6=B3=A2?= <1711489108@qq.com>
Date: Mon, 29 Nov 2021 11:05:59 +0800
Subject: [PATCH] tiaoj

---
 .../dima.html"                                | 176 ++++++++++++++++++
 .../01\346\227\266\351\222\237.html"          | 119 ++++++++++++
 ...\345\244\252\346\236\201\345\233\276.html" |  60 ++++++
 ...\345\244\252\346\236\201\345\233\276.html" |  60 ++++++
 .../.html"                                    | 118 ++++++++++++
 5 files changed, 533 insertions(+)
 create mode 100644 "\344\275\234\344\270\232/11.24\345\274\271\346\200\247\347\233\222\345\255\220/dima.html"
 create mode 100644 "\344\275\234\344\270\232/11.26\350\275\254\346\215\242\350\267\237\345\212\250\347\224\273/01\346\227\266\351\222\237.html"
 create mode 100644 "\344\275\234\344\270\232/11.26\350\275\254\346\215\242\350\267\237\345\212\250\347\224\273/\345\244\252\346\236\201\345\233\276.html"
 create mode 100644 "\344\275\234\344\270\232/\345\244\252\346\236\201\345\233\276/\345\244\252\346\236\201\345\233\276.html"
 create mode 100644 "\344\275\234\344\270\232/\347\275\221\346\240\274\345\270\203\345\261\200/.html"
diff --git "a/\344\275\234\344\270\232/11.24\345\274\271\346\200\247\347\233\222\345\255\220/dima.html" "b/\344\275\234\344\270\232/11.24\345\274\271\346\200\247\347\233\222\345\255\220/dima.html"
new file mode 100644
index 0000000..0c700f5
--- /dev/null
+++ "b/\344\275\234\344\270\232/11.24\345\274\271\346\200\247\347\233\222\345\255\220/dima.html"
@@ -0,0 +1,176 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <style>
+        .shaizi {
+            width: 1400px;
+            height: 600px;
+            margin: auto;
+            border: 2px solid #ddd;
+            border-radius: 10px;
+            padding: 20px;
+            display: flex;
+            flex-wrap: wrap;
+           
+            /* flex-direction: column;; */
+        }
+        .item {
+            display: block;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #666;
+    
+        }
+        .box{
+            width: 200px;
+            height: 200px;
+            background:gainsboro;
+            border: 2px solid dimgrey;
+            box-shadow: 0px 6px 6px grey;
+            border-radius: 10px;
+            padding: 20px;
+            display: flex;
+        }
+        .top {
+            display: flex;
+            width: 1400px;
+            justify-content: space-around;
+        }
+        .bottom{
+            display: flex;
+            width: 1400px;
+            justify-content: space-around;
+        }
+        .box1 {
+            justify-content: center;
+            align-items: center;
+        }
+        .box2 {
+            justify-content: space-between;
+            align-items: center;
+        }
+        .box3 {
+            justify-content: space-between;
+            /* 两端对齐 */
+        }
+        .box3 .item:nth-child(2) {
+            align-self: center;
+            /* 上下左右居中对齐 */
+        }
+        .box3 .item:nth-child(3) {
+            align-self: flex-end;
+            /* 尾对齐 */
+        }
+        .box4 {
+             flex-direction: column;
+             justify-content: space-between;
+        }
+        .box4_top{
+            width: 200px;
+            height: 100px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .box4_buttom{
+            width: 200px;
+            height: 100px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .box5{
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .box5_top{
+            display: flex;
+            justify-content: space-between;
+        }
+        .box5_center{
+            display: flex;
+            justify-content: center;
+        }
+        .box5_buttom{
+            display: flex;
+            justify-content: space-between;
+        }
+        .box6{
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .box6_top{
+            display: flex;
+            justify-content: space-between;
+        }
+        .box6_center{
+            display: flex;
+            justify-content: space-between;
+        }
+        .box6_buttom{
+            display: flex;
+            justify-content: space-between;
+        }
+    </style>
+    <title>Document</title>
+</head>
+<body>
+    <div class="shaizi">
+        <div class="top">
+            <div class="box1 box">
+                <span class="item"></span>
+            </div>
+            <div class="box2 box">
+                <span class="item"></span>
+                <span class="item"></span>
+            </div>
+            <div class="box3 box">
+                <span class="item"></span>
+                <span class="item"></span>
+                <span class="item"></span>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="box4 box">
+                <div class="box4_top">
+                    <span class="item"></span>
+                    <span class="item"></span>
+                </div>
+                <div class="box4_buttom">
+                    <span class="item"></span>
+                    <span class="item"></span>
+                </div>
+            </div>
+            <div class="box5 box">
+                <div class="box5_top">
+                    <span class="item"></span>
+                    <span class="item"></span>
+                </div>
+                <div class="box5_center">
+                    <span class="item"></span>
+                </div>
+                <div class="box5_buttom">
+                    <span class="item"></span>
+                    <span class="item"></span>
+                </div>
+            </div>
+            <div class="box6 box">
+                <div class="box6_top">
+                    <span class="item"></span>
+                    <span class="item"></span>
+                </div>
+                <div class="box6_center">
+                    <span class="item"></span>
+                    <span class="item"></span>
+                </div>
+                <div class="box6_buttom">
+                    <span class="item"></span>
+                    <span class="item"></span>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/11.26\350\275\254\346\215\242\350\267\237\345\212\250\347\224\273/01\346\227\266\351\222\237.html" "b/\344\275\234\344\270\232/11.26\350\275\254\346\215\242\350\267\237\345\212\250\347\224\273/01\346\227\266\351\222\237.html"
new file mode 100644
index 0000000..802d196
--- /dev/null
+++ "b/\344\275\234\344\270\232/11.26\350\275\254\346\215\242\350\267\237\345\212\250\347\224\273/01\346\227\266\351\222\237.html"
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+	</head>
+	<body>
+	</body>
+</html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>时钟</title>
+        <style type="text/css">
+            .screen{
+              width: 400px;
+              height: 400px;
+              border-radius: 50%;
+              border: 3px solid black;
+              margin: 200px auto;
+              position: relative;
+            }
+            .line{
+              width: 3px;
+              height: 400px;
+              background-color: #333333;
+              position: absolute;
+              left: 200px;
+            }
+            .line:nth-child(2){
+              transform: rotateZ(30deg);
+            }
+            .line:nth-child(3){
+        transform: rotateZ(60deg);
+      }
+      .line:nth-child(4){
+        transform: rotateZ(90deg);
+      }
+      .line:nth-child(5){
+        transform: rotateZ(120deg);
+      }
+      .line:nth-child(6){
+        transform: rotateZ(150deg);
+      }
+      .cover{
+        width: 380px;
+        height: 380px;
+        border-radius: 50%;
+        position: absolute;
+        left: 10px;
+        top: 10px;
+        background-color: #fff;
+      }
+      .hour{
+        width: 8px;
+        height: 80px;
+        background-color: #000000;
+        position: absolute;
+        top: 120px;
+        left: 196px;
+        transform-origin: bottom;
+        animation: spin 43200s linear infinite;
+      }
+      .min{
+        width: 6px;
+        height: 120px;
+        background-color:black;
+        position: absolute;
+        top: 80px;
+        left: 197px;
+        transform-origin: bottom;
+        animation: spin 3600s linear infinite;
+      }
+      .second{
+        width: 4px;
+        height: 150px;
+        background-color: black;
+        position: absolute;
+        top: 50px;
+        left: 198px;
+        transform-origin: bottom;
+        animation: spin 60s linear infinite;
+        animation-timing-function: steps(60);
+      }
+      .center{
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background-color: black;
+        position: absolute;
+        top: 180px;
+        left: 180px;
+      }
+      @keyframes spin{
+          from{
+            transform: rotateZ(0deg);
+          }
+          to{
+            transform: rotateZ(360deg);
+          }
+      }
+        </style>
+    </head>
+    <body>
+      <div class="screen">
+        <div class="line"></div>
+        <div class="line"></div>
+        <div class="line"></div>
+        <div class="line"></div>
+        <div class="line"></div>
+        <div class="line"></div>
+        <div class="cover"></div>
+        <div class="second"></div>
+        <div class="min"></div>
+        <div class="hour"></div>
+        <div class="center"></div>
+      </div>
+    </body>
+</html>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/11.26\350\275\254\346\215\242\350\267\237\345\212\250\347\224\273/\345\244\252\346\236\201\345\233\276.html" "b/\344\275\234\344\270\232/11.26\350\275\254\346\215\242\350\267\237\345\212\250\347\224\273/\345\244\252\346\236\201\345\233\276.html"
new file mode 100644
index 0000000..4fcd6a2
--- /dev/null
+++ "b/\344\275\234\344\270\232/11.26\350\275\254\346\215\242\350\267\237\345\212\250\347\224\273/\345\244\252\346\236\201\345\233\276.html"
@@ -0,0 +1,60 @@
+<!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>
+        *{
+            margin: 0;
+            padding: 0;
+          
+        }
+       body{
+           background: gray;
+       }
+       div{
+           margin: 200px auto 0;
+           width: 0;
+           height: 400px;
+           border-left: 200px solid #000;
+           border-right:200px solid #fff ;
+           border-radius: 50%;
+           animation:rotate 2s linear infinite;
+       }
+       div:before{
+            content: "";
+            display: block;
+            width: 200px;
+            height: 200px;
+            border: 80px solid #000;
+            background: #fff;
+            margin-left: -100px;
+            border-radius: 50%;
+            box-sizing: border-box;
+            }
+            div:after{
+            content: "";
+            display: block;
+            width: 200px;
+            height: 200px;
+            border: 80px solid #fff;
+            background: #000;
+            margin-left: -100px;
+            border-radius: 50%;
+            box-sizing: border-box;
+            }
+            @keyframes rotate
+                {
+                    0%   { transform: rotate(0deg); }
+                    100% { transform:rotate(360deg); }
+                }
+
+    </style>
+</head>
+<body>
+    <div >
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/\345\244\252\346\236\201\345\233\276/\345\244\252\346\236\201\345\233\276.html" "b/\344\275\234\344\270\232/\345\244\252\346\236\201\345\233\276/\345\244\252\346\236\201\345\233\276.html"
new file mode 100644
index 0000000..4fcd6a2
--- /dev/null
+++ "b/\344\275\234\344\270\232/\345\244\252\346\236\201\345\233\276/\345\244\252\346\236\201\345\233\276.html"
@@ -0,0 +1,60 @@
+<!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>
+        *{
+            margin: 0;
+            padding: 0;
+          
+        }
+       body{
+           background: gray;
+       }
+       div{
+           margin: 200px auto 0;
+           width: 0;
+           height: 400px;
+           border-left: 200px solid #000;
+           border-right:200px solid #fff ;
+           border-radius: 50%;
+           animation:rotate 2s linear infinite;
+       }
+       div:before{
+            content: "";
+            display: block;
+            width: 200px;
+            height: 200px;
+            border: 80px solid #000;
+            background: #fff;
+            margin-left: -100px;
+            border-radius: 50%;
+            box-sizing: border-box;
+            }
+            div:after{
+            content: "";
+            display: block;
+            width: 200px;
+            height: 200px;
+            border: 80px solid #fff;
+            background: #000;
+            margin-left: -100px;
+            border-radius: 50%;
+            box-sizing: border-box;
+            }
+            @keyframes rotate
+                {
+                    0%   { transform: rotate(0deg); }
+                    100% { transform:rotate(360deg); }
+                }
+
+    </style>
+</head>
+<body>
+    <div >
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\275\234\344\270\232/\347\275\221\346\240\274\345\270\203\345\261\200/.html" "b/\344\275\234\344\270\232/\347\275\221\346\240\274\345\270\203\345\261\200/.html"
new file mode 100644
index 0000000..17ff7fe
--- /dev/null
+++ "b/\344\275\234\344\270\232/\347\275\221\346\240\274\345\270\203\345\261\200/.html"
@@ -0,0 +1,118 @@
+<<!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>
+        #top{
+            display:inline-flex;
+            margin: 50px 0 0 100px;
+        }
+        #center{
+            display:inline-flex;
+            margin: 0 0 0 100px;
+        }
+        .border{
+            margin: 20px 0 0 30px;
+            width: 220px;
+            height: 220px;
+            display: inline-grid;
+            grid-row-gap: 20px;
+            grid-column-gap: 20px;
+            grid-template-columns: 60px 60px 60px;
+            grid-template-rows: 60px 60px 60px;
+            background-color:slategrey;
+            border-radius: 40px;
+            box-shadow: 2px 2px 5px #000;
+        }
+        .border > div{
+            background-color: black;
+            border-radius: 50%;
+            box-shadow: 2px 2px 5px #000;
+        }
+        .divb{
+            grid-column-start: 2; 
+        }
+        .divc{
+            grid-column-start: 3; 
+        }
+        .divd{
+            grid-column-start:1; 
+            grid-row-start: 2;
+        }
+        .dive{
+            grid-column-start:2; 
+            grid-row-start: 2;
+        }
+        .divf{
+            grid-column-start:3; 
+            grid-row-start: 2;
+        }
+        .divg{
+            grid-column-start:1; 
+            grid-row-start: 3;
+        }
+        .divh{
+            grid-column-start:2; 
+            grid-row-start: 3;
+        }
+        .divi{
+            grid-column-start:3; 
+            grid-row-start: 3;
+        }
+        
+    </style>
+</head>
+<body>
+    <div id="top">
+        <div class="border">
+            <div class="dive"></div>
+        </div>
+        <div class="border">
+            <div class="diva"></div>
+            <div class="divi"></div>
+        </div>
+        <div class="border">
+            <div class="diva"></div>
+            <div class="dive"></div>
+            <div class="divi"></div>
+        </div>
+        <div class="border">
+            <div class="diva"></div>
+            <div class="divc"></div>
+            <div class="divg"></div>
+            <div class="divi"></div>
+        </div>
+    </div>
+    <div id="center">
+        <div class="border">
+            <div class="diva"></div>
+            <div class="divc"></div>
+            <div class="dive"></div>
+            <div class="divg"></div>
+            <div class="divi"></div>
+        </div>
+        <div class="border">
+            <div class="diva"></div>
+            <div class="divc"></div>
+            <div class="divd"></div>
+            <div class="divf"></div>
+            <div class="divg"></div>
+            <div class="divi"></div>
+        </div>
+        <div class="border">
+            <div class="diva"></div>
+            <div class="divb"></div>
+            <div class="divc"></div>
+            <div class="divd"></div>
+            <div class="dive"></div>
+            <div class="divf"></div>
+            <div class="divg"></div>
+            <div class="divh"></div>
+            <div class="divi"></div>
+        </div>
+    </div>
+    
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

