From a2eb7d85f43afe209cd6f4605e1e7b84a5baa744 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BF=AE=E4=BB=B0=E5=9D=A4?= <849357387@qq.com>
Date: Fri, 26 Nov 2021 17:10:42 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...46\240\274\345\270\203\345\261\20001.html" | 151 ++++++++++++
 ...46\240\274\345\270\203\345\261\20002.html" |  66 +++++
 .../1126CSS\346\227\266\351\222\237.html"     | 232 ++++++++++++++++++
 3 files changed, 449 insertions(+)
 create mode 100644 "\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/11-25\347\275\221\346\240\274\345\270\203\345\261\20001.html"
 create mode 100644 "\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/11-25\347\275\221\346\240\274\345\270\203\345\261\20002.html"
 create mode 100644 "\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/1126CSS\346\227\266\351\222\237.html"
diff --git "a/\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/11-25\347\275\221\346\240\274\345\270\203\345\261\20001.html" "b/\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/11-25\347\275\221\346\240\274\345\270\203\345\261\20001.html"
new file mode 100644
index 0000000..8cf62f8
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/11-25\347\275\221\346\240\274\345\270\203\345\261\20001.html"
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>grid骰子</title>
+<style>
+    .box{
+        display:grid;
+        width: 100px;
+        height: 100px;
+        border: 1px solid #000;
+        border-radius: 10px;
+        grid-template-rows: repeat(3,1fr);
+        grid-template-columns: repeat(3,1fr);
+    }
+    .box>div{
+        width: 30px;
+        height: 30px;
+        background: #000;
+        border-radius: 50%;
+    }
+    .box1>div{
+        grid-area: 2/2/3/3;
+        align-self: center center;
+    }
+    .box2{
+        display:grid;
+        width: 100px;
+        height: 100px;
+        border: 1px solid #000;
+        border-radius: 10px;
+        grid-template-columns: 50px 50px;
+        grid-template-rows: 50px 50px;
+    }
+    .box2>div{
+        width: 30px;
+        height: 30px;
+        background: #000;
+        border-radius: 50%;
+    }
+    .box2>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        align-self: center center;
+    }
+    .box2>div:nth-child(2){
+        grid-area: 2/2/3/3;
+        align-self: center center;
+    }
+    .box3>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        align-self: center center;
+    }
+    .box3>div:nth-child(2){
+        grid-area: 2/2/3/3;
+        align-self: center center;
+    }
+    .box3>div:nth-child(3){
+        grid-area: 3/3/4/4;
+        align-self: center center;
+    }
+    .box4>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        align-self: end end;
+    }
+    .box4>div:nth-child(2){
+        grid-area: 1/3/2/4;
+        align-self: end start;
+    }
+    .box4>div:nth-child(3){
+        grid-area: 3/1/4/2;
+        align-self: start end;
+    }
+    .box4>div:nth-child(4){
+        grid-area: 3/3/4/4;
+        align-self: start start;
+    }
+    .box5>div:nth-child(1){
+        grid-area: 1/1/2/2;
+        align-self: end end;
+    }
+    .box5>div:nth-child(2){
+        grid-area: 1/3/2/4;
+        align-self: end start;
+    }
+    .box5>div:nth-child(3){
+        grid-area: 3/1/4/2;
+        align-self: start end;
+    }
+    .box5>div:nth-child(4){
+        grid-area: 3/3/4/4;
+        align-self: start start;
+    }
+    .box5>div:nth-child(5){
+        grid-area: 2/2/3/3;
+        align-self:center center;
+    }
+    .box6{
+        display:grid;
+        width: 100px;
+        height: 100px;
+        border: 1px solid #000;
+        border-radius: 10px;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+        place-items: center center;
+    }
+    .box6>div{
+        width: 30px;
+        height: 30px;
+        background: #000;
+        border-radius: 50%;
+    }
+</style>
+</head>
+<body>
+    <div class="box box1">
+        <div></div>
+    </div>
+    <div class="box2">
+        <div></div>
+        <div></div>
+    </div>
+    <div class="box box3">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="box box4">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="box box5">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div class="box6">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/11-25\347\275\221\346\240\274\345\270\203\345\261\20002.html" "b/\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/11-25\347\275\221\346\240\274\345\270\203\345\261\20002.html"
new file mode 100644
index 0000000..48e9545
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/11-25\347\275\221\346\240\274\345\270\203\345\261\20002.html"
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>基本网格布局</title>
+</head>
+<style>
+    *{
+        margin: 0;
+        padding: 0;
+        font-size: 50px;
+        color: #fff;
+    }
+    .box{
+        display:inline-grid; 
+        width: 600px;
+        height: 700px;
+        /* grid-template-columns: 100px 100px 100px 150px; */
+        /* grid-template-rows: 150px 150px 150px 100px; */
+        background-color: #f2f2f2;
+    }
+    .one{
+        display: inline-grid;
+        grid-template-columns:1fr 1fr;
+        /* grid-template-areas: 
+        'a1 a2'; */
+    }
+   .two{
+        display: inline-grid;
+        grid-template-columns:1fr 1fr 1fr;
+   }
+    .three{
+        display: inline-grid;
+        grid-template-columns:1fr 1fr 1fr 1fr;
+    }
+    .four{
+        display: inline-grid;
+        grid-template-columns:1fr 1fr;
+    }
+</style>
+<body>
+    <div class="box">
+        <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/\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/1126CSS\346\227\266\351\222\237.html" "b/\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/1126CSS\346\227\266\351\222\237.html"
new file mode 100644
index 0000000..99bc023
--- /dev/null
+++ "b/\344\277\256\344\273\260\345\235\244H5+CSS\344\275\234\344\270\232/1126CSS\346\227\266\351\222\237.html"
@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>时钟</title>
+		<style type="text/css">
+			.clock{
+				position: relative;
+				width: 500px;
+				height: 500px;
+				border: 20px solid #000;
+				border-radius: 50%;
+				margin: 100px auto;
+			}
+			.clock div:nth-child(-n+6) {
+			    width: 10px;
+			    height: 500px;
+			    background-color: #aaa;
+			    position: absolute;
+			    left: 50%;
+			    margin-left: -3px;
+			}
+			/* .clock div:nth-child(-n+12) {
+			    width: 10px;
+			    height: 500px;
+			    background-color: #aaa;
+			    position: absolute;
+			    left: 50%;
+			    margin-left: -3px;
+			} */
+			.clock div:nth-child(-n+30) {
+			    width: 10px;
+			    height: 500px;
+			    background-color: #aaa;
+			    position: absolute;
+			    left: 50%;
+			    margin-left: -3px;
+			}
+			.line1 {
+			    transform: rotate(30deg);
+			}
+			.line2 {
+			    transform: rotate(60deg);
+			}
+			.line3 {
+			    transform: rotate(90deg);
+			}
+			.line4 {
+			    transform: rotate(120deg);
+			}
+			.line5 {
+			    transform: rotate(150deg);
+			}
+			.line6 {
+			    transform: rotate(180deg);
+			}
+			.line7 {
+			    transform: rotate(6deg);
+			}
+			.line8 {
+			    transform: rotate(12deg);
+			}
+			.line9 {
+			    transform: rotate(18deg);
+			}
+			.line10 {
+			    transform: rotate(24deg);
+			}
+			.line11 {
+			    transform: rotate(36deg);
+			}
+			.line12 {
+			    transform: rotate(42deg);
+			}
+			.line13 {
+			    transform: rotate(48deg);
+			}
+			.line14 {
+			    transform: rotate(54deg);
+			}
+			.line15 {
+			    transform: rotate(66deg);
+			}
+			.line16 {
+			    transform: rotate(72deg);
+			}
+			.line17 {
+			    transform: rotate(78deg);
+			}
+			.line18 {
+			    transform: rotate(84deg);
+			}
+			.line19 {
+			    transform: rotate(96deg);
+			}
+			.line20 {
+			    transform: rotate(102deg);
+			}
+			.line21 {
+			    transform: rotate(108deg);
+			}
+			.line22 {
+			    transform: rotate(114deg);
+			}
+			.line23 {
+			    transform: rotate(126deg);
+			}
+			.line24 {
+			    transform: rotate(132deg);
+			}
+			.line25 {
+			    transform: rotate(138deg);
+			}
+			.line26 {
+			    transform: rotate(144deg);
+			}
+			.line27 {
+			    transform: rotate(156deg);
+			}
+			.line28 {
+			    transform: rotate(162deg);
+			}
+			.line29 {
+			    transform: rotate(168deg);
+			}
+			.line30 {
+			    transform: rotate(174deg);
+			}
+			.cent{
+				position: absolute;
+				width: 30px;
+				height: 30px;
+				background-color: red;
+				border-radius:50% ;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				z-index: 2;
+			}
+			.cover{
+				width: 400px;
+				height: 400px;
+				background-color: #fff;
+				border-radius: 50%;
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
+			.hour {
+			    width: 15px;
+			    height: 100px;
+			    background-color: #000;
+			    position: absolute;
+			    left: 50%;
+			    top: 250px;
+			    margin-left: -3px;
+			    transform-origin: top center;
+			    animation: clockrotate 43200s steps(43200) infinite;
+			}
+			.minute {
+			    width: 10px;
+			    height: 150px;
+			    background-color: #555;
+			    position: absolute;
+			    left: 50%;
+			    top: 250px;
+			    margin-left: -3px;
+			    transform-origin: top center;
+			    animation: clockrotate 3600s steps(3600) infinite;
+			    
+			}
+			.seconds {
+			    width: 5px;
+			    height: 200px;
+			    background-color: red;
+			    position: absolute;
+			    left: 50%;
+			    top: 250px;
+			    margin-left: -2px;
+			    transform-origin: top center;
+			    animation: clockrotate 60s steps(60) infinite;
+			}
+			@keyframes clockrotate {
+			    form {}
+			    to {
+			        transform: rotate(360deg);
+			    }
+			}
+		</style>
+	</head>
+	<body>
+		<div class="clock">
+			<div class="line1">1</div>
+			<div class="line2">2</div>
+			<div class="line3">3</div>
+			<div class="line4">4</div>
+			<div class="line5">5</div>
+			<div class="line6">9</div>
+			<div class="line7">01</div>
+			<div class="line8">02</div>
+			<div class="line9">03</div>
+			<div class="line10">04</div>
+			<div class="line11">06</div>
+			<div class="line12">07</div>
+			<div class="line13">08</div>
+			<div class="line14">09</div>
+			<div class="line15">011</div>
+			<div class="line16">012</div>
+			<div class="line17">013</div>
+			<div class="line18">014</div>
+			<div class="line19">016</div>
+			<div class="line20">017</div>
+			<div class="line21">018</div>
+			<div class="line22">019</div>
+			<div class="line23">021</div>
+			<div class="line24">022</div>
+			<div class="line25">023</div>
+			<div class="line26">024</div>
+			<div class="line27">026</div>
+			<div class="line28">027</div>
+			<div class="line29">028</div>
+			<div class="line30">029</div>
+			<div class="cent"></div>
+			<div class="cover"></div>
+			<div class="hour"></div>
+			<div class="minute"></div>
+			<div class="seconds"></div>
+			
+		</div>
+	</body>
+</html>
-- 
Gitee

