diff --git "a/\345\274\240\344\272\246\345\270\214/11.25\347\275\221\346\240\274\345\270\203\345\261\200/demo01.html" "b/\345\274\240\344\272\246\345\270\214/11.25\347\275\221\346\240\274\345\270\203\345\261\200/demo01.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a05c237dd9cd1f17a4efcc8425187febcc205c52
--- /dev/null
+++ "b/\345\274\240\344\272\246\345\270\214/11.25\347\275\221\346\240\274\345\270\203\345\261\200/demo01.html"
@@ -0,0 +1,141 @@
+<!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>
+    body{
+        padding: 20px;
+        column-count: 6;
+    }
+    .box{
+        display: grid;
+        width: 130px;
+        height: 130px;
+        background-color: #eee;
+        border-radius: 20px;
+        box-shadow: 0px 5px  rgba(110, 104, 104,.6);
+        grid-template-columns: repeat(3,1fr);
+        grid-template-rows: repeat(3,1fr);
+    }
+    span{
+        margin: 10px;
+        display: flex;
+        width: 15px;
+        height: 15px;
+        border: 5px solid black;
+        border-radius: 50%;
+        background-color: black;
+    }
+    .box1 span{
+        grid-area: 2/2/3/3;
+    }
+
+    .box2 span:nth-child(1){
+        grid-area: 1/1/2/2;
+    }
+    .box2 span:nth-child(2){
+        grid-area: 3/3/4/4;
+    }
+
+    .box3 span:nth-child(1){
+        grid-area: 1/1/2/2;
+    }
+    .box3 span:nth-child(2){
+        grid-area: 2/2/3/3;
+    }
+    .box3 span:nth-child(3){
+        grid-area: 3/3/4/4;
+    }
+
+    .box4 span:nth-child(1){
+        grid-area: 1/1/2/2;
+    }
+    .box4 span:nth-child(2){
+        grid-area: 3/1/4/2;
+    }
+    .box4 span:nth-child(3){
+        grid-area: 1/3/2/4;
+    }
+    .box4 span:nth-child(4){
+        grid-area: 3/3/4/4;
+    }
+
+    .box5 span:nth-child(1){
+        grid-area: 1/1/2/2;
+    }
+    .box5 span:nth-child(2){
+        grid-area: 3/1/4/2;
+    }
+    .box5 span:nth-child(3){
+        grid-area: 2/2/3/3;
+    }
+    .box5 span:nth-child(4){
+        grid-area: 1/3/2/4;
+    }
+    .box5 span:nth-child(5){
+        grid-area: 3/3/4/4;
+    }
+    
+    .box6 span:nth-child(1){
+        grid-area: 1/1/2/2;
+    }
+    .box6 span:nth-child(2){
+        grid-area: 3/1/4/2;
+    }
+    .box6 span:nth-child(3){
+        grid-area: 2/1/3/2;
+    }
+    .box6 span:nth-child(4){
+        grid-area: 2/3/3/4;
+    }
+    .box6 span:nth-child(5){
+        grid-area: 1/3/2/4;
+    }
+    .box6 span:nth-child(6){
+        grid-area: 3/3/4/4;
+    }
+</style>
+<body>
+    <div class="box box1">
+        <span></span>
+    </div>
+
+    <div class="box box2">
+        <span></span>
+        <span></span>
+    </div>
+
+    <div class="box box3">
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+
+    <div class="box box4">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+
+    <div class="box box5">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+
+    <div class="box box6">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\344\272\246\345\270\214/11.25\347\275\221\346\240\274\345\270\203\345\261\200/demo02.html" "b/\345\274\240\344\272\246\345\270\214/11.25\347\275\221\346\240\274\345\270\203\345\261\200/demo02.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a626f7326468839a80dedb36f3f2d5e8484a6626
--- /dev/null
+++ "b/\345\274\240\344\272\246\345\270\214/11.25\347\275\221\346\240\274\345\270\203\345\261\200/demo02.html"
@@ -0,0 +1,89 @@
+<!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>
+    .box{
+        width: 50%;
+        height: 500px;
+        color: honeydew;
+        font-size: 50px;
+        margin: auto;
+        background-color: antiquewhite;
+        display: grid;
+        grid-template-columns: repeat(12,1fr);
+        grid-template-rows: repeat(3,0.25fr);
+    }
+    .box div:nth-child(1){
+        background-color: red;
+        grid-column: 1/7;
+        grid-row: 1/2;
+    }
+    .box div:nth-child(2){
+        background-color: green;
+        grid-column: 7/13;
+        grid-row: 1/2;
+    }
+    .box div:nth-child(3){
+        background-color: rgb(34, 187, 161);
+        grid-column: 1/5;
+        grid-row: 2/3;
+    }
+    .box div:nth-child(4){
+        background-color: yellow;
+        grid-column: 5/9;
+        grid-row: 2/3;
+    }
+    .box div:nth-child(5){
+        background-color: orange;
+        grid-column: 9/13;
+        grid-row: 2/3;
+    }
+    .box div:nth-child(6){
+        background-color: pink;
+        grid-column: 1/4;
+        grid-row: 3/4;
+    }
+    .box div:nth-child(7){
+        background-color: purple;
+        grid-column: 4/7;
+        grid-row: 3/4;
+    }
+    .box div:nth-child(8){
+        background-color: blue;
+        grid-column: 7/10;
+        grid-row: 3/4;
+    }
+    .box div:nth-child(9){
+        background-color: black;
+        grid-column: 10/13;
+        grid-row: 3/4;
+    }
+    .box div:nth-child(10){
+        background-color: red;
+        grid-column: 1/7;
+    }
+    .box div:nth-child(11){
+        background-color: green;
+        grid-column: 7/13;
+    }
+</style>
+<body>
+    <div class="box">
+        <div class="item">50%</div>
+        <div class="item">50%</div>
+        <div class="item">33%</div>
+        <div class="item">33%</div>
+        <div class="item">33%</div>
+        <div class="item">25%</div>
+        <div class="item">25%</div>
+        <div class="item">25%</div>
+        <div class="item">25%</div>
+        <div class="item">50%</div>
+        <div class="item">50%</div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\344\272\246\345\270\214/11.26CSS\350\275\254\346\215\242\357\274\214\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/clock.html" "b/\345\274\240\344\272\246\345\270\214/11.26CSS\350\275\254\346\215\242\357\274\214\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/clock.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fa114772c22cbf33871d607085e3d6d524f86b4f
--- /dev/null
+++ "b/\345\274\240\344\272\246\345\270\214/11.26CSS\350\275\254\346\215\242\357\274\214\350\277\207\346\270\241\345\222\214\345\212\250\347\224\273/clock.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>
+</head>
+<style>
+    .clock{
+        position: absolute;
+        width: 500px;
+        height: 500px;
+        border: 5px solid #4faa57;
+        border-radius: 50%;
+        background-color: antiquewhite;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+    }
+    .clock div:nth-child(-n+6){
+            width: 6px;
+            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)
+    }
+    
+    /* 空白圆盘 */
+    .cover{
+        position: absolute;
+        width: 480px;
+        height: 480px;
+        background-color: antiquewhite;
+        border-radius: 50%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+    }
+    
+    /* 时针 */
+    .hour{
+        position: absolute;
+        width: 18px;
+        height: 130px;
+        background-color: salmon;
+        top: 0%;
+        left: 50%;
+        margin-top: calc(250px - 130px);
+        margin-left: -9px;
+        transform-origin: bottom center;
+        /* animation: mytrans 43200s steps(43200) infinite; */
+    }
+    /* 分针 */
+    .minute{
+        position: absolute;
+        width: 12px;
+        height: 190px;
+        background-color: lightblue;
+        top: 0%;
+        left: 50%;
+        margin-top: calc(250px - 190px);
+        margin-left: -6px;
+        transform-origin: bottom center;
+        /* animation: mytrans 3600s steps(3600) infinite; */
+    }
+    /* 秒针 */
+    .seconds{
+        position: absolute;
+        width: 5px;
+        height: 220px;
+        background-color: rgba(233, 230, 37, 0.842);
+        top: 0%;
+        left: 50%;
+        margin-top: calc(250px - 220px);
+        margin-left: -3px;
+        transform-origin: bottom center;
+        /* transform:rotate() */
+        /* animation: mytrans 60s steps(60) infinite; */
+    }
+    /* 小圆点 */
+    .cent{
+        position: absolute;
+        width: 25px;
+        height: 25px;
+        border-radius: 50%;
+        background-color: #4faa57;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+        
+    }
+    @keyframes mytrans  {
+        from{
+            transform: rotate(0deg);
+        }
+        to{
+            transform: rotate(360deg);
+            }
+    }
+</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="cover"></div>
+        <div class="hour"></div>
+        <div class="minute"></div>
+        <div class="seconds"></div>
+        <div class="cent"></div>
+    </div>
+    <script>
+        function showTime(){
+            let myDate = new Date();
+            let myHours = myDate.getHours();
+            let myMinutes =myDate.getMinutes();
+            let mySeconds = myDate.getSeconds();
+            let hourT =myHours * 30 + myMinutes * 0.5 + mySeconds /120;
+            let minutesT = myMinutes * 6 + mySeconds * 0.1;
+            let secondsT = mySeconds * 6 ;
+            document.querySelector('.hour').style.transform=`rotate(${hourT}deg)`;
+            document.querySelector('.minute').style.transform=`rotate(${minutesT}deg)`;
+            document.querySelector('.seconds').style.transform=`rotate(${secondsT}deg)`;
+        }
+        showTime();
+		setInterval(showTime,1000);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\344\272\246\345\270\214/CSS\345\274\271\346\200\247\347\233\222\345\255\220/demo02.html" "b/\345\274\240\344\272\246\345\270\214/CSS\345\274\271\346\200\247\347\233\222\345\255\220/demo02.html"
index 17024ea8a2e33d170c75af3f96fe3a21ea70b332..c74efa822da4e031f531d2925cf10e1456797cd5 100644
--- "a/\345\274\240\344\272\246\345\270\214/CSS\345\274\271\346\200\247\347\233\222\345\255\220/demo02.html"
+++ "b/\345\274\240\344\272\246\345\270\214/CSS\345\274\271\346\200\247\347\233\222\345\255\220/demo02.html"
@@ -23,7 +23,7 @@
     <br>
     <br>
     <form action="#" onsubmit="return false;">
