From 789796e5bfeeac0e81726d87250fb62df93a63c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E7=A5=A5=E6=9E=97?= <2429620388@qq.com>
Date: Mon, 29 Nov 2021 16:23:42 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo01.html"                              |  69 ++++++
 .../Demo2.html"                               |  52 +++++
 .../demo01.html"                              |  93 ++++++++
 .../2021.11.19-RGB/demo01.html"               |  68 ++++++
 .../demo01.html"                              | 217 ++++++++++++++++++
 .../demo01.html"                              | 127 ++++++++++
 .../demo02.html"                              | 116 ++++++++++
 .../demo01.html"                              | 135 +++++++++++
 8 files changed, 877 insertions(+)
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.11.15-\351\233\252\350\212\261/demo01.html"
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.11.17-\345\244\252\346\236\201/Demo2.html"
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.11.18-\346\226\207\345\255\227/demo01.html"
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.11.19-RGB/demo01.html"
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.11.24-flex\351\252\260\345\255\220/demo01.html"
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.11.25-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo01.html"
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.11.25-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo02.html"
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.11.26-transform\346\227\266\351\222\237/demo01.html"
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.11.15-\351\233\252\350\212\261/demo01.html" "b/\351\273\204\347\245\245\346\236\227/2021.11.15-\351\233\252\350\212\261/demo01.html"
new file mode 100644
index 0000000..0833f6c
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.11.15-\351\233\252\350\212\261/demo01.html"
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+	<head>
+		<meta chartset="UTF-8">
+		<title></title>
+		<meta name="keywords" content="" />
+		<meta name="description" content="" />
+		<style>
+			* {
+				margin: 0;
+				padding: 0;
+			}
+
+			canvas {
+				background: black;
+			}
+		</style>
+	</head>
+	<body>
+		<canvas id="canvas">您的浏览器不支持canvas画布</canvas>
+		<script>
+			var can = document.getElementById('canvas');
+			var ctx = can.getContext('2d');
+			var wid = window.innerWidth;
+			var hei = window.innerHeight;
+			can.width = wid;
+			can.height = hei;
+			var snow = 100; //雪花数量
+			var arr = []; //保存雪花坐标，半径
+			for (var i = 0; i < snow; i++) {
+				arr.push({
+					x: Math.random() * wid,
+					y: Math.random() * hei,
+					r: Math.random() * 7
+				})
+			}
+
+			function DrawSnow() {
+				ctx.clearRect(0, 0, wid, hei);
+				ctx.beginPath();
+				for (var i = 0; i < snow; i++) {
+					var p = arr[i];
+					ctx.moveTo(p.x, p.y)
+					ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false)
+					ctx.fillStyle = "white";
+				}
+				ctx.fill();
+				ctx.stroke();
+				SnowFall()
+				ctx.closePath();
+			}
+			//雪花飘落
+			function SnowFall() {
+				for (var i = 0; i < snow; i++) {
+					var p = arr[i];
+					p.y += Math.random() * 50 + 1;
+					if (p.y > hei) {
+						p.y = 0;
+					}
+					p.x += Math.random() * 50 + 1;
+					if (p.x > wid) {
+						p.x = 0;
+					}
+				}
+			}
+			setInterval(DrawSnow, 100);
+		</script>
+	</body>
+</html>
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.11.17-\345\244\252\346\236\201/Demo2.html" "b/\351\273\204\347\245\245\346\236\227/2021.11.17-\345\244\252\346\236\201/Demo2.html"
new file mode 100644
index 0000000..a32a980
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.11.17-\345\244\252\346\236\201/Demo2.html"
@@ -0,0 +1,52 @@
+<!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>
+        body{
+            background-color: #C5C2C2;
+        }
+        *{
+            top: 150px;
+        }
+        .taiji{
+            animation: taiji 10s infinite ease ;
+            width: 200px;height: 400px;
+            background-color:black;
+            border-right: 200px solid #ffffff;
+            margin: 30px auto;
+            position: relative;
+            border-radius: 50%;
+        }
+        .taiji:before{
+            content: "";
+            width: 40px;height: 40px;
+            border: 80px solid #ffffff;
+            background-color: #000000;
+            position: absolute;
+            left: 50%;
+            border-radius: 50%;
+            
+        }
+        .taiji::after{
+            content: "";
+            width: 40px;height: 40px;
+            border: 80px solid #000000;
+            background-color: #ffffff;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            border-radius: 50%;
+        }
+        @keyframes taiji{
+            0%{transform: rotate(0deg)}
+            100%{transform: rotate(360deg);}
+        }
+    </style>
+</head>
+<body>
+    <div class="taiji"></div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.11.18-\346\226\207\345\255\227/demo01.html" "b/\351\273\204\347\245\245\346\236\227/2021.11.18-\346\226\207\345\255\227/demo01.html"
new file mode 100644
index 0000000..0b44f26
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.11.18-\346\226\207\345\255\227/demo01.html"
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			#whitespce {
+				width: 350px;
+				height: 50px;
+				border: 1px solid black;
+			}
+
+			#whitespce>P {
+				white-space: nowrap;
+				font-weight: 520;
+				font-family: "微软雅黑";
+			}
+
+			#pre {
+				margin-top: 80px;
+				width: 350px;
+				height: 50px;
+				border: 1px solid black;
+			}
+
+			#pre>p {
+				white-space: pre;
+			}
+
+			p.spread {
+				word-spacing: 10px;
+			}
+
+			p.tight {
+				word-spacing: -0.9em;
+			}
+
+			s {
+				margin-top: 50px;
+			}
+
+			div.jiange {
+				margin-top: 50px;
+			}
+
+			#box {
+				margin-top: 50px;
+				width: 400px;
+				height: 180px;
+				border: 1px solid black;
+			}
+
+			p.one {
+				letter-spacing: 10px;
+			}
+
+			p.two {
+				letter-spacing: -0.1em;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="whitespce">
+			<p>
+				inherit 规定应该从父元素继承 white-space 属性的值。pre-line 合并空白符序列，但是保留换行符。pre-wrap 保留空白符序列，但是正常地进行换行。
+				<h4>
+					white-space: nowrap 所有空格回车 制表符都合并成一个空格，文本 <span style="color: red;">不换行</span>！！！
+				</h4>
+			</p>
+		</div>
+		<div id="pre">
+
+			<p>床前 明月光，饮食 地 上霜，举 头望 明月，低头 思故乡</p>
+			<h4>white-space: pre 所有东西原样输出文本不换行</h4>
+		</div>
+
+
+		<div id="box">
+			<div class="jiange">
+				<p> <b>word-spacing : 控制每个单词之间的间距</b></p>
+			</div>
+			<p class="spread">This is some text . this is some text </p>
+			<p class="tight">This is some text . this is some text </p>
+		</div>
+
+		<div id="box">
+			<p><b>letter-spacing：控制每个字母之间的间距</b></p>
+			<p class="one">this is heading 1</p>
+			<p class="two">this id heading 2</p>
+		</div>
+
+	</body>
+</html>
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.11.19-RGB/demo01.html" "b/\351\273\204\347\245\245\346\236\227/2021.11.19-RGB/demo01.html"
new file mode 100644
index 0000000..b2631f7
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.11.19-RGB/demo01.html"
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			:root {
+				--red: 108;
+				--green: 87;
+				--blue: 106;
+				--threshold: 0.5;
+				--border-threshold: 0.8;
+			}
+
+			.btn {
+				font-size: 150%;
+				padding: .5em 2em;
+				width: 180px;
+				height: 45px;
+				text-align: center;
+				margin: 0px auto;
+			}
+
+			.btn {
+				background: rgb(var(--red), var(--green), var(--blue));
+				--r: calc(var(--red) * 0.2126);
+				--g: calc(var(--green) * 0.7152);
+				--b: calc(var(--blue) * 0.0722);
+				--sum: calc(var(--r) + var(--g) + var(--b));
+
+				--lightness: calc(var(--sum) / 255);
+				color: hsl(0, 0%, calc((var(--lightness) - var(--threshold)) * -999999%));
+				--border-alpha: calc((var(--lightness) - var(--border-threshold)) * 100);
+				border: .2em solid;
+				border-color: rgba(calc(var(--red) - 50), calc(var(--green) - 50), calc(var(--blue) - 50), var(--border-alpha));
+			}
+
+			.a {
+				color: red;
+				text-align: center;
+			}
+
+			.b {
+				color: green;
+				text-align: center;
+			}
+
+			.c {
+				color: blue;
+				text-align: center;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="btn">颜色属性值</div>
+		<p class="a"><input type="range" min="0" max="255" value="108" name="red"><br>R</p>
+		<p class="b"><input type="range" min="0" max="255" value="87" name="green"><br>G</p>
+		<p class="c"><input type="range" min="0" max="255" value="106" name="blue"><br>B</p>
+		<script type="text/javascript">
+			var eleRanges = document.querySelectorAll('input[type="range"]');
+			Array.from(eleRanges).forEach(function(range) {
+				range.addEventListener('input', function() {
+					document.documentElement.style.setProperty('--' + this.name, this.value);
+				});
+			});
+		</script>
+	</body>
+</html>
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.11.24-flex\351\252\260\345\255\220/demo01.html" "b/\351\273\204\347\245\245\346\236\227/2021.11.24-flex\351\252\260\345\255\220/demo01.html"
new file mode 100644
index 0000000..f01fd6c
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.11.24-flex\351\252\260\345\255\220/demo01.html"
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			body {
+				background-color: #333;
+			}
+
+			.item {
+				width: 24px;
+				height: 24px;
+				border-radius: 50%;
+				padding: 4px;
+				background-color: #333;
+				box-shadow: inset 0 3px #111,
+					inset 0 -3px #555;
+			}
+
+			.faceone {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+
+			.facetwo {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				justify-content: space-between;
+			}
+
+			.facetwo .item:nth-of-type(2) {
+				align-self: flex-end;
+			}
+
+			.facethree {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				justify-content: space-between;
+			}
+
+			.facethree .item:nth-of-type(2) {
+				align-self: center;
+			}
+
+			.facethree .item:nth-of-type(3) {
+				align-self: flex-end;
+			}
+
+			.facefour {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				flex-wrap: wrap;
+				align-content: space-between;
+			}
+
+			.row {
+				display: flex;
+				flex-basis: 100%;
+				justify-content: space-between;
+			}
+
+			.facefive {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+			}
+
+			.facefive .row {
+				justify-content: space-around;
+				flex-direction: column;
+				align-items: center;
+			}
+
+			.facesix {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				flex-wrap: wrap;
+				align-content: space-between;
+			}
+			
+			.nine {
+				background-color: #e7e7e7;
+				margin: 16px;
+				padding: 4px;
+				width: 104px;
+				height: 104px;
+				border-radius: 10%;
+				box-shadow: inset 0 5px white,
+					inset 0 -5px #bbb,
+					inset 5px 0 #d7d7d7,
+					inset 5px 0 #d7d7d7;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				align-content: space-between;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="faceone">
+			<div class="item"></div>
+		</div>
+		<div class="facetwo">
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="facethree">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="facefour">
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+		</div>
+		<div class="facefive">
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+			<div class="row">
+				<div class="item"></div>
+			</div>
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+		</div>
+		<div class="facesix">
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+			<div class="row">
+				<div class="item"></div>
+				<div class="item"></div>
+			</div>
+		</div>
+		<div class="nine">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+	</body>
+</html>
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.11.25-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo01.html" "b/\351\273\204\347\245\245\346\236\227/2021.11.25-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo01.html"
new file mode 100644
index 0000000..e222f27
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.11.25-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo01.html"
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			.item {
+				width: 20px;
+				height: 20px;
+				border-radius: 50%;
+				background-color: red;
+			}
+
+			.f1,
+			.f2,
+			.f3,
+			.f4,
+			.f5
+				{
+				display: grid;
+				width: 100px;
+				height: 100px;
+				margin: 10px;
+				border: 1px solid #000;
+				border-radius: 10px;
+				justify-items: center;
+				align-items: center;
+				grid-template:
+					"a1 a2 a3"1fr "a4 a5 a6"1fr "a7 a8 a9"1fr;
+			}
+
+			.f1 div {
+				grid-area: a5;
+			}
+
+			.f2 div:nth-of-type(2) {
+				grid-area: a9;
+			}
+
+			.f3 div:nth-of-type(2) {
+				grid-area: a5;
+			}
+
+			.f3 div:nth-of-type(3) {
+				grid-area: a9;
+			}
+
+			.f4 div:nth-of-type(2) {
+				grid-area: a3;
+			}
+
+			.f4 div:nth-of-type(3) {
+				grid-area: a7;
+			}
+
+			.f4 div:nth-of-type(4) {
+				grid-area: a9;
+			}
+
+			.f5 div:nth-of-type(2) {
+				grid-area: a3;
+			}
+
+			.f5 div:nth-of-type(3) {
+				grid-area: a5;
+			}
+
+			.f5 div:nth-of-type(4) {
+				grid-area: a7;
+			}
+
+			.f5 div:nth-of-type(5) {
+				grid-area: a9;
+			}
+			
+			.f6 {
+				display: grid;
+				width: 100px;
+				height: 100px;
+				margin: 10px;
+				border: 1px solid #000;
+				border-radius: 10px;
+				justify-items: center;
+				align-items: center;
+				grid-template:
+					"a1 a2" 1fr
+					"a3 a4" 1fr
+					"a5 a6" 1fr
+			}
+		</style>
+	</head>
+	<body>
+		<div class="f1">
+			<div class="item"></div>
+		</div>
+		<div class="f2">
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="f3">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="f4">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="f5">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+		<div class="f6">
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+			<div class="item"></div>
+		</div>
+	</body>
+</html>
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.11.25-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo02.html" "b/\351\273\204\347\245\245\346\236\227/2021.11.25-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo02.html"
new file mode 100644
index 0000000..11bd2e3
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.11.25-grid\351\252\260\345\255\220\345\222\214\345\270\203\345\261\200/demo02.html"
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style>
+			.container {
+				display: grid;
+				width: 400px;
+				height: 400px;
+				grid-template-rows: repeat(2, 20%);
+
+			}
+
+			.box1 {
+				display: grid;
+				grid-template-columns: repeat(2, 50%);
+			}
+
+			.box2 {
+				display: grid;
+				grid-template-columns: repeat(3, 1fr);
+			}
+
+			.box3 {
+				display: grid;
+				grid-template-columns: repeat(4, 1fr);
+				grid-template-rows: repeat(3, 1fr);
+				grid-template-areas: 'a b c d'
+					'A A B B'
+					'A A B B';
+			}
+
+			.item {
+				font-size: 3em;
+				color: #fff;
+			}
+
+			.fifty1 {
+				background-color: red;
+
+			}
+
+			.fifty2 {
+				background-color: green;
+
+			}
+
+			.thirty1 {
+				background-color: #008080;
+
+			}
+
+			.thirty2 {
+				background-color: yellow;
+			}
+
+			.thirty3 {
+				background-color: #FFD700;
+			}
+
+			.twentyfive1 {
+				background-color: pink;
+
+			}
+
+			.twentyfive2 {
+				background-color: purple;
+
+			}
+
+			.twentyfive3 {
+				background-color: blue;
+
+			}
+
+			.twentyfive4 {
+				background-color: black;
+
+			}
+
+			.fifty3 {
+				background-color: red;
+				grid-area: A;
+			}
+
+			.fifty4 {
+				background-color: green;
+				grid-area: B;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="container">
+			<div class="box1">
+				<div class="item fifty1">50%</div>
+				<div class="item fifty2">50%</div>
+			</div>
+			<div class="box2">
+				<div class="item thirty1">33%</div>
+				<div class="item thirty2">33%</div>
+				<div class="item thirty3">33%</div>
+			</div>
+			<div class="box3">
+				<div class="item twentyfive1">25%</div>
+				<div class="item twentyfive2">25%</div>
+				<div class="item twentyfive3">25%</div>
+				<div class="item twentyfive4">25%</div>
+				<div class="item fifty3">50%</div>
+				<div class="item fifty4">50%</div>
+			</div>
+
+		</div>
+	</body>
+
+</html>
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.11.26-transform\346\227\266\351\222\237/demo01.html" "b/\351\273\204\347\245\245\346\236\227/2021.11.26-transform\346\227\266\351\222\237/demo01.html"
new file mode 100644
index 0000000..d241195
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.11.26-transform\346\227\266\351\222\237/demo01.html"
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			* {
+				margin: 0;
+				padding: 0;
+			}
+
+			.box {
+				margin: 100px auto;
+				width: 300px;
+				height: 300px;
+				border: 10px solid #cccccc;
+				border-radius: 50%;
+				position: relative;
+			}
+
+			.line {
+				width: 10px;
+				height: 300px;
+				background-color: #CCCCCC;
+				position: absolute;
+				left: 50%;
+				transform: translate(-50%, 0);
+			}
+
+			.line2 {
+				width: 7px;
+				transform: translate(-50%, 0) rotate(30deg);
+			}
+
+			.line3 {
+				width: 7px;
+				transform: translate(-50%, 0) rotate(60deg);
+			}
+
+			.line4 {
+				width: 7px;
+				transform: translate(-50%, 0) rotate(90deg);
+			}
+
+			.line5 {
+				width: 7px;
+				transform: translate(-50%, 0) rotate(120deg);
+			}
+
+			.line6 {
+				width: 7px;
+				transform: translate(-50%, 0) rotate(150deg);
+			}
+
+			.roundness {
+				position: absolute;
+				border-radius: 50%;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
+
+			.circle {
+				width: 270px;
+				height: 270px;
+				background-color: #fff;
+			}
+
+			.needle {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -100%);
+			}
+
+			.hour {
+				width: 10px;
+				height: 70px;
+				background-color: green;
+				border-radius: 5px;
+				transform-origin: center bottom;
+				animation: clock 43200s linear infinite;
+			}
+
+			.minute {
+				width: 7px;
+				height: 90px;
+				background-color: skyblue;
+				border-radius: 5px;
+				transform-origin: center bottom;
+				animation: clock 3600s linear infinite;
+			}
+
+			.second {
+				width: 4px;
+				height: 110px;
+				background-color: red;
+				border-radius: 2px;
+				transform-origin: center bottom;
+				animation: clock 60s linear infinite;
+			}
+
+			.cir {
+				width: 20px;
+				height: 20px;
+				background-color: black;
+			}
+
+			@keyframes clock {
+				0% {
+					transform: translate(-50, -100%);
+				}
+
+				100% {
+					transform: translate(-50%, -100%) rotate(360deg);
+				}
+			}
+		</style>
+	</head>
+	<body>
+		<div class="box">
+			<div class="line line1"></div>
+			<div class="line line2"></div>
+			<div class="line line3"></div>
+			<div class="line line4"></div>
+			<div class="line line5"></div>
+			<div class="line line6"></div>
+			<div class="roundness circle"></div>
+			<div class="needle hour"></div>
+			<div class="needle minute"></div>
+			<div class="needle second"></div>
+			<div class="roundness cir"></div>
+		</div>
+	</body>
+</html>
-- 
Gitee


From 3467ed2c16609e0c4612195181a624daf799d4ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E7=A5=A5=E6=9E=97?= <2429620388@qq.com>
Date: Thu, 2 Dec 2021 11:22:48 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo01.html"                              | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.12.01-SVG\344\272\272\350\204\270/demo01.html"

diff --git "a/\351\273\204\347\245\245\346\236\227/2021.12.01-SVG\344\272\272\350\204\270/demo01.html" "b/\351\273\204\347\245\245\346\236\227/2021.12.01-SVG\344\272\272\350\204\270/demo01.html"
new file mode 100644
index 0000000..d061b61
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.12.01-SVG\344\272\272\350\204\270/demo01.html"
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title></title>
+		<style type="text/css">
+			#polyline {
+				fill="black";
+				stroke="black";
+			}
+		</style>
+	</head>
+	<body>
+		<svg width="500" height="500">
+			<g id="polyline">
+				<polyline points="40,90 60,70 80,90"></polyline>
+				<polyline points="80,90 100,70 120,90"></polyline>
+				<polyline points="120,90 140,70 160,90"></polyline>
+			</g>
+			<rect x="20" y="90" height="160" width="160" fill="none" stroke="black" rx="25" ry="25"></rect>
+			<circle cx="60" cy="145" r="20" fill="none" stroke="black"></circle>
+			<circle cx="140" cy="145" r="20" fill="none" stroke="black"></circle>
+			<circle cx="150" cy="155" r="5" fill="black" stroke="black"></circle>
+			<circle cx="70" cy="155" r="5" fill="black" stroke="black"></circle>
+			<polyline points="95,195 100,175 105,195 95,195" fill="none" stroke="black"></polyline>
+			<ellipse cx="100" cy="210" rx="30" ry="10" fill="none" stroke="black"></ellipse>
+			<text x="55" y="265" fill="green">Hello World</text>
+		</svg>
+	</body>
+</html>
-- 
Gitee


From ed29ecdbbef86fed81fc2cf3452edbc08606e528 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=84=E7=A5=A5=E6=9E=97?= <2429620388@qq.com>
Date: Mon, 6 Dec 2021 17:10:19 +0800
Subject: [PATCH 3/3] =?UTF-8?q?=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../demo1.html"                               |  34 +++++
 .../demo2.html"                               | 116 ++++++++++++++++++
 .../demo3.html"                               | 111 +++++++++++++++++
 .../fangzidichan.svg"                         |   1 +
 4 files changed, 262 insertions(+)
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo1.html"
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo2.html"
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo3.html"
 create mode 100644 "\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/fangzidichan.svg"

diff --git "a/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo1.html" "b/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo1.html"
new file mode 100644
index 0000000..584e041
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo1.html"
@@ -0,0 +1,34 @@
+<!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>
+<body>
+    <h1>一个简单的表单</h1>
+    <h3>基础形式</h3>
+    <form action="" autocomplete="on">
+        <fieldset style="width: 700px; height: 300px; line-height: 80px;">
+            <legend>客户信息</legend>
+            <label for="n1">名字：</label><input type="text" name="name" id="n1" placeholder="请输入你的名字" autofocus required><br>
+            <label for="n2">电话号码：</label><input type="tel" name="telephone" id="n2" placeholder="样式 1-234-567-8910" pattern="^1[0-9]{8}[0-9]$" required autocomplete="off"><br>
+            <label for="n3">邮箱地址：</label><input type="email" name="email" id="n3" placeholder="请输入你的邮箱地址" required >
+        </fieldset>
+        <fieldset style="width: 700px;height: 100px;line-height: 40px;">
+            <legend>书籍</legend>
+            <label for="book"></label><input list="books" id="book">
+            <datalist id="books">
+                <option value="狂人日记"></option>
+                <option value="勇气三部曲"></option>
+                <option value="十宗罪"></option>
+                <option value="我与地坛"></option>
+                <option value="狼王梦"></option>
+            </datalist>
+            <label for="num">数量(最大限制5):</label><input type="number" min="1" max="5" style="width: 170px;">
+        </fieldset>
+        <input type="submit" style="margin: 5px;"><br>
+        <p style="margin-left: 50px;">@ 2011 Acme曼联保留所有权利</p>
+    </form>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo2.html" "b/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo2.html"
new file mode 100644
index 0000000..e2a95bd
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo2.html"
@@ -0,0 +1,116 @@
+<!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>
+        a{
+            text-decoration: none;
+            color: black;
+            margin: 0;
+            padding: 0;
+        }
+        a:visited{
+            color: black;
+            text-decoration: none;
+        }
+        p{
+            margin: 0;
+            padding: 0;
+        }
+        .container{
+            margin:0 auto;
+            padding:0 auto;
+            margin-left: 300px;
+        }
+        .top{
+            width: 1000px;
+            height: 60px;
+            margin-top: 100px;
+            display: flex;
+            /* justify-content: center; */
+            /* align-content: center; */
+            border-bottom: 2px solid rgba(201, 195, 195, 0.479);
+        }
+        .main label::before{
+            content: '*';
+            color: red;
+           margin-right: 4px;
+           display: inline-block;
+           font-family: serif;
+        }
+        tr{
+            line-height: 50px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="top">
+            <div style="width: 500px; height: 35px;display: flex;border-right: 2px solid rgba(201, 195, 195, 0.479);margin-top: 3%;margin-left: 15%;">
+                <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="#515151" d="M928 864h-32V363c0-20.167-7.765-39.038-21.863-53.137S841.167 280 821 288H704V172c0-20.167-7.765-39.038-21.863-53.137C668.038 104.765 649.167 97 629 97H204c-41.907 0-76 33.645-76 75v692H96c-17.673 0-32 14.327-32 32s14.327 32 32 32h832c17.673 0 32-14.327 32-32s-14.327-32-32-32zM821 351c6.953 0 12 5.047 12 12v501H704V351h117zM191 172c0-6.617 5.832-12 13-12h425c6.953 0 12 5.047 12 12v692h-65V607.5c0-52.107-42.393-94.5-94.5-94.5h-130c-52.107 0-94.5 42.393-94.5 94.5V864h-66V172zm322 692H320V607.5c0-17.369 14.131-31.5 31.5-31.5h130c17.369 0 31.5 14.131 31.5 31.5V864zM287 321h256c17.673 0 32-14.327 32-32s-14.327-32-32-32H287c-17.673 0-32 14.327-32 32s14.327 32 32 32zm0 127h256c17.673 0 32-14.327 32-32s-14.327-32-32-32H287c-17.673 0-32 14.327-32 32s14.327 32 32 32z"/>
+                </svg>
+                <a href="./demo2.html" class="gons" style="width: auto;height: 20px;"><p style="height: 20px;">企业账户注册</p></a>
+
+            </div>
+                <div style="width: 500px; height: 35px;display: flex;margin-top: 3%;margin-left: 15%;">
+                    <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="#515151" d="M586.946 513.581c55.067-27.963 92.912-85.126 92.912-150.998 0-93.339-75.937-169.276-169.277-169.276s-169.276 75.937-169.276 169.276c0 65.872 37.845 123.034 92.911 150.998-95.652 32.016-164.778 122.455-164.778 228.744 0 11.315 9.173 20.491 20.491 20.491s20.492-9.175 20.492-20.491c0-110.369 89.791-200.161 200.16-200.161s200.16 89.792 200.16 200.16c0 11.316 9.174 20.492 20.492 20.492s20.492-9.175 20.492-20.491c-.001-106.289-69.127-196.727-164.78-228.744zM382.288 362.583c0-70.742 57.553-128.294 128.293-128.294 70.742 0 128.294 57.553 128.294 128.294 0 70.741-57.553 128.293-128.294 128.293-70.74 0-128.293-57.552-128.293-128.293zM827.87 196.128C743.498 111.758 631.321 65.29 512 65.29s-231.5 46.466-315.871 130.838C111.756 280.502 65.29 392.678 65.29 511.999s46.465 231.5 130.838 315.872S392.679 958.71 512 958.71s231.498-46.465 315.871-130.838S958.71 631.32 958.71 512s-46.465-231.498-130.838-315.871zM512 917.727c-223.718 0-405.727-182.008-405.727-405.728 0-223.718 182.009-405.727 405.727-405.727S917.727 288.28 917.727 512c0 223.72-182.009 405.728-405.727 405.728z"/></svg>
+                    <a href="./demo3.html" class="user" style="width: auto;height: 20px;"><p style="height: 20px;">个人账户注册</p></a>
+                </div>
+        </div>
+        <div class="main">
+            <h5 style="margin-left: 100px;">有企业营业执照（含个体工商户）的用户请注册。权益如下：做企业实名认证；作为卖家身份开店；作为买家身份采购。</h5>
+            <form action="" autocomplete="on">
+                <table style="margin-left: 260px;">
+                <tr><td><label for="n1">会员名：</label></td><td><input type="text" id="n1" placeholder="请输入会员名" autofocus style="width: 250px;height: 30px;"></td></tr>
+                <tr><td><label for="n2">登录密码：</label></td><td><input type="password" id="n2" placeholder="请输入你的登录密码" style="width: 250px;height: 30px;"></td></tr>
+                <tr><td><label for="n3">密码确认：</label></td><td><input type="password" id="n3" placeholder="请再次输入你的登录密码" style="width: 250px;height: 30px;"></td></tr>
+                <tr><td><label for="n4">联系人姓名：</label></td><td><input type="text" id="n4" placeholder="请输入真实姓名" style="width: 250px;height: 30px;"></td></tr>
+                <tr><td><label for="n5">企业名称：</label></td><td><input type="text" name="" id="n5" placeholder="请输入营业执照上的企业名称" style="width: 250px;height: 30px;"></td></tr>
+                <tr><td><label for="n6">贸易身份：</label></td><td><input type="radio" name="sf" class="n6" >我要销售
+                <input type="radio" name="sf" class="n6">我要采购
+                <input type="radio" name="sf" class="n6">两者都是</td></tr>
+                <tr><td><div class="tele" style="margin: 0;padding: 0;"><label for="n7">手机号码：</label></td><td>
+             
+                    <!-- <input type="text" value="中国大陆     +86" list="grand" style="width: 120px;">
+                    <datalist id="grand"> -->
+                        <select name="" id="grand" style="width: 110px;height: 35px;">
+                        <option value="中国大陆     +86" selected>中国大陆     +86</option>
+                        <option value="中国香港     +852">中国香港     +852</option>
+                        <option value="中国澳门     +853">中国澳门     +853</option>
+                        <option value="中国台湾     +886">中国台湾     +886</option>
+                        <option value="俄罗斯         +007">俄罗斯         +007</option>
+                        <option value="英国         +0044">英国         +0044</option>
+                    </select>
+                    <!-- </datalist> -->
+                <input type="tel" id="n7" autocomplete="off"  style="width: 130px;height: 30px;">
+            
+            </div></td></tr>
+            <tr style="line-height: 10px;"><td></td><td>
+                <input type="checkbox">创建网站账号的同时，我同意遵守：<br><a style="text-decoration: none; color: orange;">《阿里巴巴服务条款》</a>及<a style="text-decoration: none; color: orange;">《隐私声明》</a>
+            </td></tr>
+            <tr><td></td>
+            <td>
+                <input type="submit" value="同意并注册" style="background-color: orange; width: 100px;height: 40px; font-size: 16px; color: white;">
+            </td></tr>
+        </table>
+            </form>
+        </div>
+        <div class="right" style="border: 2px solid rgb(221, 217, 217); padding: 20px 20px 0 20px; width: 180px;position: absolute;right: 200px;top: 200px;">
+            <h3>了解更多：</h3>
+            <ul style="list-style: none;font-size: small; line-height: 20px;">
+                <li style="border-bottom:2px solid #DDDDDD;margin-left: -20px;"><a href="https://114.1688.com/kb/detail/20365197.html?spm=a2693.6879473.1367411629.2.il2NhS" target="_blank">手机收不到验证码？</a></li>
+                <li style="border-bottom:2px solid #DDDDDD;margin-left: -20px;"><a href="https://114.1688.com/km/detail/13243020.html?spm=a2693.6879473.1367411629.3.GcDO0t" target="_blank">会员账户注册不成功？</a></li>
+                <li style="border-bottom:2px solid #DDDDDD;margin-left: -20px;">
+                    <a href="https://114.1688.com/km/detail/13234090.html?spm=a2693.6879473.1367521677.1.a19gmq&amp;keywords=%BF%AA%B5%EA%C1%F7%B3%CC" target="_blank">企业账户如何开店？</a></li>
+                <li style="border-bottom:2px solid #DDDDDD;margin-left: -20px;"><a href="https://114.1688.com/km/detail/14426762.html?spm=a2693.6879473.1367411629.8.St8a1S" target="_blank">会员名如何设置会更好？</a></li>
+                <li style="border-bottom:2px solid #DDDDDD;margin-left: -20px;"><a href="https://114.1688.com/km/detail/13240388.html?spm=a2693.6879473.1367411629.6.6yikEB" target="_blank">阿里巴巴开店必须要营业执照吗?</a></li>
+                <li class="last" style="border: none;margin-left: -20px;"><a href="https://114.1688.com/km/list/11117616.html?spm=a2693.6879473.1367397409.1.Nplk2Q" target="_blank">其它问题</a></li>
+            </ul>
+        </div>
+    </div>
+  
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo3.html" "b/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo3.html"
new file mode 100644
index 0000000..35bf1bd
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/demo3.html"
@@ -0,0 +1,111 @@
+<!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>
+        a{
+            text-decoration: none;
+            color: black;
+            margin: 0;
+            padding: 0;
+        }
+        a:visited{
+            color: black;
+            text-decoration: none;
+        }
+        p{
+            margin: 0;
+            padding: 0;
+        }
+        .container{
+            margin:0 auto;
+            padding:0 auto;
+            margin-left: 300px;
+        }
+        .top{
+            width: 1000px;
+            height: 60px;
+            margin-top: 100px;
+            display: flex;
+            /* justify-content: center; */
+            /* align-content: center; */
+            border-bottom: 2px solid rgba(201, 195, 195, 0.479);
+        }
+        .main label::before{
+            content: '*';
+            color: red;
+           margin-right: 4px;
+           display: inline-block;
+           font-family: serif;
+        }
+        tr{
+            line-height: 80px;
+        }
+        </style>
+</head>
+<body>
+    <div class="container">
+        <div class="top">
+            <div style="width: 500px; height: 35px;display: flex;border-right: 2px solid rgba(201, 195, 195, 0.479);margin-top: 3%;margin-left: 15%;">
+                <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+                    <path fill="#515151" d="M928 864h-32V363c0-20.167-7.765-39.038-21.863-53.137S841.167 280 821 288H704V172c0-20.167-7.765-39.038-21.863-53.137C668.038 104.765 649.167 97 629 97H204c-41.907 0-76 33.645-76 75v692H96c-17.673 0-32 14.327-32 32s14.327 32 32 32h832c17.673 0 32-14.327 32-32s-14.327-32-32-32zM821 351c6.953 0 12 5.047 12 12v501H704V351h117zM191 172c0-6.617 5.832-12 13-12h425c6.953 0 12 5.047 12 12v692h-65V607.5c0-52.107-42.393-94.5-94.5-94.5h-130c-52.107 0-94.5 42.393-94.5 94.5V864h-66V172zm322 692H320V607.5c0-17.369 14.131-31.5 31.5-31.5h130c17.369 0 31.5 14.131 31.5 31.5V864zM287 321h256c17.673 0 32-14.327 32-32s-14.327-32-32-32H287c-17.673 0-32 14.327-32 32s14.327 32 32 32zm0 127h256c17.673 0 32-14.327 32-32s-14.327-32-32-32H287c-17.673 0-32 14.327-32 32s14.327 32 32 32z"/>
+                </svg>
+                <a href="./demo2.html" class="gons" style="width: auto;height: 20px;"><p style="height: 20px;">企业账户注册</p></a>
+
+            </div>
+                <div style="width: 500px; height: 35px;display: flex;margin-top: 3%;margin-left: 15%;">
+                    <svg class="icon" width="20" height="20" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="#515151" d="M586.946 513.581c55.067-27.963 92.912-85.126 92.912-150.998 0-93.339-75.937-169.276-169.277-169.276s-169.276 75.937-169.276 169.276c0 65.872 37.845 123.034 92.911 150.998-95.652 32.016-164.778 122.455-164.778 228.744 0 11.315 9.173 20.491 20.491 20.491s20.492-9.175 20.492-20.491c0-110.369 89.791-200.161 200.16-200.161s200.16 89.792 200.16 200.16c0 11.316 9.174 20.492 20.492 20.492s20.492-9.175 20.492-20.491c-.001-106.289-69.127-196.727-164.78-228.744zM382.288 362.583c0-70.742 57.553-128.294 128.293-128.294 70.742 0 128.294 57.553 128.294 128.294 0 70.741-57.553 128.293-128.294 128.293-70.74 0-128.293-57.552-128.293-128.293zM827.87 196.128C743.498 111.758 631.321 65.29 512 65.29s-231.5 46.466-315.871 130.838C111.756 280.502 65.29 392.678 65.29 511.999s46.465 231.5 130.838 315.872S392.679 958.71 512 958.71s231.498-46.465 315.871-130.838S958.71 631.32 958.71 512s-46.465-231.498-130.838-315.871zM512 917.727c-223.718 0-405.727-182.008-405.727-405.728 0-223.718 182.009-405.727 405.727-405.727S917.727 288.28 917.727 512c0 223.72-182.009 405.728-405.727 405.728z"/></svg>
+                    <a href="./demo3.html" class="user" style="width: auto;height: 20px;"><p style="height: 20px;">个人账户注册</p></a>
+                </div>
+        </div>
+        <div class="main">
+            <h5 style="margin-left: 200px;">无企业营业执照的个人用户请注册个人账户。权益如下：做个人实名认证；作为买家身份采购；</h5>
+            <form action="" autocomplete="on">
+                <table style="margin-left: 260px;">
+                <tr><td><label for="n1">会员名：</label></td><td><input type="text" id="n1" placeholder="请输入会员名" autofocus style="width: 250px;height: 30px;"></td></tr>
+                <tr><td><label for="n2">登录密码：</label></td><td><input type="password" id="n2" placeholder="请输入你的登录密码" style="width: 250px;height: 30px;"></td></tr>
+                <tr><td><label for="n3">密码确认：</label></td><td><input type="password" id="n3" placeholder="请再次输入你的登录密码" style="width: 250px;height: 30px;"></td></tr>
+               
+                <tr><td><div class="tele" style="margin: 0;padding: 0;"><label for="n7">手机号码：</label></td><td>
+             
+                    <!-- <input type="text" value="中国大陆     +86" list="grand" style="width: 120px;">
+                    <datalist id="grand"> -->
+                        <select name="" id="grand" style="width: 110px;height: 35px;">
+                        <option value="中国大陆     +86" selected>中国大陆     +86</option>
+                        <option value="中国香港     +852">中国香港     +852</option>
+                        <option value="中国澳门     +853">中国澳门     +853</option>
+                        <option value="中国台湾     +886">中国台湾     +886</option>
+                        <option value="俄罗斯         +007">俄罗斯         +007</option>
+                        <option value="英国         +0044">英国         +0044</option>
+                    </select>
+                    <!-- </datalist> -->
+                <input type="tel" id="n7" autocomplete="off"  style="width: 130px;height: 30px;">
+            
+            </div></td></tr>
+            <tr style="line-height: 10px;"><td></td><td>
+                <input type="checkbox">创建网站账号的同时，我同意遵守：<br><a style="text-decoration: none; color: orange;">《阿里巴巴服务条款》</a>及<a style="text-decoration: none; color: orange;">《隐私声明》</a>
+            </td></tr>
+            <tr><td></td>
+            <td>
+                <input type="submit" value="同意并注册" style="background-color: orange; width: 100px;height: 40px; font-size: 16px; color: white;">
+            </td></tr>
+        </table>
+            </form>
+        </div>
+        <div class="right" style="border: 2px solid rgb(221, 217, 217); padding: 20px 20px 0 20px; width: 180px;position: absolute;right: 200px;top: 200px;">
+            <h3>了解更多：</h3>
+         
+            <ul style="list-style: none;font-size: small; line-height: 20px;">
+                <li style="border-bottom:2px solid #DDDDDD;margin-left: -20px;"> <a href="https://114.1688.com/km/detail/14426762.html?spm=a2693.6879473.1367411629.8.St8a1S" target="_blank">会员名如何设置会更好？</a></li>
+                <li style="border-bottom:2px solid #DDDDDD;margin-left: -20px;"> <a href="https://114.1688.com/km/detail/13243020.html?spm=a2693.6879473.1367411629.3.GcDO0t" target="_blank">会员账户注册不成功？</a></li>
+                <li style="border-bottom:2px solid #DDDDDD;margin-left: -20px;"> <a href="https://114.1688.com/km/detail/13240388.html?spm=a2693.6879473.1367521677.3.Qcsu3Y&amp;keywords=%B8%F6%C8%CB%D5%CB%BB%A7%BF%C9%D2%D4%BF%AA%B5%EA%C2%F0" target="_blank">个人账户可以开店吗？</a></li>
+                <li style="border-bottom:2px solid #DDDDDD;margin-left: -20px;"> <a href="https://114.1688.com/km/detail/13219062.html?spm=a2693.6879473.1367521677.3.C5SGNH&amp;keywords=%D7%A2%B2%E1%C1%CB%C6%F3%D2%B5%D5%CB%BB%A7%D4%F5%D1%F9%B8%C4%B3%C9%B8%F6%C8%CB%B5%C4" target="_blank">注册个人账户需要准备什么资料？</a></li>
+                <li style="border-bottom:2px solid #DDDDDD;margin-left: -20px;"> <a href="https://114.1688.com/km/detail/13239144.html?spm=a2693.6879473.1367411629.7.8kY2BH" target="_blank">一个人能注册多个会员账户吗？</a></li>
+                <li class="last" style="border: none;margin-left: -20px;"> <a href="https://114.1688.com/km/list/11117616.html?spm=a2693.6879473.1367397409.1.Nplk2Q" target="_blank">其它问题</a></li>
+            </ul>
+        </div>
+    </div>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/fangzidichan.svg" "b/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/fangzidichan.svg"
new file mode 100644
index 0000000..5659025
--- /dev/null
+++ "b/\351\273\204\347\245\245\346\236\227/2021.12.02-css3-h5\350\241\250\345\215\225\345\205\203\347\264\240/fangzidichan.svg"
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#515151" d="M928 864h-32V363c0-20.167-7.765-39.038-21.863-53.137S841.167 288 821 288H704V172c0-20.167-7.765-39.038-21.863-53.137C668.038 104.765 649.167 97 629 97H204c-41.907 0-76 33.645-76 75v692H96c-17.673 0-32 14.327-32 32s14.327 32 32 32h832c17.673 0 32-14.327 32-32s-14.327-32-32-32zM821 351c6.953 0 12 5.047 12 12v501H704V351h117zM191 172c0-6.617 5.832-12 13-12h425c6.953 0 12 5.047 12 12v692h-65V607.5c0-52.107-42.393-94.5-94.5-94.5h-130c-52.107 0-94.5 42.393-94.5 94.5V864h-66V172z m322 692H320V607.5c0-17.369 14.131-31.5 31.5-31.5h130c17.369 0 31.5 14.131 31.5 31.5V864zM287 321h256c17.673 0 32-14.327 32-32s-14.327-32-32-32H287c-17.673 0-32 14.327-32 32s14.327 32 32 32zM287 448h256c17.673 0 32-14.327 32-32s-14.327-32-32-32H287c-17.673 0-32 14.327-32 32s14.327 32 32 32z" /></svg>
\ No newline at end of file
-- 
Gitee


会员名：
登录密码：
密码确认：
联系人姓名：
企业名称：
贸易身份：	我要销售 + 我要采购 + 两者都是
手机号码：	+ + + + + + +
	+ 创建网站账号的同时，我同意遵守：《阿里巴巴服务条款》及《隐私声明》 +
	+ +