From 25dbc3761b62204590b96b27b6bb17b7ce87b127 Mon Sep 17 00:00:00 2001
From: zhangkai <862779506@qq.com>
Date: Tue, 14 Dec 2021 20:26:23 +0800
Subject: [PATCH] zuoye

---
 .../\347\224\273\345\233\276.html"            | 40 +++++++++
 .../bubble-bottom.html"                       | 81 ++++++++++++++++++
 .../bubble-br.html"                           | 82 +++++++++++++++++++
 .../bubble-left.html"                         | 80 ++++++++++++++++++
 .../bubble-right.html"                        | 80 ++++++++++++++++++
 .../bubble-top.html"                          | 80 ++++++++++++++++++
 .../radio.html"                               | 75 +++++++++++++++++
 7 files changed, 518 insertions(+)
 create mode 100644 "\345\274\240\351\224\264/12 \351\230\277\351\207\214\345\267\264\345\267\264\347\231\273\345\275\225\351\241\265\351\235\242/\347\224\273\345\233\276.html"
 create mode 100644 "\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-bottom.html"
 create mode 100644 "\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-br.html"
 create mode 100644 "\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-left.html"
 create mode 100644 "\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-right.html"
 create mode 100644 "\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-top.html"
 create mode 100644 "\345\274\240\351\224\264/14\345\215\225\351\200\211\346\241\206\345\274\200\345\205\263/radio.html"