-        <select name="flex-direction" id="flex-direction">
+        <select name="flexDirection" id="flex-direction">
             <option value="flex-direction" disabled >flex-direction</option>
             <option value="row"  >row</option>
             <option value="row-reverse"  >row-reverse</option>
@@ -31,12 +31,14 @@
             <option value="column-reverse"  >column-reverse</option>    
         </select>
 
-        <select name="flex-wrap" id="flex-wrap">
+        <select name="flexWrap" id="flex-wrap">
             <option value="flex-wrap" disabled >flex-wrap</option>
             <option value="nowrap"  >nowrap</option>
             <option value="wrap"  >wrap</option>
             <option value="wrap-reverse"  >wrap-reverse</option>    
         </select>
+        <input type="button" value="添加盒子" id="add">
+        <input type="button" value="删除盒子" id="del">
     </form>
     <br>
     <div id="parent">
@@ -54,24 +56,59 @@
         <div class="item">12</div>
     </div>
     <script>
+        let select = document.querySelectorAll('select');
+        Array.from(select).forEach((ele ,i)=>{
+            console.log(ele);
+            ele.onchange=function(even){
+                let select = this;
+                let selectN=select.name;
+                let val = select.options[select.selectedIndex].value;
+                let div=document.getElementById('parent');
+                console.log(div);
+                console.log(selectN);
+                div.style[selectN]=val;
+                console.log(div.style);
+                console.log(div.style.selectN);
+            }
+        })
 
