From 553f53ad3a336a204bb64f620e4606514ef4050f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C=E5=90=B4=E9=9B=B2=E6=B3=89=E2=80=9D?=
 <“2306628390@qq.com”>
Date: Sun, 28 Nov 2021 13:01:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BD=9C=E4=B8=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo02.html"                              |   0
 .../demo01.html"                              |   0
 .../img/1.jpg"                                | Bin
 .../img/2.jpg"                                | Bin
 .../img/3.jpg"                                | Bin
 .../img/4.jpg"                                | Bin
 .../img/5.jpg"                                | Bin
 .../img/6.jpg"                                | Bin
 .../demo1.html"                               | 151 ++++++++++++++
 .../demo2.html"                               | 192 ++++++++++++++++++
 .../demo1.html"                               | 151 ++++++++++++++
 .../demo2.html"                               | 119 +++++++++++
 .../demo1.html"                               | 159 +++++++++++++++
 13 files changed, 772 insertions(+)
 rename "\345\220\264\351\233\262\346\263\211/2021.11.19/demo02.html" => "\345\220\264\351\233\262\346\263\211/211119-CSS-\345\200\274\344\270\216\345\215\225\344\275\215/demo02.html" (100%)
 rename "\345\220\264\351\233\262\346\263\211/2021.11.22/demo01.html" => "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/demo01.html" (100%)
 rename "\345\220\264\351\233\262\346\263\211/2021.11.22/img/1.jpg" => "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/1.jpg" (100%)
 rename "\345\220\264\351\233\262\346\263\211/2021.11.22/img/2.jpg" => "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/2.jpg" (100%)
 rename "\345\220\264\351\233\262\346\263\211/2021.11.22/img/3.jpg" => "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/3.jpg" (100%)
 rename "\345\220\264\351\233\262\346\263\211/2021.11.22/img/4.jpg" => "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/4.jpg" (100%)
 rename "\345\220\264\351\233\262\346\263\211/2021.11.22/img/5.jpg" => "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/5.jpg" (100%)
 rename "\345\220\264\351\233\262\346\263\211/2021.11.22/img/6.jpg" => "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/6.jpg" (100%)
 create mode 100644 "\345\220\264\351\233\262\346\263\211/211124-CSS-\345\274\271\346\200\247\347\233\222\345\255\220/demo1.html"
 create mode 100644 "\345\220\264\351\233\262\346\263\211/211124-CSS-\345\274\271\346\200\247\347\233\222\345\255\220/demo2.html"
 create mode 100644 "\345\220\264\351\233\262\346\263\211/211125-CSS-\347\275\221\346\240\274\345\270\203\345\261\200/demo1.html"
 create mode 100644 "\345\220\264\351\233\262\346\263\211/211125-CSS-\347\275\221\346\240\274\345\270\203\345\261\200/demo2.html"
 create mode 100644 "\345\220\264\351\233\262\346\263\211/211126-CSS-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo1.html"

diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.19/demo02.html" "b/\345\220\264\351\233\262\346\263\211/211119-CSS-\345\200\274\344\270\216\345\215\225\344\275\215/demo02.html"
similarity index 100%
rename from "\345\220\264\351\233\262\346\263\211/2021.11.19/demo02.html"
rename to "\345\220\264\351\233\262\346\263\211/211119-CSS-\345\200\274\344\270\216\345\215\225\344\275\215/demo02.html"
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/demo01.html" "b/\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/demo01.html"
similarity index 100%
rename from "\345\220\264\351\233\262\346\263\211/2021.11.22/demo01.html"
rename to "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/demo01.html"
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/1.jpg" "b/\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/1.jpg"
similarity index 100%
rename from "\345\220\264\351\233\262\346\263\211/2021.11.22/img/1.jpg"
rename to "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/1.jpg"
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/2.jpg" "b/\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/2.jpg"
similarity index 100%
rename from "\345\220\264\351\233\262\346\263\211/2021.11.22/img/2.jpg"
rename to "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/2.jpg"
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/3.jpg" "b/\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/3.jpg"
similarity index 100%
rename from "\345\220\264\351\233\262\346\263\211/2021.11.22/img/3.jpg"
rename to "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/3.jpg"
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/4.jpg" "b/\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/4.jpg"
similarity index 100%
rename from "\345\220\264\351\233\262\346\263\211/2021.11.22/img/4.jpg"
rename to "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/4.jpg"
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/5.jpg" "b/\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/5.jpg"
similarity index 100%
rename from "\345\220\264\351\233\262\346\263\211/2021.11.22/img/5.jpg"
rename to "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/5.jpg"
diff --git "a/\345\220\264\351\233\262\346\263\211/2021.11.22/img/6.jpg" "b/\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/6.jpg"
similarity index 100%
rename from "\345\220\264\351\233\262\346\263\211/2021.11.22/img/6.jpg"
rename to "\345\220\264\351\233\262\346\263\211/211121-CSS-\345\270\203\345\261\200/img/6.jpg"
diff --git "a/\345\220\264\351\233\262\346\263\211/211124-CSS-\345\274\271\346\200\247\347\233\222\345\255\220/demo1.html" "b/\345\220\264\351\233\262\346\263\211/211124-CSS-\345\274\271\346\200\247\347\233\222\345\255\220/demo1.html"
new file mode 100644
index 0000000..b62242b
--- /dev/null
+++ "b/\345\220\264\351\233\262\346\263\211/211124-CSS-\345\274\271\346\200\247\347\233\222\345\255\220/demo1.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>Document</title>
+    <style>
+        body {
+            background-color: #eeeeee;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        [class $= 'face'] {
+            margin: 16px;
+            padding: 4px;
+            background-color: #e7e7e7;
+            width: 104px;
+            height: 104px;
+            /* -o-object-fit: contain;
+            object-fit: contain; */
+            /* -webkit-box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7; */
+            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
+            border-radius: 10%;
+        }
+        .pip {
+            display: block;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            margin: 4px;
+            background-color: #333;
+            /* -webkit-box-shadow: inset 0 3px #111, inset 0 -3px #555; */
+            box-shadow: inset 0 3px #111, inset 0 -3px #555;
+        }
+
+        .first-face {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .second-face, 
+        .third-face,
+        .forth-face,
+        .fifth-face,
+        .sixth-face,
+        .ninth-face {
+            display: flex;
+            justify-content: space-between;
+        }
+        .second-face .pip:nth-of-type(2) {
+            align-self: flex-end;
+        }
+        .third-face .pip:nth-of-type(2) {
+            align-self: center;
+        }
+        .third-face .pip:nth-of-type(3) {
+            align-self: flex-end;
+        }
+        .forth-face .column {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .fifth-face .column {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .fifth-face .column:nth-of-type(2) {
+            align-self: center;
+        }
+        .sixth-face .column {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .ninth-face .column{
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+    </style>
+</head>
+<body>
+    <div class="first-face">
+        <span class="pip"></span>
+    </div>
+    <div class="second-face">
+        <span class="pip"></span>
+        <span class="pip"></span>
+    </div>
+    <div class="third-face">
+        <span class="pip"></span>
+        <span class="pip"></span>
+        <span class="pip"></span>
+    </div>
+    <div class="forth-face">
+        <div class="column">
+            <span class="pip"></span>
+            <span class="pip"></span>
+        </div>
+        <div class="column">
+            <span class="pip"></span>
+            <span class="pip"></span>
+        </div>
+    </div>
+    <div class="fifth-face">
+        <div class="column">
+            <span class="pip"></span>
+            <span class="pip"></span>
+        </div>
+        <div class="column">
+            <span class="pip"></span>
+        </div>
+        <div class="column">
+            <span class="pip"></span>
+            <span class="pip"></span>
+        </div>
+    </div>
+    <div class="sixth-face">
+        <div class="column">
+            <span class="pip"></span>
+            <span class="pip"></span>
+            <span class="pip"></span>
+        </div>
+        <div class="column">
+            <span class="pip"></span>
+            <span class="pip"></span>
+            <span class="pip"></span>
+        </div>
+    </div>
+    <div class="ninth-face">
+        <div class="column">
+            <span class="pip"></span>
+            <span class="pip"></span>
+            <span class="pip"></span>
+        </div>
+        <div class="column">
+            <span class="pip"></span>
+            <span class="pip"></span>
+            <span class="pip"></span>
+        </div>
+        <div class="column">
+            <span class="pip"></span>
+            <span class="pip"></span>
+            <span class="pip"></span>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\351\233\262\346\263\211/211124-CSS-\345\274\271\346\200\247\347\233\222\345\255\220/demo2.html" "b/\345\220\264\351\233\262\346\263\211/211124-CSS-\345\274\271\346\200\247\347\233\222\345\255\220/demo2.html"
new file mode 100644
index 0000000..9abd500
--- /dev/null
+++ "b/\345\220\264\351\233\262\346\263\211/211124-CSS-\345\274\271\346\200\247\347\233\222\345\255\220/demo2.html"
@@ -0,0 +1,192 @@
+<!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>
+    #box {
+        display: inline-flex;
+        background-color: #333;
+        width: 100%;
+        height: 100%;
+    }
+
+    .div {
+        width: 100px;
+        height: 100px;
+        background-color: #999;
+        border: 3px solid #666;
+        border-radius: 15%;
+        font-size: 35px;
+        text-align: center;
+        line-height: 100px;
+    }
+</style>
+
+<body>
+    <form action="#">
+        <select name="flexDirection" id="flexdirection">
+            <option value="flex-direction" disabled>flex-direction</option>
+            <option value="row">row</option>
+            <option value="row-reverse">row-reverse</option>
+            <option value="column">column</option>
+            <option value="column-reverse">column-reverse</option>
+        </select>
+        <select name="flexWrap" id="flexwrap">
+            <option value="flex-wrap" disabled>flex-wrap</option>
+            <option value="nowarp">nowarp</option>
+            <option value="wrap">warp</option>
+            <option value="warp-reverse">warp-reverse</option>
+        </select>
+        <select name="justifyContent" id="justifycontent">
+            <option value="justify-content" disabled>justify-content</option>
+            <option value="flex-start">flex-start</option>
+            <option value="flex-end">flex-end</option>
+            <option value="center">center</option>
+            <option value="space-between">space-between</option>
+            <option value="space-around">space-around</option>
+            <option value="space-evenly">space-evenly</option>
+        </select>
+        <select name="alignItems" id="alignitems">
+            <option value="align-items" disabled>align-items</option>
+            <option value="stretch">stretch</option>
+            <option value="flex-start">flex-start</option>
+            <option value="flex-end">flex-end</option>
+            <option value="center">center</option>
+            <option value="baseline">baseline</option>
+        </select>
+        <select name="alignContent" id="aligncontent">
+            <option value="align-content" disabled>align-content</option>
+            <option value="flex-start">flex-start</option>
+            <option value="flex-end">flex-end</option>
+            <option value="center">center</option>
+            <option value="space-between">space-between</option>
+            <option value="space-around">space-around</option>
+            <option value="stretch">stretch</option>
+        </select>
+        <select name="flexFlow" id="flexflow">
+            <option value="flex-flow" disabled>flex-flow</option>
+            <option value="row nowrap">row nowrap</option>
+            <option value="row-wrap">row wrap</option>
+            <option value="row wrap-reverse">row wrap-reverse</option>
+            <option value="row-reverse nowrap">row-reverse nowrap</option>
+            <option value="row-reverse wrap-reverse">row-reverse wrap-reverse</option>
+            <option value="column nowrap">column nowrap</option>
+            <option value="column wrap">column wrap</option>
+            <option value="column wrap-reverse">column wrap-reverse</option>
+            <option value="column-reverse nowrap">column-reverse nowrap</option>
+            <option value="column-reverse wrap">column-reverse wrap</option>
+            <option value="column-reverse wrap-reverse">column-reverse wrap-reverse</option>
+        </select>
+        <button id="add">增加成员</button>
+        <button id="remove">减少成员</button>
+    </form>
+    <h1>非内联flex</h1>
+    <div id="box">
+        <div class="div">1</div>
+        <div class="div">2</div>
+        <div class="div">3</div>
+        <div class="div">4</div>
+        <div class="div">5</div>
+        <div class="div">6</div>
+    </div>
+    <script>
+        var flexdirection = document.getElementById('flexdirection');
+        console.log(flexdirection);
+        flexdirection.onchange = function () {
+            var select1 = document.getElementById('flexdirection');
+            console.log(select1);
+            var option1 = select1.options[select1.selectedIndex].value;
+            console.log(option1);
+            var box1 = document.getElementById('box');
+            box1.style.flexDirection = option1;
+        }
+        var flexwrap = document.getElementById('flexwrap');
+        console.log(flexwrap);
+        flexwrap.onchange = function () {
+            var select2 = document.getElementById('flexwrap');
+            console.log(select2);
+            var option2 = select2.options[select2.selectedIndex].value;
+            console.log(option2);
+            var box2 = document.getElementById('box');
+            box2.style.flexWrap = option2;
+        }
+        var justifycontent = document.getElementById('justifycontent');
+        console.log(justifycontent);
+        justifycontent.onchange = function () {
+            var select3 = document.getElementById('justifycontent');
+            var option3 = select3.options[select3.selectedIndex].value;
+            console.log(option3);
+            var box3 = document.getElementById('box');
+            box3.style.justifyContent = option3;
+        }
+        var alignitems = document.getElementById('alignitems');
+        alignitems.onchange = function () {
+            var select4 = document.getElementById('alignitems');
+            var option4 = select4.options[select4.selectedIndex].value;
+            var box4 = document.getElementById('box');
+            box4.style.alignItems = option4;
+        }
+        var aligncontent = document.getElementById('aligncontent');
+        console.log(aligncontent);
+        aligncontent.onchange = function () {
+            var select5 = document.getElementById('aligncontent');
+            var option5 = select5.options[select5.selectedIndex].value;
+            console.log(option5);
+            var box5 = document.getElementById('box');
+            box5.style.alignContent = option5;
+        }
+        var flexflow = document.getElementById('flexflow');
+        console.log(flexflow);
+        flexflow.onchange = function () {
+            var select6 = document.getElementById('flexflow');
+            var option6 = select6.options[select6.selectedIndex].value;
+            var box6 = document.getElementById('box');
+            box6.style.flexFlow = option6;
+        }
+        // var select = document.querySelectorAll('select');
+        // console.log(select);
+        // Array.from(select).forEach(element => {
+        //     console.log(element);
+        //     element.onchange = function (event) {
+        //         var target = event.target;
+        //         console.log(target);
+        //         var name = target.name;
+        //         console.log(name);
+        //         var options = target.options[target.selectedIndex].value;
+        //         console.log(options);
+        //         var box = document.getElementById('box');
+        //         console.log(box);
+        //         box.style[name] = options;
+        //     }
+        // });
+        
+        var add = document.getElementById('add');
+        console.log(add);
+        add.onclick = function () {
+            var divi = document.getElementById('box');
+            console.log(divi);
+            var len = divi.childElementCount;
+            console.log(len);
+            var div = document.createElement('div');
+            div.innerHTML = len + 1;
+            div.classList.add('div');
+            divi.appendChild(div);
+        }
+        var remove = document.getElementById('remove');
+        console.log(remove);
+        remove.onclick = function () {
+            var divi2 = document.getElementById('box');
+            console.log(divi2);
+            var len2 = divi2.children;
+            console.log(len2);
+            len2[len2.length - 1].remove();
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\351\233\262\346\263\211/211125-CSS-\347\275\221\346\240\274\345\270\203\345\261\200/demo1.html" "b/\345\220\264\351\233\262\346\263\211/211125-CSS-\347\275\221\346\240\274\345\270\203\345\261\200/demo1.html"
new file mode 100644
index 0000000..8a3e317
--- /dev/null
+++ "b/\345\220\264\351\233\262\346\263\211/211125-CSS-\347\275\221\346\240\274\345\270\203\345\261\200/demo1.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>Document</title>
+    <style>
+        #box1,#box2,#box3,#box4,#box5,#box9 {
+            width: 100px;
+            height: 100px;
+            border: 1px solid #eeeeee;
+            border-radius: 10px;
+            margin: 10px;
+            display: grid;
+            grid-template-rows: repeat(3,1fr);
+            grid-template-columns: repeat(3,1fr);
+            grid-template-areas: "a1 a2 a3"
+                                 "a4 a5 a6"
+                                 "a7 a8 a9";
+            justify-items: center;
+            align-items: center;
+            background-color: #e7e7e7;
+            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
+        }
+        #box1 div{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: #333;
+            grid-area: a5;
+        }
+        #box2 div{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: #333;
+        }
+        #box2 div:nth-child(2){grid-area: a9;}
+        #box3 div{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: #333;
+        }
+        #box3 div:nth-child(2){grid-area: a5;}
+        #box3 div:nth-child(3){grid-area: a9;}
+        #box4 div{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: #333;
+        }
+        #box4 div:nth-child(2){grid-area: a3;}
+        #box4 div:nth-child(3){grid-area: a7;}
+        #box4 div:nth-child(4){grid-area: a9;}
+        #box5 div{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: #333;
+        }
+        #box5 div:nth-child(2){grid-area: a3;}
+        #box5 div:nth-child(3){grid-area: a5;}
+        #box5 div:nth-child(4){grid-area: a7;}
+        #box5 div:nth-child(5){grid-area: a9;}
+        #box9 div{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: #333;
+        }
+        #box9 div:nth-child(3){grid-area: a2;}
+        #box9 div:nth-child(4){grid-area: a3;}
+        #box9 div:nth-child(5){grid-area: a4;}
+        #box9 div:nth-child(2){grid-area: a5;}
+        #box9 div:nth-child(3){grid-area: a6;}
+        #box9 div:nth-child(4){grid-area: a7;}
+        #box9 div:nth-child(5){grid-area: a8;}
+        #box9 div:nth-child(9){grid-area: a9;}
+        #box6 {
+            width: 100px;
+            height: 100px;
+            border: 1px solid #eeeeee ;
+            border-radius: 10px;
+            margin: 10px;
+            display: grid;
+            grid-template-rows: repeat(3,1fr);
+            grid-template-columns: repeat(2,1fr);
+            grid-template-areas: "a1 a2"
+                                 "a3 a4"
+                                 "a5 a6";
+            justify-items: center;
+            align-items: center;
+            background-color: #e7e7e7;
+            box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
+        }
+        #box6 div{
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: #333;
+        }
+    </style>
+</head>
+<body>
+    <div id="box1">
+        <div></div>
+    </div>
+    <div id="box2">
+        <div></div>
+        <div></div>
+    </div>
+    <div id="box3">
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div id="box4">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div id="box5">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div id="box6">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+    <div id="box9">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\351\233\262\346\263\211/211125-CSS-\347\275\221\346\240\274\345\270\203\345\261\200/demo2.html" "b/\345\220\264\351\233\262\346\263\211/211125-CSS-\347\275\221\346\240\274\345\270\203\345\261\200/demo2.html"
new file mode 100644
index 0000000..758cd5e
--- /dev/null
+++ "b/\345\220\264\351\233\262\346\263\211/211125-CSS-\347\275\221\346\240\274\345\270\203\345\261\200/demo2.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
diff --git "a/\345\220\264\351\233\262\346\263\211/211126-CSS-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo1.html" "b/\345\220\264\351\233\262\346\263\211/211126-CSS-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo1.html"
new file mode 100644
index 0000000..01ac2b4
--- /dev/null
+++ "b/\345\220\264\351\233\262\346\263\211/211126-CSS-\350\275\254\346\215\242\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/demo1.html"
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>时钟案例</title>
+    <style>
+        .clock {
+            width: 200px;
+            height: 200px;
+            border-radius: 50%;
+            border: 4px solid black;
+            background-color: #eee;
+            margin: 0 auto;
+            position: relative;
+        }
+    
+        .center {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: #cccccc;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 2;
+        }
+    
+        .scale {
+            width: 5px;
+            height: 200px;
+            background-color: #000000;
+            position: absolute;
+            left: 49%;
+        }
+    
+        .scale1 {
+            transform: rotate(30deg);
+        }
+    
+        .scale2 {
+            transform: rotate(60deg);
+        }
+    
+        .scale3 {
+            transform: rotate(90deg);
+        }
+    
+        .scale4 {
+            transform: rotate(120deg);
+        }
+    
+        .scale5 {
+            transform: rotate(150deg);
+        }
+    
+        .scale6 {
+            transform: rotate(180deg);
+        }
+    
+    
+        .blank {
+            width: 170px;
+            height: 170px;
+            border-radius: 50%;
+            background-color: #eee;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    
+        .hours {
+            position: absolute;
+            width: 10px;
+            height: 45px;
+            background-color: #aac8c1;
+            left: 50%;
+            top: 0%;
+            margin-top: 55px;
+            transform: translate(-50%, -50%);
+            transform-origin: bottom center;
+            transform: rotate(30deg);
+            margin-left: -5px;
+        }
+    
+        .minute {
+            position: absolute;
+            width: 8px;
+            height: 60px;
+            background-color: #b7c8b3;
+            left: 50%;
+            top: 0%;
+            margin-top: 40px;
+            transform: translate(-50%, -50%);
+            transform-origin: bottom center;
+            transform: rotate(70deg);
+            margin-left: -4px;
+        }
+    
+        .second {
+            position: absolute;
+            width: 3px;
+            height: 70px;
+            background-color: #b1c0c8;
+            left: 50%;
+            top: 0%;
+            margin-top: 30px;
+            transform-origin: bottom center;
+            /* animation: myfirst 60s steps(60) infinite; */
+            z-index: 2;
+        }
+    
+        @keyframes myfirst {
+            form {
+                /* transform: rotate(0deg); */
+            }
+    
+            to {
+                transform: rotate(360deg);
+            }
+    
+        }
+    </style>
+    
+    <body>
+        <div class="clock">
+            <div class="scale scale1"></div>
+            <div class="scale scale2"></div>
+            <div class="scale scale3"></div>
+            <div class="scale scale4"></div>
+            <div class="scale scale5"></div>
+            <div class="scale scale6"></div>
+            <div class="blank"></div>
+            <div class="hours"></div>
+            <div class="minute"></div>
+            <div class="second"></div>
+            <div class="center"></div>
+        </div>
+    </body>
+    <script>
+        function Time() {
+            var date = new Date();
+            var hours = date.getHours();
+            var minute = date.getMinutes();
+            var second = date.getSeconds();
+            var hours2 = hours * 30 + minute * 0.5 + second / 120;
+            var minute2 = minute * 6 + second * 0.1;
+            var second2 = second * 6;
+            document.querySelector('.hours').style.transform = `rotate(${hours2}deg)`;
+            document.querySelector('.minute').style.transform = `rotate(${minute2}deg)`;
+            document.querySelector('.second').style.transform = `rotate(${second2}deg)`;
+        }
+        Time();
+        setInterval(Time, 1000);
+    </script>
+
+</body>
+</html>
-- 
Gitee