diff --git "a/\345\200\252\345\273\272\350\261\252/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo.html" "b/\345\200\252\345\273\272\350\261\252/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2f929fec81d97f5d6f1f34ea1636c28e809e597d
--- /dev/null
+++ "b/\345\200\252\345\273\272\350\261\252/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo.html"
@@ -0,0 +1,250 @@
+<!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>
+<style>
+    .container{
+        display: grid;
+        grid-template-rows: 100px 100px;
+        grid-template-columns: 100px 100px 100px 100px ;
+        /* gap: 20px 100px; */
+        /* justify-content: space-evenly; */
+        gap: 30px 30px;
+    }
+    .maxOne,.maxTwo,.maxThree,.maxFour,.maxFive,.maxSix,.maxSeven{
+        background-color: rgb(182, 219, 210);
+        display: grid;
+        border-radius: 10px;
+    }
+    .maxOne{
+        justify-content: center;
+        align-content: center;
+    }
+    .maxTwo{
+
+    }
+    /* .maxTwo{
+        grid-row: 1/2;
+        grid-column: 3/4;
+    }
+    .maxThree{
+        grid-row: 1/2;
+        grid-column: 5/6;
+    }
+    .maxFour{
+        grid-row: 1/2;
+        grid-column: 7/8;
+    }
+    .maxFive{
+        grid-column: 2/3;
+        grid-row: 2/3;
+    }
+    .maxSix{
+        grid-column: 4/5;
+        grid-row: 2/3;
+    }
+    .maxSeven{
+        grid-row:2/3;
+        grid-column: 6/7;
+    } */
+    .item{
+        height: 20px;
+        width: 20px;
+        border-radius: 50%;
+        background-color: cadetblue;
+    }
+   .maxTwo .item1{
+        justify-self: self-end;
+        align-self: end;
+    }
+    .maxThree .item1{
+        justify-self: center;
+        align-self: center;
+    }
+    .maxThree .item2{
+        justify-self: self-end;
+        align-self: end;
+    }
+    .maxFour .item1{
+        justify-self: end;
+    }
+    .maxFour .item2{
+        align-self: end;
+    }
+    .maxFour .item3{
+        grid-column-start: none;
+        align-self: end;
+        justify-self: end;
+    }
+    .maxFive{
+        grid-template-rows: 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    .maxFive .item2{
+        /* grid-column: 1 ; */
+        grid-column: 3/4;
+        grid-row: 3/4;
+        /* justify-self: center;
+        align-self: center; */
+        justify-self: end;
+        align-self: end;
+    }
+    .maxFive .item3{
+        grid-column-start:3 ;
+        /* justify-content: center; */
+        /* justify-self: center;
+        align-self: center; */
+        justify-self: end;
+    }
+    .maxFive .item1{
+        grid-row: 3/4;
+        grid-column: 1/2;
+     /* justify-self: end; */
+     justify-self: self-start;
+    align-self: end;
+    }
+    .maxFive .item4{
+        grid-column-start:2 ;
+        justify-self: center;
+        align-self: center;
+    }
+
+    .maxSix{
+        grid-template-rows: 1fr 1fr 1fr;
+        grid-template-columns: 1fr 1fr 1fr;
+        /* justify-items: self-start; */
+        align-items: center;
+    }
+    .maxSix .item{
+        align-self: baseline;
+    }
+    .maxSix .item1{
+        grid-row: 3/4;
+        grid-column: 1/2;
+        /* justify-self: flex-start;
+    /* align-self: baseline;  */
+    justify-self: baseline;
+    align-self: end;
+    
+    }
+    .maxSix .item4{
+        grid-column: 3/4;
+        grid-row: 3/4;
+        justify-self: end;
+    align-self: end;
+    }
+    .maxSix .item2{
+        grid-column: 3/4;
+        grid-row: 2/3;
+        justify-self: end;
+    align-self: center;
+    }
+    .maxSix .item3{
+        grid-row: 2/3;
+        grid-column: 1/2;
+        align-self: center;
+    }
+    .maxSix .item5{
+        grid-column: 3;
+        justify-self: end;
+    align-self: baseline;
+    }
+    .maxSeven{
+        grid-template-rows: 1fr 1fr 1fr;
+        grid-template-columns:1fr 1fr 1fr ;
+    }
+    .maxSeven .item2{
+        justify-self: end;
+    }
+    .maxSeven .item5{
+        justify-self: end;
+        align-self: center;
+    }
+    .maxSeven .item8{
+        justify-self: end;
+        align-self: end;
+    }
+    .maxSeven .item1{
+        justify-self: center;
+        /* align-self: end; */
+    }
+    .maxSeven .item4{
+        justify-self: center;
+        align-self: center;
+    }
+    .maxSeven .item7{
+        justify-self: center;
+        align-self: end;
+    }
+    .maxSeven .item{
+        /* justify-self: center; */
+        /* align-self: end; */
+        /* align-self: baseline; */
+    }
+    .maxSeven .item3{
+        justify-self: center;
+        align-self: end;
+        justify-self: flex-start;
+    align-self: center;
+    }
+    .maxSeven .item6{
+        /* justify-self: center; */
+        justify-self: baseline;
+        align-self: end;
+    }
+</style>
+<body>
+    <div class="container">
+        <div class="maxOne">
+            <div class="item"></div>
+        </div>
+        <div class="maxTwo">
+            <div class="item"></div>
+            <div class="item item1"></div>
+        </div>
+        <div class="maxThree">
+            <div class="item"></div>
+            <div class="item item1"></div>
+            <div class="item item2"></div>
+        </div>
+        <div class="maxFour">
+            <div class="item"></div>
+            <div class="item item1"></div>
+            <div class="item item2"></div>
+            <div class="item item3"></div>
+            
+
+        </div>
+        <div class="maxFive">
+            <div class="item"></div>
+            <div class="item item1"></div>
+            <div class="item item2"></div>
+            <div class="item item3"></div>
+            <div class="item item4"></div>
+           
+        </div>
+        <div class="maxSix">
+            <div class="item"></div>
+            <div class="item item1"></div>
+            <div class="item item2"></div>
+            <div class="item item3"></div>
+            <div class="item item4"></div>
+            <div class="item item5"></div>
+        </div>
+        <div class="maxSeven">
+            <div class="item"></div>
+            <div class="item item1"></div>
+            <div class="item item2"></div>
+            <div class="item item3"></div>
+            <div class="item item4"></div>
+            <div class="item item5"></div>
+            <div class="item item6"></div>
+            <div class="item item7"></div>
+            <div class="item item8"></div>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\200\252\345\273\272\350\261\252/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo1.html" "b/\345\200\252\345\273\272\350\261\252/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7e23c9e6ecf97f27af25b45ac2a9e3be5919912c
--- /dev/null
+++ "b/\345\200\252\345\273\272\350\261\252/211125-CSS\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo1.html"
@@ -0,0 +1,111 @@
+<!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>
+        .container{
+            /* display: grid; */
+            width:600px;
+            height: 600px;
+            background-color: aqua;
+            /* grid-template-rows: 1fr 1fr 1fr;
+            grid-template-columns:1fr 1fr 1fr 1fr; */
+        }
+        .maxOne{
+            display: grid; 
+            height: 20%;
+            /* width: 50%; */
+            /* grid-template-columns:atuo-fill 200px; */
+            /* background-color: cadetblue; */
+            background-color: chocolate;
+            grid-template-columns:50% 50% ;
+        }
+        .maxOne .item1{
+            background-color: red;
+        }
+        .maxOne .item2{
+            background-color: rgb(236, 168, 19);
+        }
+        .maxTwo{
+            height: 20%;
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            background-color: coral;
+
+        }
+        .maxTwo .item1{
+            background-color: rgb(218, 233, 17);
+        }
+        .maxTwo .item2{
+            background-color: rgb(113, 240, 54);
+        }
+        .maxTwo .item3{
+            background-color: rgb(14, 180, 36);
+        }
+        .maxThree .item1{
+            background-color: rgb(42, 225, 231);
+        }
+        .maxThree .item2{
+            background-color: rgb(20, 154, 243);
+        }
+        .maxThree .item3{
+            background-color: rgb(15, 95, 241);
+        }
+        .maxThree .item4{
+            background-color: rgb(107, 45, 206);
+        }
+        .maxThree{
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+            height: 20%;
+            display: grid;
+            background-color: cornflowerblue;
+        }
+        .maxFour{
+            grid-template-columns: 1fr 1fr;
+            height: 40%;
+            display: grid;
+            background-color: cornsilk;
+        }
+        .maxFour .item1{
+            background-color: rgba(200, 42, 231, 0.192);
+        }
+        .maxFour .item2{
+            background-color: rgba(236, 22, 50, 0.479);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+            <div class="maxOne">
+                <div class="item1"></div>
+                <div class="item2"></div>
+            </div>
+
+           <div class="maxTwo">
+                <div class="item1"></div>
+                <div class="item2"></div>
+                <div class="item3"></div>
+           </div>
+            <div class="maxThree">
+                <div class="item1"></div>
+                <div class="item2"></div>
+                <div class="item3"></div>
+                <div class="item4"></div>
+            </div>
+            <div class="maxFour">
+                <div class="item1"></div>
+                <div class="item2"></div>
+            </div>
+            <!-- <div class="item3"></div>  -->
+        
+        
+            
+            <!-- <div class="item5"></div> -->
+        
+       
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\200\252\345\273\272\350\261\252/211126-CSS\344\275\234\344\270\232-\346\227\266\351\222\237/demo.html" "b/\345\200\252\345\273\272\350\261\252/211126-CSS\344\275\234\344\270\232-\346\227\266\351\222\237/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f2d9224879ea1328d93e804969d0443a0b754eb5
--- /dev/null
+++ "b/\345\200\252\345\273\272\350\261\252/211126-CSS\344\275\234\344\270\232-\346\227\266\351\222\237/demo.html"
@@ -0,0 +1,110 @@
+<!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>
+    *{
+        margin: 0;
+        padding: 0;
+    }
+    body{
+        display: flex;
+        height: 100vh;
+        justify-content: center;
+        align-content: center;
+    }
+    .clockDiv{
+       display: flex;
+       width: 400px;
+       height: 400px;
+       background-color: bisque;
+       align-self: center;
+       border: 8px solid rgb(90, 241, 204);
+       border-radius: 50%;
+       position: absolute;
+       transform-origin: 50% 50%;
+       box-sizing: border-box;
+    }
+
+    .clockDiv div:nth-child(-n+6){
+       
+        height: 380px;
+        width: 8px;
+        background-color: rgba(148, 110, 110, 0.26);
+        /* transform: translate(200px,0); */
+        /* transform: rotate(30deg); */
+        transform: translate(2px, 1px) 30deg;
+        position: absolute;
+        left: 50%;
+    }
+    /* .line1{
+        transform: rotate(180deg);
+    } */
+   .line2{
+    transform: rotate(30deg);
+    /* background-color: black; */
+   }
+   .line3{
+       transform: rotate(60deg);
+   }
+   .line4{
+       transform: rotate(90deg);
+   }
+   .line5{
+       transform: rotate(120deg);
+   }
+   .line6{
+       transform: rotate(150deg);
+   }
+   .szDiv{
+       width: 356px;
+       height: 356px;
+        background-color: rgb(255, 255, 255);
+        border-radius: 50%;
+        position: absolute;
+        /* transform: translate(50%,50%); */
+        transform-origin: center center;
+        transform: translate(16px,12px);
+   }
+   .yx{
+       /* content: ""; */
+       height: 20px;
+       width: 20px;
+       background-color: rgb(6, 23, 53);
+       transform: translate(200px,200px);
+   }
+</style>
+
+<body>
+    <div class="clockDiv">
+        <div class="line1"></div>
+        <div class="line2"></div>
+        <div class="line3"></div>
+        <div class="line4"></div>
+        <div class="line5"></div>
+        <div class="line6"></div>
+       
+        <div class="szDiv">
+            <!-- <div class="sz"></div> -->
+            <!-- <div></div> -->
+            <!-- <div></div> -->
+            <div class="yx"></div>
+        </div>
+        <div class="fzDiv">
+            <!-- <div class="fz"></div> -->
+        </div>
+        <div class="mzDiv">
+            <!-- <div class="mz"></div> -->
+        </div>
+        <!-- <div></div> -->
+    </div>
+
+    <script>
+        
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\200\252\345\273\272\350\261\252/211126-CSS\344\275\234\344\270\232-\346\227\266\351\222\237/demo2.html" "b/\345\200\252\345\273\272\350\261\252/211126-CSS\344\275\234\344\270\232-\346\227\266\351\222\237/demo2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a5831fa5d28dbb1cf7b508dbdabddc02fde91df5
--- /dev/null
+++ "b/\345\200\252\345\273\272\350\261\252/211126-CSS\344\275\234\344\270\232-\346\227\266\351\222\237/demo2.html"
@@ -0,0 +1,157 @@
+
+<!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 {
+            position: relative;
+            width: 200px;
+            height: 200px;
+            border: 5px solid #000;
+            border-radius: 50%;
+            margin: 100px auto;
+        }
+
+        .clock div:nth-child(-n+6) {
+            width: 6px;
+            height: 200px;
+            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);
+        }
+
+        /* 中心小圆点 */
+        .cent {
+            width: 20px;
+            height: 20px;
+            background-color: #000;
+            border-radius: 50%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 2;
+        }
+
+        /* 中心空白圆盘 */
+        .cover {
+            width: 180px;
+            height: 180px;
+            background-color: #fff;
+            border-radius: 50%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+
+        /* 时针 */
+        .hour {
+            width: 6px;
+            height: 50px;
+            background-color: #000;
+            position: absolute;
+            left: 50%;
+            top: 100px;
+            margin-left: -3px;
+            /* 添加动画 */
+            transform-origin: top center;
+            animation: clockrotate 43200s steps(43200) infinite;
+        }
+
+        /* 分针 */
+        .minute {
+            width: 6px;
+            height: 60px;
+            background-color: #555;
+            position: absolute;
+            left: 50%;
+            top: 100px;
+            margin-left: -3px;
+            /* 添加动画 */
+            transform-origin: top center;
+            animation: clockrotate 3600s steps(3600) infinite;
+            
+        }
+
+        .seconds {
+            width: 4px;
+            height: 70px;
+            background-color: red;
+            position: absolute;
+            left: 50%;
+            top: 100px;
+            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"></div>
+
+        <div class="line2"></div>
+
+        <div class="line3"></div>
+
+        <div class="line4"></div>
+
+        <div class="line5"></div>
+
+        <div class="line6"></div>
+
+        <div class="cent"></div>
+
+        <div class="cover"></div>
+
+        <div class="hour"></div>
+
+        <div class="minute"></div>
+
+        <div class="seconds"></div>
+    </div>
+<script>document.write('<script src="//' + (location.host || 'localhost').split(':')[0] + ':35929/livereload.js?snipver=1"></' + 'script>')</script><script>document.addEventListener('LiveReloadDisconnect', function() { setTimeout(function() { window.location.reload(); }, 500); })</script></body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\200\252\345\273\272\350\261\252/211126-CSS\344\275\234\344\270\232-\346\227\266\351\222\237/demo3.html" "b/\345\200\252\345\273\272\350\261\252/211126-CSS\344\275\234\344\270\232-\346\227\266\351\222\237/demo3.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c7c1272a4bd22d020cd0e6484a01aa192f7af5fd
--- /dev/null
+++ "b/\345\200\252\345\273\272\350\261\252/211126-CSS\344\275\234\344\270\232-\346\227\266\351\222\237/demo3.html"
@@ -0,0 +1,148 @@
+<!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>
+        body{
+            height: 100vh;
+            display: flex;
+          justify-content: center;
+          align-content: center;
+           background-color: cornsilk;
+        }
+        .clock{
+            position: relative;
+            display: flex;
+            width: 400px;
+            height: 400px;
+            border: rgb(245, 192, 18) 5px solid;
+            /* transform: translate(-50%,-50%); */
+            /* transform-origin: 50% 50%; */
+            align-self: center;
+            border-radius: 50%;
+        }
+        .line1,.line2,.line3,.line4,.line5,.line6{
+            position: absolute;
+           height:400px;
+           width: 8px;
+           background-color: rgb(250, 86, 10);
+           transform-origin: 50% 50%;
+           transform: rotate(30deg);
+           /* transform: translateX(200px); */
+
+        }
+        .line1{
+            background-color: rgb(250, 86, 10)ck;
+            transform: translateX(196px) rotate(0deg);
+        }         
+        .line2{
+            background-color: rgb(250, 86, 10);
+            transform: translateX(196px) rotate(30deg);
+        }
+        .line3{
+            background-color: rgb(250, 86, 10);
+            transform: translateX(196px) rotate(60deg);
+        }
+        .line4{
+            background-color: rgb(250, 86, 10);
+            transform: translateX(196px) rotate(90deg);
+        }      
+        .line5{
+            background-color: rgb(250, 86, 10);
+            transform: translateX(196px) rotate(120deg);
+        }
+        .line6{
+            background-color: rgb(250, 86, 10);
+            transform: translateX(196px) rotate(150deg);
+        }
+        .cent{
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background-color: cadetblue;
+            border-radius: 50%;
+            transform: translate(185px,185px);
+            /* transform-origin: center center; */
+            z-index: 1;
+        } 
+        .cover{
+            width: 380px;
+            height: 380px;
+            position: absolute;
+            transform: translate(10px,10px);
+            border-radius: 50%;
+            background-color: cornsilk;
+            
+           
+        }
+        .hour{
+            height: 100px;
+            width: 8px;
+            background-color: coral;
+            transform: translate(196px,200px);
+            border-radius: 5px;
+        } 
+        .min{
+            position: absolute;
+            height: 115px;
+            width: 8px;
+            background-color: rgb(29, 239, 247);
+            transform: translate(196px,200px);
+            /* transform-origin: 200px 200px; */
+            border-radius: 5px;
+        }         
+        .sec{
+            position: absolute;
+            height: 130px;
+            width: 8px;
+            background-color: rgb(228, 113, 238);
+            transform: translate(196px,200px);
+            /* transform-origin: 200px 200px; */
+            border-radius: 5px;
+        }                                      
+    </style>
+<body>
+    <div class="clock">
+        <div class="line1"></div>
+        <div class="line2"></div>
+        <div class="line3"></div>
+        <div class="line4"></div>
+        <div class="line5"></div>
+        <div class="line6"></div>
+        <div class="cent"></div>
+        <div class="cover"></div>
+        <div class="hour"></div>
+        <div class="min"></div>
+        <div class="sec"></div>
+    </div>
+    <script>
+        let hour=document.querySelector('.hour')
+        let min=document.querySelector('.min');
+        let sec=document.querySelector('.sec');
+       
+
+        function myTime(){
+            let time=new Date();
+        let h=time.getHours()*30;
+        let m=time.getMinutes()*6;
+        let s=time.getSeconds()*6;
+
+        hour.style.transform=`rotate((${h+m}/12)deg) translate(196px,200px)`;
+        min.style.transform=`rotate(${m}deg) translate(196px,200px)`;
+        sec.style.transform=`rotate(${s}deg) translate(196px,200px)`;
+        sec.style.transformOrigin="200px 200px";
+        hour.style.transformOrigin="200px 200px";
+        min.style.transformOrigin="200px 200px";
+       
+        }
+       setInterval('myTime()');  
+
+        // console.log(h+"时"+m+"分"+s+"秒");
+        // console.log(time.valueOf());
+    </script>
+</body>
+</html>
\ No newline at end of file
