diff --git "a/\345\274\240\350\257\227\345\222\217/211124-css-\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/1.html" "b/\345\274\240\350\257\227\345\222\217/211124-css-\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..849ce1a307c1d848750611a52c3b92db1d659735
--- /dev/null
+++ "b/\345\274\240\350\257\227\345\222\217/211124-css-\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/1.html"
@@ -0,0 +1,97 @@
+
+<!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:pink;
+        width: 100%;
+        height: 100%;
+    }
+
+    .div {
+        width: 100px;
+        height: 100px;
+        background-color:pink;
+        border: 3px solid wheat;
+        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>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\227\345\222\217/211124-css-\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/2.html" "b/\345\274\240\350\257\227\345\222\217/211124-css-\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/2.html"
new file mode 100644
index 0000000000000000000000000000000000000000..e49ab318f91642fbef8e66fc3145ccf4ae7232f0
--- /dev/null
+++ "b/\345\274\240\350\257\227\345\222\217/211124-css-\344\275\234\344\270\232-\345\274\271\346\200\247\347\233\222\345\255\220/2.html"
@@ -0,0 +1,164 @@
+<!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>
+		*{
+			margin: 0;
+			padding: 0;
+			/* box-sizing: border-box; */
+		}
+		html,body{
+			height: 100%;
+		} */
+		 body{
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+		.dice{
+			margin: 16px;
+			padding: 4px;
+			background-color: #e7e7e7;
+			width: 104px;
+			height: 104px;
+			object-fit: contain;
+			border-radius: 10%;
+box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7;
+		}
+
+		/* 骰子的点 */
+		.pip{
+display: block;
+width: 24px;
+height: 24px;
+border-radius: 50%;
+margin: 4px;
+background-color: #333;
+box-shadow: insert 03px #111,  inset 0-3px #555;
+
+
+		}
+		.center{
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		.between{
+			display: flex;
+		justify-content:  space-between;	}
+		.between .pip:nth-of-type(2){
+			align-self: flex-end;
+		}
+		.four{
+			display: flex;
+			justify-content: space-between;
+			flex-direction: column;
+		}
+		.third{
+			display: flex;
+			
+		}
+		.third .pip:nth-of-type(2){
+		align-self: center;
+		
+			
+		}
+		.third .pip:nth-of-type(3){
+			align-self: flex-end;
+		}	
+		
+			.five .column:nth-of-type(2){
+		justify-content: center;
+	
+		}
+	
+		.column{
+			display: flex;
+
+justify-content: space-between;
+		}
+	
+	</style>
+</head>
+<body>
+	<div class="center dice">
+		<span class="pip"></span>
+	</div>
+	<div class="between dice">
+		<span class="pip"></span>
+		<span class="pip"></span>
+	</div>
+	<div class="third dice">
+		<span class="pip"></span>
+		<span class="pip"></span>
+		<span class="pip"></span>
+		
+	</div>
+	<div class="four dice">
+		<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="five dice">
+		<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="six dice">
+
+		<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 class="column">
+			<span class="pip"></span>
+			<span class="pip"></span>
+		
+		</div>
+
+	</div>
+	<div class="six dice">
+
+		<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>
diff --git "a/\345\274\240\350\257\227\345\222\217/211125-css\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/4.html" "b/\345\274\240\350\257\227\345\222\217/211125-css\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/4.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f364556a0a1a55a0fc42b33d0d97685ca5bf97ad
--- /dev/null
+++ "b/\345\274\240\350\257\227\345\222\217/211125-css\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/4.html"
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <style>
+    #box{ width:100px; height:100px; border:1px black solid; border-radius: 15px; 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;}
+    #box div{ width:20px; height:20px; border-radius: 50%; background:black;
+        grid-area: a5;}
+
+    #box2{ width:100px; height:100px; border:1px black solid; border-radius: 15px; 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;}
+    #box2 div{ width:20px; height:20px; border-radius: 50%; background:black;}
+    #box2 div:nth-of-type(2){ grid-area: a9; }
+
+    #box3{ width:100px; height:100px; border:1px black solid; border-radius: 15px; 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;}
+    #box3 div{ width:20px; height:20px; border-radius: 50%; background: black;}
+    #box3 div:nth-of-type(2){ grid-area: a5; }
+    #box3 div:nth-of-type(3){ grid-area: a9; }
+
+    #box4{ width:100px; height:100px; border:1px black solid; border-radius: 15px; 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;}
+    #box4 div{ width:20px; height:20px; border-radius: 50%; background:black;}
+    #box4 div:nth-of-type(2){ grid-area: a3; }
+    #box4 div:nth-of-type(3){ grid-area: a7; }
+    #box4 div:nth-of-type(4){ grid-area: a9; }
+    #box5{ width:100px; height:100px; border:1px black solid; border-radius: 15px; 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;}
+    #box5 div{ width:20px; height:20px; border-radius: 50%; background:black;}
+    #box5 div:nth-of-type(2){ grid-area: a3; }
+    #box5 div:nth-of-type(3){ grid-area: a5; }
+    #box5 div:nth-of-type(4){ grid-area: a7; }
+    #box5 div:nth-of-type(5){ grid-area: a9; }
+    #box6{ width:100px; height:100px; border:1px black solid; border-radius: 15px; 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;}
+    #box6 div{ width:20px; height:20px; border-radius: 50%; background:black;}
+    #box6 div:nth-of-type(2){ grid-area: a3; }
+    #box6 div:nth-of-type(3){ grid-area: a4; }
+    #box6 div:nth-of-type(4){ grid-area: a6; }
+    #box6 div:nth-of-type(5){ grid-area: a7; }
+    #box6 div:nth-of-type(6){ grid-area: a9; }
+    </style>
+</head>
+<body>
+    <div id="box">
+        <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>
+
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\227\345\222\217/211125-css\344\275\234\344\270\232-\347\275\221\346\240\274\345\270\203\345\261\200/demo02.html" "b/\345\274\240\350\257\227\345\222\217/211125-css\344\275\234\344\270\232-\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\350\257\227\345\222\217/211125-css\344\275\234\344\270\232-\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\350\257\227\345\222\217/211126-css\344\275\234\344\270\232-\350\275\254\346\215\242\350\277\207\345\272\246\345\222\214\345\212\250\347\224\273/1.html" "b/\345\274\240\350\257\227\345\222\217/211126-css\344\275\234\344\270\232-\350\275\254\346\215\242\350\277\207\345\272\246\345\222\214\345\212\250\347\224\273/1.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a1b1c91dc58cebbe3c89971fcc0f24e3f302bb31
--- /dev/null
+++ "b/\345\274\240\350\257\227\345\222\217/211126-css\344\275\234\344\270\232-\350\275\254\346\215\242\350\277\207\345\272\246\345\222\214\345\212\250\347\224\273/1.html"
@@ -0,0 +1,152 @@
+
+<!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 black;
+        border-radius: 50%;
+        background-color: white;
+        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: 400px;
+        height: 400px;
+        background-color: white;
+        border-radius: 50%;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%);
+    }
+    
+    /* 时针 */
+    .hour{
+        position: absolute;
+        width: 18px;
+        height: 130px;
+        background-color:chocolate;
+        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: pink;
+        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: #384639;
+        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
