diff --git "a/\346\236\227\345\271\274\350\212\263/2021.12.09--\345\274\271\345\207\272\346\260\224\346\263\241/pop.html" "b/\346\236\227\345\271\274\350\212\263/2021.12.09--\345\274\271\345\207\272\346\260\224\346\263\241/pop.html"
new file mode 100644
index 0000000000000000000000000000000000000000..d8a8483eeee9f462f2a0f06ceab8e6a05bc46e6a
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.12.09--\345\274\271\345\207\272\346\260\224\346\263\241/pop.html"
@@ -0,0 +1,100 @@
+<!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>
+    :root {
+        /* 定义气泡弹出背景色 */
+        --poptipBg: pink;
+        /* 弹出框字体颜色 */
+        --color: #fff;
+        /* 弹出框三角形边长 */
+        --triangle: 8px;
+        /* 弹出框与元素的偏移 */
+        --distance: -12px;
+    }
+
+    .poptip {
+        position: relative;
+        z-index: 101;
+    }
+
+    .poptip::before,
+    .poptip::after {
+        visibility: hidden;
+        opacity: 0;
+        transform: translate3d(0, 0, 0);
+        transition: all 0.3s ease 0.2s;
+        box-sizing: border-box;
+    }
+
+    .poptip::before {
+        content: "";
+        position: absolute;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-width: var(--triangle) var(--triangle) 0 var(--triangle);
+        border-color: var(--poptipBg) transparent transparent transparent;
+        left: calc(50% - var(--triangle));
+        top: 0px;
+        transform: translateX(-50%) translateY(var(--distance));
+        /* transform: rotate(-90deg);
+        margin-left: -84px;
+        margin-top: 37px; */
+        transform: rotate(90deg);
+        margin-left: 61%;
+    }
+
+    .poptip::after {
+        font-size: 14px;
+        color: var(--color);
+        /* 内容为标签内的属性值 */
+        content: attr(aria-controls);
+        position: absolute;
+        padding: 6px 12px;
+        /* 文本换行 */
+        white-space: wrap;
+        z-index: -1;
+        /* 朝左弹出气泡 */
+        /* top: -10%;
+        right: 107%; */
+        /* left: 50%;
+        bottom: 100%; */
+        left: 130%;
+        top:-50%;
+        transform: translateX(-50%) translateY(var(--distance));
+        background: var(--poptipBg);
+        line-height: 1;
+        border-radius: 2px;
+    }
+
+    .poptip:hover::before,
+    .poptip:hover::after {
+        visibility: visible;
+        opacity: 1;
+    }
+
+    .btn {
+        width: 100px;
+        line-height: 1.5;
+        padding: 5px 10px;
+        color: #fff;
+        background: linear-gradient(to top,skyblue,pink);
+        border-radius: 4px;
+        text-align: center;
+        cursor: pointer;
+        margin: 200px auto;
+    }
+</style>
+
+<body>
+    <div class="poptip btn" aria-controls="哈哈哈哈哈哈哈">气泡提示</div>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.12.10--\350\207\252\345\256\232\344\271\211\346\214\211\351\222\256/demo.html" "b/\346\236\227\345\271\274\350\212\263/2021.12.10--\350\207\252\345\256\232\344\271\211\346\214\211\351\222\256/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2194c86fe28951963b08e07bbfaae314518dadbe
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.12.10--\350\207\252\345\256\232\344\271\211\346\214\211\351\222\256/demo.html"
@@ -0,0 +1,77 @@
+<!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>自定义开关按钮</title>
+</head>
+<style>
+    /* 采用flex布局让两边固定 */
+    .box{
+        width: 500px;
+        display: flex;
+        justify-content: space-around;
+    }
+    /* 去掉input原生的样式 */
+    input[type="checkbox"]{
+        display: none;
+    }
+    /* 禁用按钮 */
+    label[disabled]{
+        cursor: not-allowed;
+        opacity:.5;
+    }
+    input[type="checkbox"] + label{
+        position: relative;
+        width: 50px;
+        height: 25px;
+        background:linear-gradient(to top,purple,plum);
+        border-radius:15px;
+        cursor: pointer;
+        transition: all .8s;
+    }
+    label::before,
+    label::after{
+        transition:all .8s;
+    }
+     input[type="checkbox"] +label::before{
+        content: "关";
+        top: 5px;
+        margin-left:25px;
+        padding: 5px 5px;
+        color: #fff;
+    }
+    input[type="checkbox"] +label::after{
+        content: '';
+        position: absolute;
+            top: 1px;
+            left:1px;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            background: #fff;
+    } 
+    input[type="checkbox"]:checked + label{
+        background: linear-gradient(to left,pink,plum);
+    }
+    input[type="checkbox"]:checked + label::before{
+        content: "开";
+        margin-left: 3px;
+    }
+    input[type="checkbox"]:checked + label::after{
+       left:25px;
+    }
+    
+</style>
+<body>
+    <div class="box">
+        <input type="checkbox" id="switch" checked>
+        <label for="switch"></label>
+        <input type="checkbox" id="switch-disabled" disabled>
+        <label for="switch-disabled" disabled></label>
+        <input type="checkbox" id="switch-disabled-open" disabled checked>
+        <label for="switch-disabled-open" disabled></label>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\346\236\227\345\271\274\350\212\263/2021.12.10--\350\207\252\345\256\232\344\271\211\346\214\211\351\222\256/switch.html" "b/\346\236\227\345\271\274\350\212\263/2021.12.10--\350\207\252\345\256\232\344\271\211\346\214\211\351\222\256/switch.html"
new file mode 100644
index 0000000000000000000000000000000000000000..6b48abae62db4e323d715f508ce73c3b8413638d
--- /dev/null
+++ "b/\346\236\227\345\271\274\350\212\263/2021.12.10--\350\207\252\345\256\232\344\271\211\346\214\211\351\222\256/switch.html"
@@ -0,0 +1,91 @@
+<!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: 500px;
+            display: flex;
+            justify-content: space-around;
+        }
+
+        input[type="checkbox"] {
+            display: none;
+        }
+
+        label {
+            position: relative;
+            width: 50px;
+            height: 26px;
+            background: linear-gradient(to right,plum,skyblue);
+            border-radius: 13px;
+            cursor: pointer;
+            /* 添加过渡效果 */
+            transition: all .5s;
+        }
+        /* 禁用按钮 */
+        label[disabled] {
+            cursor: not-allowed;
+            opacity: .5;
+        }
+
+        label::before,
+        label::after {
+            /* 添加过渡效果 */
+            transition: all .5s;
+            position: absolute;
+        }
+
+        label::before {
+            content: '关';
+            font-size: 16px;
+            line-height: 1;
+            top: 5px;
+            left: 28px;
+            color: #fff;
+        }
+
+        label::after {
+            content: '';
+            top: 1px;
+            left: 1px;
+            width: 24px;
+            height: 24px;
+            border-radius: 12px;
+            background: #fff;
+        }
+
+        input[type="checkbox"]:checked+label {
+            background: linear-gradient(to left,plum,pink);
+        }
+
+        input[type="checkbox"]:checked+label::before {
+            content: '开';
+            left: 6px;
+        }
+
+        input[type="checkbox"]:active+label::after {
+            width: 24px;
+        }
+
+        input[type="checkbox"]:checked+label::after {
+            left: 25px;
+        }
+</style>
+
+<body>
+    <div class="box">
+        <input type="checkbox" id="switch" checked>
+        <label for="switch"></label>
+        <input type="checkbox" id="switch-disabled" disabled>
+        <label for="switch-disabled" disabled></label>
+        <input type="checkbox" id="switch-checked-disabled" checked disabled>
+        <label for="switch-checked-disabled" disabled></label>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