diff --git "a/\345\274\240\351\224\264/12 \351\230\277\351\207\214\345\267\264\345\267\264\347\231\273\345\275\225\351\241\265\351\235\242/\347\224\273\345\233\276.html" "b/\345\274\240\351\224\264/12 \351\230\277\351\207\214\345\267\264\345\267\264\347\231\273\345\275\225\351\241\265\351\235\242/\347\224\273\345\233\276.html"
new file mode 100644
index 0000000..91e1e7c
--- /dev/null
+++ "b/\345\274\240\351\224\264/12 \351\230\277\351\207\214\345\267\264\345\267\264\347\231\273\345\275\225\351\241\265\351\235\242/\347\224\273\345\233\276.html"	
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+	</head>
+	<body>
+
+		<svg width="500" height="500">
+			
+			<!-- 脸 -->
+			<!-- x,y是设置起点位置；rx,ry是圆角；stroke是设置边框颜色；fill是设置背景颜色 -->
+			<rect x="0" y="71" rx="20" ry="20" height="163" width="163" style="stroke: black; fill: white;"></rect>
+			<!-- 头发 -->
+			<polyline points="20,70 40,85 60,70" stroke="black"></polyline>
+			<polyline points="60,70 80,85 100,70" stroke="black"></polyline>
+			<polyline points="100,70 120,85 140,70" stroke="black"></polyline>
+			<!-- 眼睛 -->
+			<circle cx="40" cy="120" r="20" stroke="black" fill="white"></circle>
+			<circle cx="120" cy="120" r="20" stroke="black" fill="white"></circle>
+			<!-- 瞳孔 -->
+			<circle cx="50" cy="130" r="5"></circle>
+			<circle cx="130" cy="130" r="5"></circle>
+			<!-- 鼻子 -->
+			<polyline points="70,170 80,150 90,170 70,170" stroke="black" fill="white"></polyline>
+			<!-- 嘴巴 -->
+			<ellipse cx="80" cy="200" ry="10" rx="30" stroke="black" fill="white" />
+			<!-- 睫毛 -->
+			<polyline points="40,100 40,90" stroke="black"></polyline>
+			<polyline points="120,100 120,90" stroke="black"></polyline>
+			<polyline points="32,102 30,90" stroke="black"></polyline>
+			<polyline points="114,100 110,90" stroke="black"></polyline>
+			<polyline points="48,102 50,90" stroke="black"></polyline>
+			<polyline points="126,100 130,90" stroke="black"></polyline>
+			<!-- 腮红 -->
+			<ellipse cx="30" cy="160" ry="5" rx="10" fill="pink" />
+			<ellipse cx="130" cy="160" ry="5" rx="10" fill="pink" />
+		</svg>
+	</body>
+</html>
diff --git "a/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-bottom.html" "b/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-bottom.html"
new file mode 100644
index 0000000..1df6a35
--- /dev/null
+++ "b/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-bottom.html"
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			:root {
+			    /* 定义气泡弹出框背景色 */
+			    --poptipBg: #30363d;
+			    /* 弹出框字体颜色 */
+			    --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: 0 var(--triangle) var(--triangle) var(--triangle);
+			    border-color: transparent transparent var(--poptipBg) transparent;
+			    left: calc(50% - var(--triangle));
+			    top: 50px;
+			    transform: translateX(0%) translateY(var(--distance));
+			  }
+			
+			.poptip::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(--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: #00adb5;
+			  border-radius: 4px;
+			  text-align: center;
+			  cursor: pointer;
+			  margin: 200px auto;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="poptip btn" aria-controls="弹出气泡">气泡提示</div>
+	</body>
+</html>
+
diff --git "a/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-br.html" "b/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-br.html"
new file mode 100644
index 0000000..a87c907
--- /dev/null
+++ "b/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-br.html"
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			:root {
+			    /* 定义气泡弹出框背景色 */
+			    --poptipBg: #30363d;
+			    /* 弹出框字体颜色 */
+			    --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(0%) translateY(var(--distance));
+			  }
+			
+			.poptip::after {/* 气泡 */
+			    font-size: 14px;
+			    color: var(--color);
+			    /* 内容为标签内的属性值 */
+			    content: attr(aria-controls);
+			    position: absolute;
+				width: 180px;
+			    padding: 6px 12px;
+			    white-space: wrap;/* nowrap:不换行;wrap:换行 */
+			    z-index: -1;
+			    left: 50%;
+			    bottom: 100%;
+			    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: #00adb5;
+			  border-radius: 4px;
+			  text-align: center;
+			  cursor: pointer;
+			  margin: 200px auto;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="poptip btn" aria-controls="我弹出气泡,我弹出气泡,我弹,我弹,我弹弹弹!">气泡提示</div>
+	</body>
+</html>
+
diff --git "a/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-left.html" "b/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-left.html"
new file mode 100644
index 0000000..dbd31d1
--- /dev/null
+++ "b/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-left.html"
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			:root {
+			    /* 定义气泡弹出框背景色 */
+			    --poptipBg: #30363d;
+			    /* 弹出框字体颜色 */
+			    --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) 0 var(--triangle) var(--triangle);
+			    border-color: transparent transparent transparent var(--poptipBg);
+			    left: calc(-8% - var(--triangle));
+			    top: 20px;
+			    transform: translateX(0%) translateY(var(--distance));
+			  }
+			
+			.poptip::after {/* 气泡 */
+			    font-size: 14px;
+			    color: var(--color);
+			    /* 内容为标签内的属性值 */
+			    content: attr(aria-controls);
+			    position: absolute;
+			    padding: 6px 12px;
+			    white-space: nowrap;
+			    z-index: -1;
+			    left: -48%;
+			    bottom: -22%;
+			    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: #00adb5;
+			  border-radius: 4px;
+			  text-align: center;
+			  cursor: pointer;
+			  margin: 200px auto;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="poptip btn" aria-controls="弹出气泡">气泡提示</div>
+	</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-right.html" "b/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-right.html"
new file mode 100644
index 0000000..fd26e02
--- /dev/null
+++ "b/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-right.html"
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			:root {
+			    /* 定义气泡弹出框背景色 */
+			    --poptipBg: #30363d;
+			    /* 弹出框字体颜色 */
+			    --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) var(--triangle) 0;
+			    border-color: transparent var(--poptipBg) transparent transparent;
+			    left: calc(115% - var(--triangle));
+			    top: 20px;
+			    transform: translateX(0%) translateY(var(--distance));
+			  }
+			
+			.poptip::after {/* 气泡 */
+			    font-size: 14px;
+			    color: var(--color);
+			    /* 内容为标签内的属性值 */
+			    content: attr(aria-controls);
+			    position: absolute;
+			    padding: 6px 12px;
+			    white-space: nowrap;
+			    z-index: -1;
+			    left: 148%;
+			    bottom: -22%;
+			    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: #00adb5;
+			  border-radius: 4px;
+			  text-align: center;
+			  cursor: pointer;
+			  margin: 200px auto;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="poptip btn" aria-controls="弹出气泡">气泡提示</div>
+	</body>
+</html>
diff --git "a/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-top.html" "b/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-top.html"
new file mode 100644
index 0000000..1433a63
--- /dev/null
+++ "b/\345\274\240\351\224\264/13\346\217\220\347\244\272\346\260\224\346\263\241/bubble-top.html"
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			:root {
+			    /* 定义气泡弹出框背景色 */
+			    --poptipBg: #30363d;
+			    /* 弹出框字体颜色 */
+			    --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(0%) translateY(var(--distance));
+			  }
+			
+			.poptip::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(--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: #00adb5;
+			  border-radius: 4px;
+			  text-align: center;
+			  cursor: pointer;
+			  margin: 200px auto;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="poptip btn" aria-controls="弹出气泡">气泡提示</div>
+	</body>
+</html>
diff --git "a/\345\274\240\351\224\264/14\345\215\225\351\200\211\346\241\206\345\274\200\345\205\263/radio.html" "b/\345\274\240\351\224\264/14\345\215\225\351\200\211\346\241\206\345\274\200\345\205\263/radio.html"
new file mode 100644
index 0000000..180221e
--- /dev/null
+++ "b/\345\274\240\351\224\264/14\345\215\225\351\200\211\346\241\206\345\274\200\345\205\263/radio.html"
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			.box{
+				width: 500px;
+				display: flex;
+				justify-content: space-around;/* 均匀分布 */
+			}
+			input[type="checkbox"]{
+				display: none;/* 隐藏checkbox框 */
+			}
+			label{/* 设置样式 */
+				position: relative;
+				width: 50px;
+				height: 26px;
+				background: lightgray;
+				cursor: pointer;/* 鼠标变手 */
+				transition: background .3s;
+				border-radius: 50px;
+			}
+			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: pink;
+			}
+			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;/* 当选中时，label向左移动 */
+			}
+		</style>
+	</head>
+	<body>
+		<div class="box">
+			<input type="checkbox" id="one" checked hidden>
+			<label for="one"></label>
+			<input type="checkbox" id="two" disabled hidden><!-- disabled不能选中 -->
+			<label for="two" disabled></label>
+			<input type="checkbox" id="three" hidden>
+			<label for="three" disabled></label>
+		</div>
+	</body>
+</html>
-- 
Gitee