-        let direction =document.getElementById('flex-direction');
-        direction.onchange=function(){
-            let select = document.getElementById("flex-direction");
-            let val = select.options[select.selectedIndex].value;
-            console.log(val);
-            let div=document.getElementById('parent');
-            div.style.flexDirection=val;
+        let add=document.getElementById('add');
+        add.onclick=function(){
+            let parent=document.getElementById('parent');
+            let chlidren=parent.children;
+            console.log(chlidren.length);
+            let div=document.createElement('div');
+            div.innerHTML=chlidren.length+1;
+            div.classList.add('item');
+            parent.appendChild(div);
         }
 
-        let wrap =document.getElementById('flex-wrap');
-        wrap.onchange=function(){
-            let select = document.getElementById("flex-wrap");
-            let val = select.options[select.selectedIndex].value;
-            console.log(val);
-            let div=document.getElementById('parent');
-            div.style.flexWrap=val;
+        let del=document.getElementById('del');
+        del.onclick=function(){
+            let parent=document.getElementById('parent');
+            console.log(parent);
+            let chlidren=parent.children;
+            chlidren[chlidren.length-1].remove();
+            // console.log(chlidren[chlidren.length-1]);
         }
+
+        // let direction =document.getElementById('flex-direction');
+        // direction.onchange=function(){
+        //     let select = document.getElementById("flex-direction");
+        //     let val = select.options[select.selectedIndex].value;
+        //     console.log(val);
+        //     let div=document.getElementById('parent');
+        //     div.style.flexDirection=val;
+        // }
+
+        // let wrap =document.getElementById('flex-wrap');
+        // wrap.onchange=function(){
+        //     let select = document.getElementById("flex-wrap");
+        //     let val = select.options[select.selectedIndex].value;
+        //     console.log(val);
+        //     let div=document.getElementById('parent');
+        //     div.style.flexWrap=val;
+        // }
     </script>
 </body>
 </html>
\ No newline at end of file
