diff --git "a/\345\220\264\351\246\231\350\220\215/12.10 \345\274\200\345\205\263/demo.html" "b/\345\220\264\351\246\231\350\220\215/12.10 \345\274\200\345\205\263/demo.html"
new file mode 100644
index 0000000000000000000000000000000000000000..7180fa39749cf1f10268d9e1f292bf07a37981a3
--- /dev/null
+++ "b/\345\220\264\351\246\231\350\220\215/12.10 \345\274\200\345\205\263/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">
+    <title>Document</title>
+    <style>
+        .box{
+            width: 500px;
+            display: flex;
+            justify-content: space-around;
+        }
+        input[type='checkbox']{
+            display: none;
+        }
+        input[type='checkbox']+label{
+            position: relative;
+            cursor: pointer;
+        }
+        label{
+            width: 50px;
+            height: 22px;   
+            border-radius: 13px;
+            background-color: #f2f2f2;
+            border-color: #ccc;
+        }
+        
+         
+        label::after{
+            content: "";
+            right: 1;
+            top: 1;
+            position: absolute;
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            background-color: white;
+        }
+ 
+         label::before {
+				content: '关';
+                left: 28px;
+                position: absolute;
+				color: white;
+                
+			} 
+        input[type="checkbox"]:checked+label{
+            background-color: burlywood;
+            border: 1px solid rgb(247, 216, 176);
+        }     
+        input[type='checkbox']:checked+label::before{
+            content: '开';
+            left: 4px;
+        }
+        input[type='checkbox']:checked+label::after{
+            left: 30px;
+        }
+        
+        input[type='checkbox']:disabled+label{
+            cursor: not-allowed;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <!-- 默认 -->
+        <input type="checkbox" id="checkon" checked>
+        <label for="checkon"></label>
+        <!-- 关闭禁用 -->
+        <input type="checkbox" id="chekout" disabled>
+        <label for="checkout" disabled></label>
+        <!-- 开启禁用 -->
+        <input type="checkbox" id="chekon-out" disabled checked>
+        <label for="chekon-out" disabled></label>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\220\264\351\246\231\350\220\215/12.9 \346\260\224\346\263\241/bottom.html" "b/\345\220\264\351\246\231\350\220\215/12.9 \346\260\224\346\263\241/bottom.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f42db82c63f5c58c6965be86d2adbb932a09292e
--- /dev/null
+++ "b/\345\220\264\351\246\231\350\220\215/12.9 \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/\345\220\264\351\246\231\350\220\215/12.9 \346\260\224\346\263\241/left.html" "b/\345\220\264\351\246\231\350\220\215/12.9 \346\260\224\346\263\241/left.html"
new file mode 100644
index 0000000000000000000000000000000000000000..0513bdf4e8b7759dc1d802003626053fcd0ee91e
--- /dev/null
+++ "b/\345\220\264\351\246\231\350\220\215/12.9 \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/\345\220\264\351\246\231\350\220\215/12.9 \346\260\224\346\263\241/right.html" "b/\345\220\264\351\246\231\350\220\215/12.9 \346\260\224\346\263\241/right.html"
new file mode 100644
index 0000000000000000000000000000000000000000..a8d29f3656778df487cbc858cf7fc3c0243e9c72
--- /dev/null
+++ "b/\345\220\264\351\246\231\350\220\215/12.9 \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/\345\220\264\351\246\231\350\220\215/12.9 \346\260\224\346\263\241/top.html" "b/\345\220\264\351\246\231\350\220\215/12.9 \346\260\224\346\263\241/top.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1925bb29937b91ec4cb2aa5ff342eb700846bf5b
--- /dev/null
+++ "b/\345\220\264\351\246\231\350\220\215/12.9 \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
