From 35971d6a752fba202aae958f3b2e8bbdc246cd7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E6=99=93=E4=B8=BD?= <975778681@qq.com>
Date: Fri, 26 Nov 2021 17:14:20 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=97=B6=E9=92=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../09_20211126/Untitled-1.html"              | 145 ++++++++++++++++++
 1 file changed, 145 insertions(+)
 create mode 100644 "\345\215\242\346\231\223\344\270\275/09_20211126/Untitled-1.html"
diff --git "a/\345\215\242\346\231\223\344\270\275/09_20211126/Untitled-1.html" "b/\345\215\242\346\231\223\344\270\275/09_20211126/Untitled-1.html"
new file mode 100644
index 0000000..6b08569
--- /dev/null
+++ "b/\345\215\242\346\231\223\344\270\275/09_20211126/Untitled-1.html"
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+<head>
+<link type="text/css" rel="stylesheet" href="html.css" />
+<title>纯css打造立体时钟</title>
+<style type="text/css">
+body { font-family:Arial; font-size:14px; color:lightpink ; text-align:center; }
+* { padding:0px; margin:0px; }
+#container { position:relative; margin-left:auto; margin-right:auto; width:200px; height:200px; 
+margin-top:50px; overflow:hidden; background:rgb(237, 212, 247);
+border-radius:100px;
+box-shadow: inset 0 0 2px powderblue; 
+background: -moz-radial-gradient(center, circle farthest-corner, rgba(168, 168, 168, 0.9) 0%, rgb(237, 212, 247) 95%);
+background: -o-radial-gradient(center, circle farthest-corner, rgba(168, 168, 168, 0.9) 0%, rgb(237, 212, 247) 95%);
+background: -webkit-gradient(radial, 100 100, 40, 100 100, 120, from(rgba(168, 168, 168, 0.9)), to(rgb(237, 212, 247)));
+}
+#wq { line-style:none; }
+#wq li { display:inline-block; font-size:18px; font-weight:bold; font-family:"Segoe UI"; text-shadow:#e8e8e8 2px 2px 1px; }
+#wq li:nth-child(1){ -moz-transform:translate(87px,23px); }
+#wq li:nth-child(2){ -moz-transform:rotate(30deg) translate(104px,-22px); }
+#wq li:nth-child(3){ -moz-transform:rotate(60deg) translate(104px,-65px); }
+#wq li:nth-child(4){ -moz-transform:translate(108px,90px); }
+#wq li:nth-child(5){ -moz-transform:translate(85px,126px); }
+#wq li:nth-child(6){ -moz-transform:translate(46px,150px); }
+#wq li:nth-child(7){ -moz-transform:translate(-100px,100px) translate(97px,59px); }
+#wq li:nth-child(8){ -moz-transform:rotate(30deg) translate(31px,154px); }
+#wq li:nth-child(9){ -moz-transform:rotate(-30deg) translate(-143px,63px); }
+#wq li:nth-child(10){ -moz-transform:translate(-114px,90px); }
+#wq li:nth-child(11){ -moz-transform:rotate(-60deg) translate(-110px,-74px); }
+#wq li:nth-child(12){ -moz-transform:rotate(-30deg) translate(-120px,-32px); }
+#wq li:nth-child(1){ -webkit-transform:translate(87px,23px); }
+#wq li:nth-child(2){ -webkit-transform:rotate(30deg) translate(104px,-22px); }
+#wq li:nth-child(3){ -webkit-transform:rotate(60deg) translate(104px,-65px); }
+#wq li:nth-child(4){ -webkit-transform:translate(108px,90px); }
+#wq li:nth-child(5){ -webkit-transform:translate(85px,126px); }
+#wq li:nth-child(6){ -webkit-transform:translate(46px,150px); }
+#wq li:nth-child(7){ -webkit-transform:translate(-100px,100px) translate(97px,59px); }
+#wq li:nth-child(8){ -webkit-transform:rotate(30deg) translate(31px,154px); }
+#wq li:nth-child(9){ -webkit-transform:rotate(-30deg) translate(-143px,63px); }
+#wq li:nth-child(10){ -webkit-transform:translate(-114px,90px); }
+#wq li:nth-child(11){ -webkit-transform:rotate(-60deg) translate(-110px,-74px); }
+#wq li:nth-child(12){ -webkit-transform:rotate(-30deg) translate(-120px,-32px); }
+#wq li:nth-child(1){ -o-transform:translate(87px,23px); }
+#wq li:nth-child(2){ -o-transform:rotate(30deg) translate(104px,-22px); }
+#wq li:nth-child(3){ -o-transform:rotate(60deg) translate(104px,-65px); }
+#wq li:nth-child(4){ -o-transform:translate(108px,90px); }
+#wq li:nth-child(5){ -o-transform:translate(85px,126px); }
+#wq li:nth-child(6){ -o-transform:translate(46px,150px); }
+#wq li:nth-child(7){ -o-transform:translate(-100px,100px) translate(97px,59px); }
+#wq li:nth-child(8){ -o-transform:rotate(30deg) translate(31px,154px); }
+#wq li:nth-child(9){ -o-transform:rotate(-30deg) translate(-143px,63px); }
+#wq li:nth-child(10){ -o-transform:translate(-114px,90px); }
+#wq li:nth-child(11){ -o-transform:rotate(-60deg) translate(-110px,-74px); }
+#wq li:nth-child(12){ -o-transform:rotate(-30deg) translate(-120px,-32px); }
+#c { width:160px; height:160px;
+background:seashell;
+border-radius:80px;
+margin-left:20px;
+box-shadow:0 0 6px #fff; 
+}
+#author { padding-top:100px; text-shadow:#c9c9c9 3px 3px 3px; }
+#s { position:relative; z-index:20; width:70px; height:3px; background:#555555;
+top:-92px; left:46px;
+border-radius:1px;
+box-shadow:-3px 3px 3px rgba(0,0,0,0.5);
+-webkit-transform-origin:77% 50%; 
+-moz-transform-origin:77% 50%;
+-o-transform-origin:77% 50%;
+}
+#m { position:relative; z-index:19; width:60px; height:4px; background:#5d5aa5;
+top:-88px; left:54px;
+border-radius:2px;
+box-shadow:-3px 3px 3px rgba(0,0,0,0.5);
+-webkit-transform-origin:77% 50%; 
+-moz-transform-origin:75% 50%;
+-o-transform-origin:77% 50%;
+}
+#h { position:relative; z-index:18; width:40px; height:6px; background:#ad561d;
+top:-83px; left:69px;
+border-radius:2px;
+box-shadow:-3px 3px 3px rgba(0,0,0,0.5);
+-webkit-transform-origin:78% 50%; 
+-moz-transform-origin:75% 50%;
+-o-transform-origin:78% 50%;
+}
+#point { position:relative; z-index:21; width:16px; height:16px; top:-101px; left:92px; background:green; 
+border-radius:8px;
+box-shadow:-3px 3px 3px rgba(0,0,0,0.5);
+background:-moz-linear-gradient(top, rgba(200,200,200,1), rgba(113,113,113,0.9) 49%, rgba(80,80,80,1) 50%, rgba(116,116,116,1));
+background:-webkit-gradient(linear, center top, center bottom, from(rgba(200,200,200,1)), color-stop(49%,rgba(113,113,113,0.9)), color-stop(50%,rgba(80,80,80,1)), to(rgba(116,116,116,1)));
+background:-o-linear-gradient(top, rgba(200,200,200,1), rgba(113,113,113,0.9) 49%, rgba(80,80,80,1) 50%, rgba(116,116,116,1));
+}
+</style>
+</head>
+<body>
+<div id="container">
+<ul id="wq">
+  <li>12</li>
+  <li>1</li>
+  <li>2</li>
+  <li>3</li>
+  <li>4</li>
+  <li>5</li>
+  <li>6</li>
+  <li>7</li>
+  <li>8</li>
+  <li>9</li>
+  <li>10</li>
+  <li>11</li>
+</ul>
+<div id="c"><div id="author">卢晓丽🤭</div></div>
+<div id="h"></div>
+<div id="m"></div>
+<div id="s"></div>
+<div id="point"></div>
+</div>
+<script type="text/javascript">
+var hours;
+var mins;
+var seconds;
+hours = (new Date().getHours()-12)*360/12 + 90 + "deg";
+mins = new Date().getMinutes()*360/60 + 90 + "deg";
+seconds = new Date().getSeconds()*360/60 + 90 + "deg";
+var hh = document.getElementById('h');
+var mm = document.getElementById('m');
+var ss = document.getElementById('s');
+var t;
+hh.style.cssText = "-moz-transform:rotate("+hours+");-webkit-transform:rotate("+hours+");-o-transform:rotate("+hours+");";
+mm.style.cssText = "-moz-transform:rotate("+mins+");-webkit-transform:rotate("+mins+");-o-transform:rotate("+mins+");";
+ss.style.cssText = "-moz-transform:rotate("+seconds+");-webkit-transform:rotate("+seconds+");-o-transform:rotate("+seconds+");";
+t = setInterval(function(){
+  seconds = new Date().getSeconds()*360/60 + 90;
+  mins = new Date().getMinutes()*360/60 + 90;
+  ss.style.cssText = "-moz-transform:rotate("+seconds+"deg);-webkit-transform:rotate("+seconds+"deg);-o-transform:rotate("+seconds+"deg);";
+  if ( seconds == 90 ){
+   mm.style.cssText = "-moz-transform:rotate("+mins+"deg);-webkit-transform:rotate("+mins+"deg);-o-transform:rotate("+mins+"deg);";
+  }
+  if ( mins == 90 ){
+   hours = new Date().getHours()*360/12 + 90 + "deg";
+   hh.style.cssText = "-moz-transform:rotate("+hours+");-webkit-transform:rotate("+hours+");-o-transform:rotate("+hours+");";
+  }
+}, 1000);
+</script>
+</body> 
+</html> 
\ No newline at end of file
-- 
Gitee


