diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-23/image.png" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-23/image.png"
new file mode 100644
index 0000000000000000000000000000000000000000..04f60d0813cdc295a7591391cb5df17b1f7309ae
Binary files /dev/null and "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-23/image.png" differ
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-23/\350\267\221\351\251\254\347\201\257.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-23/\350\267\221\351\251\254\347\201\257.html"
new file mode 100644
index 0000000000000000000000000000000000000000..faf56afe358a9658c41219eecd2b06374fcca8c0
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-23/\350\267\221\351\251\254\347\201\257.html"
@@ -0,0 +1,56 @@
+<!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>
+    <style>
+		* {
+			margin:0;padding: 0;
+			font-size: 50px;
+			color:pink;
+		}
+		.block {
+
+			background-color: #659bb4;
+			white-space: nowrap;
+			overflow: hidden;
+			margin-top: 20px;
+		}
+		.words {
+			position: relative;
+			width: fit-content;
+			animation:move 6s linear infinite;
+                        padding-left:50px;
+		}
+		.words::after{
+			position: absolute; 
+			right:-100%;
+			content:attr(text);
+		}
+
+		@keyframes move {
+			0% {
+				transform: translateX(0);
+			}
+			100% {
+				transform: translateX(-100%);
+			}
+		}
+	</style>
+        <body>
+		<div class="block">
+			<p class="words">
+				想见你只想见你，未来过去，我只想见你~~~
+			</p>
+		</div>
+		<div class="block">
+			<p class="words">
+				第五人格最好玩了喵喵喵，我爱玩第五！！！
+			</p>
+		</div>
+        </body>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\345\215\201\344\272\214\351\242\230.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\345\215\201\344\272\214\351\242\230.html"
new file mode 100644
index 0000000000000000000000000000000000000000..3bc53e6bf07021920aabb5a549d4977a21a92f30
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\345\215\201\344\272\214\351\242\230.html"
@@ -0,0 +1,30 @@
+<!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>
+        .highlight {
+            color: gold;
+            background-color: black;
+
+            text-indent: 20px;
+            text-transform: uppercase
+        }
+
+        .highlight:hover {
+            color: white;
+            background-color: gray;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- 颜色为金色，背景颜色为黑色，文本为大写，并且首行缩进 20px。
+    同时，设置该元素的 :hover 伪类，使得悬停时文本颜色变为白色，背景颜色为深灰色。 -->
+    <p class="highlight">亚比，囧囧囧~~~</p>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\344\270\203\351\242\230.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\344\270\203\351\242\230.html"
new file mode 100644
index 0000000000000000000000000000000000000000..b7d439cbc8cb7577da26d802f65ecf14197412da
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\344\270\203\351\242\230.html"
@@ -0,0 +1,31 @@
+<!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>
+    @keyframes flash {
+
+      0%,
+      100% {
+        color: red;
+      }
+
+      50% {
+        color: yellow;
+      }
+    }
+
+    .flashing {
+      animation: flash 2s infinite;
+    }
+  </style>
+</head>
+
+<body>
+  <p class="flashing">这段文本将闪烁。</p>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\344\270\211\351\242\230.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\344\270\211\351\242\230.html"
new file mode 100644
index 0000000000000000000000000000000000000000..1c5f62c5b8e82060bb10ba4525c669e43ec7387c
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\344\270\211\351\242\230.html"
@@ -0,0 +1,30 @@
+<!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>
+        .article p {
+            color: gray;
+            font-size: 16px;
+            line-height: 1.5;
+            text-indent: 1em;
+        }
+
+        .article p:first-letter {
+            font-size: 24px;
+            font-weight: 700;
+        }
+    </style>
+</head>
+
+<body>
+    <article class="article">
+        <p>这是文章的第一段。</p>
+        <p>这是文章的第二段。</p>
+    </article>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\344\272\224\351\242\230.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\344\272\224\351\242\230.html"
new file mode 100644
index 0000000000000000000000000000000000000000..77658e200ebfd9e4471536b903401e68f874c9ae
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\344\272\224\351\242\230.html"
@@ -0,0 +1,45 @@
+<!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>
+        .news {
+
+            @media screen and (min-width:600px) {
+                body {
+                    font-size: 14px;
+                    line-height: 1.2;
+                }
+            }
+
+            @media screen and (min-width:600px)and (max-width:900px) {
+                body {
+                    font-size: 16px;
+                    line-height: 1.4;
+                }
+            }
+
+            @media screen and (max-width:900px) {
+                body {
+                    font-size: 18px;
+                    line-height: 1.6;
+                }
+            }
+
+        }
+    </style>
+</head>
+
+<body>
+    <!-- 当屏幕宽度小于 600px 时，文本大小为 14px，行高为 1.2。 -->
+    <!-- 当屏幕宽度在 600px 到 900px 之间时，文本大小为 16px，行高为 1.4。 -->
+    <!-- 当屏幕宽度大于 900px 时，文本大小为 18px，行高为 1.6。 -->
+    <div class="news">
+        这是一条新闻。请根据屏幕宽度调整文本样式。
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\345\205\255\351\242\230.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\345\205\255\351\242\230.html"
new file mode 100644
index 0000000000000000000000000000000000000000..45c7358fa10ae0621bf80cc75d9b1db1116b4067
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\345\205\255\351\242\230.html"
@@ -0,0 +1,31 @@
+<!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>
+        .quote {
+            color: gray;
+            font-style: italic;
+            text-indent: right;
+        }
+
+        .quote::before {
+            content: "“";
+        }
+
+        .quote::after {
+            content: "”";
+        }
+    </style>
+</head>
+
+<body>
+    <blockquote class="quote">
+        这是一个引用文本。它应该看起来像是从某本书中摘录的。
+    </blockquote>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\345\233\233\351\242\230.html" "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\345\233\233\351\242\230.html"
new file mode 100644
index 0000000000000000000000000000000000000000..fba0f14a07c96a7183ba6da3c2c79f7e1eaacbff
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\344\275\234\344\270\232/2024-9-26/\347\254\254\345\215\201\345\233\233\351\242\230.html"
@@ -0,0 +1,26 @@
+<!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>
+        .poem {
+           
+            text-align:justify
+        }
+
+        .poem::first-line {
+           color: brown;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="poem">
+        这是一首诗。每个字都充满了情感，每个词都蕴含着深意。
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-9-23-HTML\347\232\204\346\213\226\345\212\250.md" "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-9-23-HTML\347\232\204\346\213\226\345\212\250.md"
new file mode 100644
index 0000000000000000000000000000000000000000..d1e23a73ab8d71563fb37572adfa8ba186c034be
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-9-23-HTML\347\232\204\346\213\226\345\212\250.md"
@@ -0,0 +1,88 @@
+# draggable 拖拉事件
+draggable 事件在用户开始拖动元素或被选择的文本时调用。
+
+#### 语法
+在网页开发中，使元素可拖动通常涉及到HTML5的拖放（Drag and Drop）API
+
+示例代码：
+```html
+ <style>
+    #box {
+      width: 200px;
+      height: 200px;
+      background-color: pink;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="box"></div>
+  <script>
+
+    let box = document.getElementById('box')
+    console.log(box);
+    box.ondrag = function () { }
+
+    document.addEventListener("drag", function () {
+      console.log('喵喵喵');
+    })
+    document.addEventListener("drag", function () {
+      console.log('喵喵喵');
+    })
+
+  </script>
+```
+
+HTML代码
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Draggable Element</title>
+</head>
+<body>
+
+<div id="draggable" draggable="true" ondragstart="dragStart(event)" style="width:200px;height:100px;background-color:blue;">
+  Drag me!
+</div>
+
+<script>
+// 获取元素
+var draggableElement = document.getElementById('draggable');
+
+// 拖动开始事件
+function dragStart(e) {
+  e.dataTransfer.setData("text", e.target.id);
+}
+
+// 可选：拖动结束事件
+draggableElement.ondragend = function(e) {
+  console.log('Drag ended');
+};
+
+// 如果需要在其他元素上处理放下事件，可以添加如下代码
+// document.body.ondrop = function(e) {
+//   e.preventDefault();
+//   var data = e.dataTransfer.getData("text");
+//   e.target.appendChild(document.getElementById(data));
+// };
+
+// 可选：阻止默认处理
+draggableElement.ondrag = function() {
+  return false;
+};
+</script>
+
+</body>
+</html>
+```
+
+  1. HTML:
+     + 1.<div>元素被设置为可拖动，通过draggable="true"属性。
+     + 2.ondragstart事件被设置为dragStart函数，当拖动开始时调用。
+  2. JavaScript:
+     + 1.dragStart函数在拖动开始时被调用，使用dataTransfer对象设置数据，这里设置的是元素的ID。
+     + 2.可选的ondragend事件处理函数在拖动结束时调用。
+     + 3.如果需要，可以为其他元素添加ondrop事件处理函数，以处理放下事件。
+
diff --git "a/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-9-26-\345\270\270\350\247\201\347\232\204\346\226\207\346\234\254\346\240\267\345\274\217.md" "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-9-26-\345\270\270\350\247\201\347\232\204\346\226\207\346\234\254\346\240\267\345\274\217.md"
new file mode 100644
index 0000000000000000000000000000000000000000..6d07ad47c1512f4d2aab71e7121ea34ceddcc09b
--- /dev/null
+++ "b/\351\237\246\350\257\227\350\257\227/\347\254\224\350\256\260/2024-9-26-\345\270\270\350\247\201\347\232\204\346\226\207\346\234\254\346\240\267\345\274\217.md"
@@ -0,0 +1,34 @@
+# CSS的单位
+### 绝对单位
+- in :英寸
+- cm :厘米
+- mm :毫米
+- pt :点points
+- pc :皮卡Picas
+
+### 相对定位
+px:像素 em: 印刷单位相当于12个点 %:百分比,相对周围的文字的大小
+
+
+### 常用的文字属性
+1. font-family:设置字体（宋体，黑体，微软雅黑等）
+2. font-size: 设置字体大小
+3. font-weight: 设置字体粗细(normal默认，bold粗体，lighter细体，bolder更细)
+4. font-style: 设置字体样式
+
+
+### 常用的文本属性
+1. color: 设文本颜色
+2. text-decoration: 设置文本装饰(underline下划线，overline上划线，line-through删除线)
+3. text-align:设置文本对齐方式
+4. text-transform:控制文本转换
+5. line-height:设置行高
+6. letter-spacing:设置字符间距
+7. word-spacing:设置单词间距
+8. text-indent:设置文本首行缩进
+9. text-shadow: 添加文本阴影
+10.white-space: 控制文本的换行方式
+11. direction:设置文本方向
+
+### 行高的原理
+每一行文字，可看成由上间距、文本内容、下间距构成。根据行高的标准定义，行高对于两条基线之间的距离，即第一行的3-4+上下间距+第二行的1-2+2-3，因为css中每一行的上间距和下间距肯定是相等的。所以代换一下，行高就等于他本身的上间距+下间距+文本高度
\ No newline at end of file
