diff --git "a/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/bottom.html" "b/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/bottom.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f42db82c63f5c58c6965be86d2adbb932a09292e
--- /dev/null
+++ "b/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/bottom.html"
@@ -0,0 +1,78 @@
+<!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>
+        :root{
+            --popBg:rgb(204, 252, 236);
+            --color:rgb(172, 158, 158);
+            --triangle:5px;
+            --distance:-12px;
+        }
+        .pop{
+            position: relative;
+            z-index: 101;
+        }
+        .bottom{
+            width: 100px;
+            line-height: 2;
+            color: white;
+            background-color: rgb(76, 76, 129);
+            border-radius: 5px;
+            text-align: center;
+            cursor: pointer;
+            margin: 200px auto;
+        }
+        .pop::before,
+        .pop::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        .pop::before {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 var(--triangle) var(--triangle) var(--triangle);
+            border-color:  transparent transparent var(--popBg) transparent;
+            left: calc(50% - var(--triangle));
+            top: 50px;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+
+        .pop::after {
+            font-size: 14px;
+            color: var(--color);
+            /* 内容为标签内的属性值 */
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            white-space: nowrap;
+            z-index: -1;
+            left: 50%;
+            top: 170%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--popBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .pop:hover::before,
+        .pop:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="pop bottom" aria-controls="bottom泡泡">气泡气泡</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/left.html" "b/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/left.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0513bdf4e8b7759dc1d802003626053fcd0ee91e
--- /dev/null
+++ "b/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/left.html"
@@ -0,0 +1,78 @@
+<!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>
+        :root{
+            --popBg:rgb(204, 252, 236);
+            --color:rgb(172, 158, 158);
+            --triangle:5px;
+            --distance:-12px;
+        }
+        .pop{
+            position: relative;
+            z-index: 101;
+        }
+        .left{
+            width: 100px;
+            line-height: 2;
+            color: white;
+            background-color: rgb(76, 76, 129);
+            border-radius: 5px;
+            text-align: center;
+            cursor: pointer;
+            margin: 200px auto;
+        }
+        .pop::before,
+        .pop::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        .pop::before {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: var(--triangle) 0 var(--triangle) var(--triangle);
+            border-color:  transparent transparent transparent var(--popBg);
+            left: calc(-2% - var(--triangle));
+            top: 23px;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+
+        .pop::after {
+            font-size: 14px;
+            color: var(--color);
+            /* 内容为标签内的属性值 */
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            white-space: nowrap;
+            z-index: -1;
+            left: -43%;
+			bottom: -22%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--popBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .pop:hover::before,
+        .pop:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="pop left" aria-controls="left泡泡">气泡气泡</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/right.html" "b/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/right.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a8d29f3656778df487cbc858cf7fc3c0243e9c72
--- /dev/null
+++ "b/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/right.html"
@@ -0,0 +1,78 @@
+<!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>
+        :root{
+            --popBg:rgb(204, 252, 236);
+            --color:rgb(172, 158, 158);
+            --triangle:5px;
+            --distance:-12px;
+        }
+        .pop{
+            position: relative;
+            z-index: 101;
+        }
+        .right{
+            width: 100px;
+            line-height: 2;
+            color: white;
+            background-color: rgb(76, 76, 129);
+            border-radius: 5px;
+            text-align: center;
+            cursor: pointer;
+            margin: 200px auto;
+        }
+        .pop::before,
+        .pop::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        .pop::before {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: var(--triangle) var(--triangle) var(--triangle) 0;
+            border-color:  transparent var(--popBg) transparent transparent;
+            left: calc(110% - var(--triangle));
+            top: 23px;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+
+        .pop::after {
+            font-size: 14px;
+            color: var(--color);
+            /* 内容为标签内的属性值 */
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            white-space: nowrap;
+            z-index: -1;
+            left: 152%;
+			bottom: -22%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--popBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .pop:hover::before,
+        .pop:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="pop right" aria-controls="right泡泡">气泡气泡</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/top.html" "b/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/top.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1925bb29937b91ec4cb2aa5ff342eb700846bf5b
--- /dev/null
+++ "b/\351\231\210\351\222\212\351\224\213/21.12.09-\346\260\224\346\263\241/top.html"
@@ -0,0 +1,78 @@
+<!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>
+        :root{
+            --popBg:rgb(204, 252, 236);
+            --color:rgb(172, 158, 158);
+            --triangle:5px;
+            --distance:-12px;
+        }
+        .pop{
+            position: relative;
+            z-index: 101;
+        }
+        .top{
+            width: 100px;
+            line-height: 2;
+            color: white;
+            background-color: rgb(76, 76, 129);
+            border-radius: 5px;
+            text-align: center;
+            cursor: pointer;
+            margin: 200px auto;
+        }
+        .pop::before,
+        .pop::after {
+            visibility: hidden;
+            opacity: 0;
+            transform: translate3d(0, 0, 0);
+            transition: all 0.3s ease 0.2s;
+            box-sizing: border-box;
+        }
+
+        .pop::before {
+            content: "";
+            position: absolute;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: var(--triangle) var(--triangle) 0 var(--triangle);
+            border-color: var(--popBg) transparent transparent transparent;
+            left: calc(50% - var(--triangle));
+            top: 0px;
+            transform: translateX(0%) translateY(var(--distance));
+        }
+
+        .pop::after {
+            font-size: 14px;
+            color: var(--color);
+            /* 内容为标签内的属性值 */
+            content: attr(aria-controls);
+            position: absolute;
+            padding: 6px 12px;
+            white-space: nowrap;
+            z-index: -1;
+            left: 50%;
+            bottom: 100%;
+            transform: translateX(-50%) translateY(var(--distance));
+            background: var(--popBg);
+            line-height: 1;
+            border-radius: 2px;
+        }
+
+        .pop:hover::before,
+        .pop:hover::after {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body>
+    <div class="pop top" aria-controls="top泡泡">气泡气泡</div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\231\210\351\222\212\351\224\213/21.12.10-\345\274\200\345\205\263/demo.html" "b/\351\231\210\351\222\212\351\224\213/21.12.10-\345\274\200\345\205\263/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..480162b5d301843697117e6241d1b877fef73dd3
--- /dev/null
+++ "b/\351\231\210\351\222\212\351\224\213/21.12.10-\345\274\200\345\205\263/demo.html"
@@ -0,0 +1,86 @@
+<!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>
+        .all {
+            width: 500px;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        input[type="checkbox"] {
+            display: none;
+        }
+
+        label {
+            position: relative;
+            width: 50px;
+            height: 26px;
+            background: lightgrey;
+            border-radius: 13px;
+            cursor: pointer;
+            transition: background .3s;
+        }
+
+        label[disabled] {
+            cursor: not-allowed;
+            opacity: .5;
+        }
+
+        label::before,
+        label::after {
+            transition: all .3s;
+            position: absolute;
+        }
+
+        label::before {
+            content: '关';
+            font-size: 16px;
+            line-height: 1;
+            top: 5px;
+            left: 28px;
+            color: white;
+        }
+
+        label::after {
+            content: '';
+            top: 1px;
+            left: 1px;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            background: white;
+        }
+
+        input[type="checkbox"]:checked+label {
+            background: #b4a078;
+        }
+
+        input[type="checkbox"]:checked+label::before {
+            content: '开';
+            left: 6px;
+        }
+
+        input[type="checkbox"]:active+label::after {
+            width: 23px;
+        }
+
+        input[type="checkbox"]:checked+label::after {
+            left: 25px;
+        }
+    </style>
+</head>
+<body>
+    <div class="all">
+        <input type="checkbox" id="switch" checked hidden>
+        <label for="switch"></label>
+        <input type="checkbox" id="switch-disabled" disabled hidden>
+        <label for="switch-disabled" disabled></label>
+        <input type="checkbox" id="switch-checked-disabled" checked disabled hidden>
+        <label for="switch-checked-disabled" disabled></label>
+    </div>
+</body>
+</html>
\ No newline at end of file