From 38103297e08c8897cdac9fa6eb66f558e4dc65d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8D=A2=E6=99=93=E4=B8=BD?= <975778681@qq.com>
Date: Fri, 26 Nov 2021 17:38:00 +0800
Subject: [PATCH 2/2] 2526

---
 .../07_20211125/1.html"                       | 150 ++++++++++++++++++
 .../07_20211125/2.html"                       | 119 ++++++++++++++
 2 files changed, 269 insertions(+)
 create mode 100644 "\345\215\242\346\231\223\344\270\275/07_20211125/1.html"
 create mode 100644 "\345\215\242\346\231\223\344\270\275/07_20211125/2.html"

diff --git "a/\345\215\242\346\231\223\344\270\275/07_20211125/1.html" "b/\345\215\242\346\231\223\344\270\275/07_20211125/1.html"
new file mode 100644
index 0000000..8d03e22
--- /dev/null
+++ "b/\345\215\242\346\231\223\344\270\275/07_20211125/1.html"
@@ -0,0 +1,150 @@
+<!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 {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .box-one {
+            display: grid;
+            width: 100px;
+            height: 100px;
+            background-color: #e7e7e7;
+            box-shadow: 0px 5px #d6d6d6;
+            border-radius: 5px;
+            justify-content: center;
+            align-items: center;
+        }
+        .item {
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: black;
+        }
+        .box-two{
+            display: grid;
+            width: 100px;
+            height: 100px;
+            background-color: #e7e7e7;
+            box-shadow: 0px 5px #d6d6d6;
+            border-radius: 5px;
+            
+        }
+        .item2{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: black;
+            justify-self: end;
+            align-self: end;
+        }
+        .box-three{
+            display: grid;
+            width: 100px;
+            height: 100px;
+            background-color: #e7e7e7;
+            box-shadow: 0px 5px #d6d6d6;
+            border-radius: 5px;
+        }
+        .item-three{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: black;
+            justify-self: center;
+        }
+        .box-four{
+            display: grid;
+            width: 100px;
+            height: 100px;
+            background-color: #e7e7e7;
+            box-shadow: 0px 5px #d6d6d6;
+            border-radius: 5px;
+            
+            
+        }
+        .item-four{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: black;
+
+        }
+        #d1{
+            
+            grid-area: 1/1/2/2;
+           place-self: center center;
+        }
+        #d2{
+            place-self: center center;
+            grid-area: 1/3/2/4;
+        }
+        #d3{
+            place-self: center center;
+            grid-area: 3/1/4/2;
+        }
+        #d4{
+            place-self: center center;
+            grid-area: 3/3/4/4;
+        }
+        #d5{
+            place-self: center center;
+            grid-area: 2/2/3/3;
+        }
+        #d6{
+            place-self: center center;
+            grid-area: 2/1/3/2;
+        }
+        #d7{
+            place-self: center center;
+            grid-area: 2/3/3/4;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="container">
+        <div class="box-one">
+            <div class="item"></div>
+        </div>
+        <div class="box-two">
+            <div class="item"></div>
+            <div class="item2"></div>
+        </div>
+        <div class="box-three">
+            <div class="item"></div>
+            <div class="item-three"></div>
+            <div class="item2"></div>
+        </div>
+        <div class="box-four">
+            <div class="item-four" id="d1"></div>
+            <div class="item-four" id="d2"></div>
+            <div class="item-four" id="d3"></div>
+            <div class="item-four" id="d4"></div>
+        </div>
+        <div class="box-four">
+            <div class="item-four" id="d1"></div>
+            <div class="item-four" id="d2"></div>
+            <div class="item-four" id="d3"></div>
+            <div class="item-four" id="d4"></div>
+            <div class="item-four" id="d5"></div>
+        </div>
+        <div class="box-four">
+            <div class="item-four" id="d1"></div>
+            <div class="item-four" id="d2"></div>
+            <div class="item-four" id="d3"></div>
+            <div class="item-four" id="d4"></div>
+            <div class="item-four" id="d6"></div>
+            <div class="item-four" id="d7"></div>
+        </div>
+        
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\215\242\346\231\223\344\270\275/07_20211125/2.html" "b/\345\215\242\346\231\223\344\270\275/07_20211125/2.html"
new file mode 100644
index 0000000..758cd5e
--- /dev/null
+++ "b/\345\215\242\346\231\223\344\270\275/07_20211125/2.html"
@@ -0,0 +1,119 @@
+<!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{
+            display: grid;
+            width: 400px;
+            height: 400px;
+            grid-template-rows: repeat(2,20%) 60%;
+
+        }
+        .fifty-div{
+            display: grid;
+            grid-template-columns: repeat(2,50%);
+        }
+        .thirty-div{
+            display: grid;
+            grid-template-columns: repeat(3,1fr);
+        }
+        .twentyfive-div{
+            display: grid;
+            grid-template-columns: repeat(4,1fr);
+            grid-template-rows: repeat(3,1fr);
+            grid-template-areas: 'a b c d'
+                                'A A C C'
+                                'A A C C';
+        }
+        .item-fifty1{
+            background-color: red;
+            font-size: 3em;
+            color: #fff;
+          
+        }
+        .item-fifty2{
+            background-color: green;
+            font-size: 3em;
+            color: #fff;
+           
+        }
+        .item-thirty1{
+            background-color: #008080;
+            font-size: 3em;
+            color: #fff;
+            
+        }
+        .item-thirty2{
+            background-color: yellow;
+            font-size: 3em;
+            color: #fff;
+        }
+        .item-thirty3{
+            background-color: #FFD700;
+            font-size: 3em;
+            color: #fff;
+        }
+        .item-twentyfive1{
+            background-color: pink;
+            font-size: 3em;
+            color: #fff;
+            
+        }
+        .item-twentyfive2{
+            background-color: purple;
+            font-size: 3em;
+            color: #fff;
+            
+        }
+        .item-twentyfive3{
+            background-color: blue;
+            font-size: 3em;
+            color: #fff;
+            
+        }
+        .item-twentyfive4{
+            background-color: black;
+            font-size: 3em;
+            color: #fff;
+            
+        }
+        .item-fifty3{
+            background-color: red;
+            font-size: 3em;
+            color: #fff;
+            grid-area: A;
+        }
+        .item-fifty4{
+            background-color: green;
+            font-size: 3em;
+            color: #fff;
+            grid-area: C;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="fifty-div">
+            <div class="item-fifty1">50%</div>
+            <div class="item-fifty2">50%</div>
+        </div>
+        <div class="thirty-div">
+            <div class="item-thirty1">33%</div>
+        <div class="item-thirty2">33%</div>
+        <div class="item-thirty3">33%</div>
+        </div>
+        <div class="twentyfive-div">
+        <div class="item-twentyfive1">25%</div>
+        <div class="item-twentyfive2">25%</div>
+        <div class="item-twentyfive3">25%</div>
+        <div class="item-twentyfive4">25%</div>
+        <div class="item-fifty3">50%</div>
+        <div class="item-fifty4">50%</div>
+        </div>
+        
+    </div>
+</body>
+</html>
\ No newline at end of file
-- 
Gitee

