diff --git "a/\345\274\240\350\257\255\345\253\243/image/css\345\256\236\347\216\260\346\273\232\345\212\250\345\255\227\345\271\225.png" "b/\345\274\240\350\257\255\345\253\243/image/css\345\256\236\347\216\260\346\273\232\345\212\250\345\255\227\345\271\225.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e156007342188799a9fca217a760825349f27f92
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/css\345\256\236\347\216\260\346\273\232\345\212\250\345\255\227\345\271\225.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/\346\213\226\346\213\275.png" "b/\345\274\240\350\257\255\345\253\243/image/\346\213\226\346\213\275.png"
new file mode 100644
index 0000000000000000000000000000000000000000..4651f95b3b2bb1df7bf1a3109f0cf67c07da224d
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/\346\213\226\346\213\275.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\345\257\271\351\275\220\345\222\214\350\243\205\351\245\260.png" "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\345\257\271\351\275\220\345\222\214\350\243\205\351\245\260.png"
new file mode 100644
index 0000000000000000000000000000000000000000..ca94c592d597f48badc53479dfccb07572cacb96
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\345\257\271\351\275\220\345\222\214\350\243\205\351\245\260.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\216\222\347\211\210\350\256\276\350\256\241.png" "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\216\222\347\211\210\350\256\276\350\256\241.png"
new file mode 100644
index 0000000000000000000000000000000000000000..be619224513e4eff565a8b2992e07558264a7ff4
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\216\222\347\211\210\350\256\276\350\256\241.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\344\274\252\347\261\273\347\273\223\345\220\210.png" "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\344\274\252\347\261\273\347\273\223\345\220\210.png"
new file mode 100644
index 0000000000000000000000000000000000000000..a5404964ad50198c3e4a93f5be719c5aadbf8e26
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\344\274\252\347\261\273\347\273\223\345\220\210.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\345\212\250\347\224\273.png" "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\345\212\250\347\224\273.png"
new file mode 100644
index 0000000000000000000000000000000000000000..207cf68135716ef60ebed6773a152588026c9d2e
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\345\212\250\347\224\273.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.png" "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.png"
new file mode 100644
index 0000000000000000000000000000000000000000..6fd1ed065a16280096e7ac12100f60d4e2a4db1c
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\347\273\274\345\220\210\350\256\276\350\256\241.png" "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\347\273\274\345\220\210\350\256\276\350\256\241.png"
new file mode 100644
index 0000000000000000000000000000000000000000..64c5344d1a8facb237be4594ef0a53d270c9a6f1
Binary files /dev/null and "b/\345\274\240\350\257\255\345\253\243/image/\346\226\207\346\234\254\346\240\267\345\274\217\347\273\274\345\220\210\350\256\276\350\256\241.png" differ
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240923/test01-css\345\256\236\347\216\260\346\273\232\345\212\250\345\255\227\345\271\225.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240923/test01-css\345\256\236\347\216\260\346\273\232\345\212\250\345\255\227\345\271\225.html"
new file mode 100644
index 0000000000000000000000000000000000000000..c7d981ca5600c2ec502f16e3a41c580d5e6cba1c
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240923/test01-css\345\256\236\347\216\260\346\273\232\345\212\250\345\255\227\345\271\225.html"
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>css实现滚动</title>
+    <style>
+        .one {
+            width: 300px;
+            height: 200px;
+            overflow: hidden;
+            position: relative;
+            background-color: pink;
+        }
+
+        .two {
+            position: absolute;
+            white-space: nowrap;
+            animation: gd 15s linear infinite alternate;
+        }
+
+        @keyframes gd {
+            from {
+                top: 100%;
+            }
+
+            to {
+                top: -100%;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="one">
+        <div class="two">我爱你</div>
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240923/test02-\346\213\226\346\213\275\346\225\210\346\236\234.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240923/test02-\346\213\226\346\213\275\346\225\210\346\236\234.html"
new file mode 100644
index 0000000000000000000000000000000000000000..704e829ab568ce977c5b8d586ad7dad83a0de931
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240923/test02-\346\213\226\346\213\275\346\225\210\346\236\234.html"
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>拖拽效果实现</title>
+    <style>
+        .tz {
+            width: 200px;
+            height: 200px;
+            background-color: lightblue;
+        }
+    </style>
+</head>
+<body>
+<div class="tz" draggable="true"></div>
+<script>
+    var box = document.querySelector('.tz');
+    box.ondragstart = function () {
+        console.log('拖我干什么?');
+    }
+    box.ondragleave = function () {
+        console.log('网上神经欺我小无力，页面拖我半里地');
+    }
+    box.ondragend = function () {
+        document.writeln('网上神经欺我小无力，页面拖我半里地');
+        console.log('拖拽结束');
+        console.log("---------------");
+    }
+    box.ondrag = function () {
+        console.log('拖拽中');
+    }
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test01-\346\226\207\346\234\254\346\240\267\345\274\217\347\273\274\345\220\210\350\256\276\350\256\241.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test01-\346\226\207\346\234\254\346\240\267\345\274\217\347\273\274\345\220\210\350\256\276\350\256\241.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2d53b2f4383877a344b2bb2a2e92416b8b08bafd
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test01-\346\226\207\346\234\254\346\240\267\345\274\217\347\273\274\345\220\210\350\256\276\350\256\241.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>test01</title>
+    <style>
+        .highlight {
+            color: gold;
+            background-color: black;
+            text-transform: uppercase;
+            text-indent: 20px;
+        }
+
+        .highlight:hover {
+            color: white;
+            background-color: darkgray;
+        }
+        p {
+            width: 250px;
+        }
+    </style>
+</head>
+
+<body>
+    <p class="highlight">这是一段需要高亮显示的文本。</p>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test02-\346\226\207\346\234\254\346\216\222\347\211\210\350\256\276\350\256\241.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test02-\346\226\207\346\234\254\346\216\222\347\211\210\350\256\276\350\256\241.html"
new file mode 100644
index 0000000000000000000000000000000000000000..f1e875bda73f049473bb46b30bb3fe972644af63
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test02-\346\226\207\346\234\254\346\216\222\347\211\210\350\256\276\350\256\241.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>test02</title>
+    <style>
+        .article p {
+            color: darkgray;
+            font-size: 16px;
+            line-height: 1.5;
+            text-indent: 1em;
+        }
+
+        .article p::first-letter {
+            font-size: 24px;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <article class="article">
+        <p>这是文章的第一段。</p>
+        <p>这是文章的第二段。</p>
+    </article>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test03-\346\226\207\346\234\254\345\257\271\351\275\220\345\222\214\350\243\205\351\245\260.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test03-\346\226\207\346\234\254\345\257\271\351\275\220\345\222\214\350\243\205\351\245\260.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2b5f8109cd2fddf45fcf7738628fbdf13d7cc05e
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test03-\346\226\207\346\234\254\345\257\271\351\275\220\345\222\214\350\243\205\351\245\260.html"
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test03</title>
+    <style>
+        .poem {
+            text-align: justify;
+            color: darkblue;
+            text-transform: capitalize;
+        }
+
+        .poem::first-line {
+            color: darkred;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="poem">
+        这是一首诗。每个字都充满了情感，每个词都蕴含着深意。
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test04-\346\226\207\346\234\254\346\240\267\345\274\217\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test04-\346\226\207\346\234\254\346\240\267\345\274\217\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.html"
new file mode 100644
index 0000000000000000000000000000000000000000..2bdc8030cda65b5b3cb5e0a8306ad730e17151bd
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test04-\346\226\207\346\234\254\346\240\267\345\274\217\345\223\215\345\272\224\345\274\217\350\256\276\350\256\241.html"
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test04</title>
+    <style>
+        .news {
+            font-size: 18px;
+            line-height: 1.6;
+        }
+
+        @media (max-width: 900px) and (min-width: 600px) {
+            .news {
+                font-size: 16px;
+                line-height: 1.4;
+            }
+        }
+
+        @media (max-width: 599px) {
+            .news {
+                font-size: 14px;
+                line-height: 1.2;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="news">
+        这是一条新闻。请根据屏幕宽度调整文本样式。
+    </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test05-\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\344\274\252\347\261\273\347\273\223\345\220\210.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test05-\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\344\274\252\347\261\273\347\273\223\345\220\210.html"
new file mode 100644
index 0000000000000000000000000000000000000000..234b8d3d9a0f0475a20e7aedaae6e65cdee30bdb
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test05-\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\344\274\252\347\261\273\347\273\223\345\220\210.html"
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test05</title>
+    <style>
+        .quote {
+            color: gray;
+            font-style: italic;
+            text-indent: 20px;
+            position: relative;
+            display: inline-block;
+            quotes: "“" "”" "‘" "’";
+        }
+
+        .quote::before {
+            content: open-quote;
+            position: absolute;
+            left: -15px;
+            top: 0;
+        }
+
+        .quote::after {
+            content: close-quote;
+            position: absolute;
+            right: 0;
+            bottom: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <blockquote class="quote">
+        这是一个引用文本。它应该看起来像是从某本书中摘录的。
+    </blockquote>
+</body>
+
+</html>
\ No newline at end of file
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test06-\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\345\212\250\347\224\273.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test06-\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\345\212\250\347\224\273.html"
new file mode 100644
index 0000000000000000000000000000000000000000..4455cca9674a799c30ef33385d106fe872955f8c
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20240926/test06-\346\226\207\346\234\254\346\240\267\345\274\217\344\270\216\345\212\250\347\224\273.html"
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test06</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/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20240923-\346\213\226\346\213\275+\345\216\206\345\217\262+\345\234\260\347\220\206+\345\205\250\345\261\217.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20240923-\346\213\226\346\213\275+\345\216\206\345\217\262+\345\234\260\347\220\206+\345\205\250\345\261\217.md"
new file mode 100644
index 0000000000000000000000000000000000000000..ed5dfe3162f710c427da63ba3a586e10587392e4
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20240923-\346\213\226\346\213\275+\345\216\206\345\217\262+\345\234\260\347\220\206+\345\205\250\345\261\217.md"
@@ -0,0 +1,266 @@
+## 拖拽
+### 1、拖拽元素
+```html
+<div class="box1" draggable="true"></div>
+```
+**拖拽元素的事件监听**：（应用于拖拽元素）
+
+- `ondragstart`当拖拽开始时调用
+
+- `ondragleave`	当**鼠标离开拖拽元素时**调用
+
+- `ondragend`	当拖拽结束时调用
+
+- `ondrag` 		整个拖拽过程都会调用
+```html
+<script>
+    var box = document.querySelector('.box');
+    box.ondragstart = function () {
+        console.log('拖拽开始.');
+    }
+    //  拖拽离开：鼠标拖拽时离开被拖拽的元素时触发
+    box.ondragleave = function () {
+        console.log('拖拽离开..');
+    }
+    box.ondragend = function () {
+        console.log('拖拽结束...');
+        console.log("---------------");
+    }
+    box.ondrag = function () {
+        console.log('拖拽');
+    }
+</script>
+```
+
+### 2、目标元素
+
+把A拖到B去，那B就是目标元素。页面中任何一个元素都可以成为目标元素。
+
+**目标元素的事件监听**：（应用于目标元素）
+
+- `ondragenter`	当拖拽元素进入时调用
+
+- `ondragover`	当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
+
+- `ondrop`		当在目标元素上松开鼠标时调用
+
+- `ondragleave`	当鼠标离开目标元素时调用
+
+```html
+<body>
+<div class="one" draggable="true"></div>
+<div class="two"></div>
+
+<script>
+    var two = document.querySelector('.two');
+
+    //目标元素的拖拽事件
+
+    // 当被拖拽元素进入时触发
+    two.ondragenter = function () {
+        console.log("来了.");
+    }
+
+    // 当被拖拽元素离开时触发
+    two.ondragleave = function () {
+
+        console.log("走了..");
+    }
+
+    // 当拖拽元素在 目标元素上时，连续触发
+    two.ondragover = function (e) {
+        //阻止拖拽事件的默认行为
+        e.preventDefault(); //【重要】一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。
+
+        console.log("over...");
+    }
+
+    // 当在目标元素上松开鼠标是触发
+    two.ondrop = function () {
+        console.log("松开鼠标了....");
+    }
+</script>
+</body>
+```
+
+## 历史
+
+界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。
+
+在HTML5中可以通过 `window.history` 操作访问历史状态，让一个页面可以有多个历史状态
+
+`window.history`对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
+
+- window.history.forward(); // 前进
+
+- window.history.back(); // 后退
+
+- window.history.go(); // 刷新
+
+- window.history.go(n); //n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。
+
+- 通过JS可以加入一个访问状态
+
+- history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)
+
+### API详解
+
+- navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
+
+- navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
+
+1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）
+
+- position.coords.latitude纬度
+
+- position.coords.longitude经度
+
+2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error。
+
+3、可选参数 options 对象可以调整位置信息数据收集方式
+
+### 开启/关闭全屏显示
+
+方法如下：（注意 screen 是小写）
+
+```javascript
+	requestFullscreen()   //让元素开启全屏显示
+
+	cancleFullscreen()    //让元素关闭全屏显示
+```
+
+
+为考虑兼容性问题，不同的浏览器需要**在此基础之上**，添加私有前缀，比如：（注意 screen 是大写）
+
+```javascript
+	webkitRequestFullScreen
+	 webkitCancleFullScreen
+
+	mozRequestFullScreen
+	mozCancleFullScreen
+```
+
+### 检测当前是否处于全屏状态
+
+方法如下：
+
+```
+	document.fullScreen
+```
+
+
+不同浏览器需要加私有前缀，比如：
+
+```javascript
+     document.webkitIsFullScreen
+
+     document.mozFullScreen
+```
+
+
+### 全屏的伪类
+
+- :full-screen .box {}
+
+- :-webkit-full-screen {}
+
+- :moz-full-screen {}
+
+比如说，当元素处于全屏状态时，改变它的样式。这时就可以用到伪类。
+
+### H5 中有两种存储的方式
+
+1、**`window.sessionStorage` 会话存储：**
+
+- 保存在内存中。
+
+- **生命周期**为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
+
+- 在同一个窗口下数据可以共享。
+
+
+2、**`window.localStorage` 本地存储**：
+
+- 有可能保存在浏览器内存里，有可能在硬盘里。
+
+- 永久生效，除非手动删除（比如清理垃圾的时候）。
+
+- 可以多窗口共享。
+
+# 作业效果图
+![css实现滚动字幕](../image/css实现滚动字幕.png)
+```html
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>css实现滚动</title>
+    <style>
+        .one {
+            width: 300px;
+            height: 200px;
+            overflow: hidden;
+            position: relative;
+            background-color: pink;
+        }
+
+        .two {
+            position: absolute;
+            white-space: nowrap;
+            animation: gd 15s linear infinite alternate;
+        }
+
+        @keyframes gd {
+            from {
+                top: 100%;
+            }
+
+            to {
+                top: -100%;
+            }
+        }
+    </style>
+</head>
+
+<body>
+    <div class="one">
+        <div class="two">我爱你</div>
+    </div>
+</body>
+```
+![拖拽效果](../image/拖拽.png)
+```html
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>拖拽效果实现</title>
+    <style>
+        .tz {
+            width: 200px;
+            height: 200px;
+            background-color: lightblue;
+        }
+    </style>
+</head>
+<body>
+<div class="tz" draggable="true"></div>
+<script>
+    var box = document.querySelector('.tz');
+    box.ondragstart = function () {
+        console.log('拖我干什么?');
+    }
+    box.ondragleave = function () {
+        console.log('网上神经欺我小无力，页面拖我半里地');
+    }
+    box.ondragend = function () {
+        document.writeln('网上神经欺我小无力，页面拖我半里地');
+        console.log('拖拽结束');
+        console.log("---------------");
+    }
+    box.ondrag = function () {
+        console.log('拖拽中');
+    }
+</script>
+</body>
+</html>
+```
diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20240926-CSS\345\255\227\344\275\223\345\261\236\346\200\247+\346\226\207\346\234\254\345\261\236\346\200\247.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20240926-CSS\345\255\227\344\275\223\345\261\236\346\200\247+\346\226\207\346\234\254\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..bfebbd570ea6c741b596d6d966256ba036111575
--- /dev/null
+++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20240926-CSS\345\255\227\344\275\223\345\261\236\346\200\247+\346\226\207\346\234\254\345\261\236\346\200\247.md"
@@ -0,0 +1,244 @@
+### 绝对单位
+- `in`：英寸Inches (1 英寸 = 2.54 厘米)
+- `cm`：厘米Centimeters
+- `mm`：毫米Millimeters
+- `pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
+- `pc`：皮卡Picas (1 皮卡 = 12 点)
+
+### 相对单位
+`px`：像素(电脑屏幕的尺寸不变，但在不同的分辨率下，单个像素的长度是不一样的)
+`em`：印刷单位相当于12个点
+`%`：百分比，相对周围的文字的大小
+
+## font 字体属性
+CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
+```css
+p{
+	font-size: 50px; 		/*字体大小*/
+	line-height: 30px;      /*行高*/
+	font-family: 幼圆,黑体; 	/*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
+	font-style: italic ;		/*italic表示斜体，normal表示不倾斜*/
+	font-weight: bold;	/*粗体*/
+	font-variant: small-caps;  /*小写变大写*/
+}
+```
+
+### 行高
+为了保证字在行里面居中，**行高、字号，一般都是偶数**
+
+### 如何让单行文本垂直居中
+**行高 = 盒子高**，就可以保证单行文本垂直居中
+
+### `vertical-align: middle;` 属性
+`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
+
+### 字号、行高、字体三大属性
+是否加粗属性和这三个属性可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）
+```
+	font: 加粗 字号/行高/ 字体
+	font: 400 14px/24px "宋体";
+```
+font属性连写至少要有**字号和字体**，否则连写不生效
+
+### 字体属性的说明
+1. 不是所有的字体都能使用，某些字体如果电脑内未安装，则会变成宋体
+
+2. 英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
+```
+	font-family: "Times New Roman","微软雅黑","宋体";
+```
+上方代码中，英文会采用Times New Roman字体，而中文会采用微软雅黑字体
+
+3. 所有的中文字体，都有英语别名
+
+微软雅黑的英语别名：
+
+```
+	font-family: "Microsoft YaHei";
+```
+
+宋体的英语别名：
+
+```
+	font-family: "SimSun";
+```
+
+当我们把字号、行高、字体这三个属性合二为一时，可以写成：
+
+```
+	font:12px/30px  "Times New Roman","Microsoft YaHei","SimSun";
+```
+
+4. 行高可以用百分比，表示字号的百分之多少
+
+一般来说，百分比都是大于100%的，因为行高一定要大于字号。
+
+比如说， `font:12px/200% “宋体”`等价于`font:12px/24px “宋体”`。`200%`可以理解成word里面的2倍行高。
+
+反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。
+
+
+### 字体加粗属性
+```css
+.div {
+	font-weight: normal; /*正常，相当于400*/
+	font-weight: bold;  /*加粗，相当于700*/
+	font-weight: 100~900;
+}
+```
+
+## 文本属性
+CSS样式中，常见的文本属性有以下几种：
+
+- `letter-spacing: 0.5cm ;`  单个字母之间的间距
+- `word-spacing: 1cm;`   单词之间的间距
+- `text-decoration: none;` 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线
+- `color:red;` 字体颜色
+- `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
+- `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
+
+# 作业效果图
+![文本样式综合设计](../image/文本样式综合设计.png)
+```html
+<style>
+        .highlight {
+            color: gold;
+            background-color: black;
+            text-transform: uppercase;
+            text-indent: 20px;
+        }
+
+        .highlight:hover {
+            color: white;
+            background-color: darkgray;
+        }
+        p {
+            width: 250px;
+        }
+    </style>
+```
+![文本排版样式](../image/文本排版设计.png)
+```html
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>test02</title>
+    <style>
+        .article p {
+            color: darkgray;
+            font-size: 16px;
+            line-height: 1.5;
+            text-indent: 1em;
+        }
+
+        .article p::first-letter {
+            font-size: 24px;
+            font-weight: bold;
+        }
+    </style>
+</head>
+
+<body>
+    <article class="article">
+        <p>这是文章的第一段。</p>
+        <p>这是文章的第二段。</p>
+    </article>
+</body>
+
+```
+![文本对齐和装饰](../image/文本对齐和装饰.png)
+```html
+<style>
+        .poem {
+            text-align: justify;
+            color: darkblue;
+            text-transform: capitalize;
+        }
+
+        .poem::first-line {
+            color: darkred;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="poem">
+        这是一首诗。每个字都充满了情感，每个词都蕴含着深意。
+    </div>
+</body>
+```
+![文本样式响应式设计](../image/文本样式响应式设计.png)
+```html
+<style>
+        .news {
+            font-size: 18px;
+            line-height: 1.6;
+        }
+
+        @media (max-width: 900px) and (min-width: 600px) {
+            .news {
+                font-size: 16px;
+                line-height: 1.4;
+            }
+        }
+
+        @media (max-width: 599px) {
+            .news {
+                font-size: 14px;
+                line-height: 1.2;
+            }
+        }
+    </style>
+```
+![文本样式与伪类结合](../image/文本样式与伪类结合.png)
+```html
+<style>
+        .quote {
+            color: gray;
+            font-style: italic;
+            text-indent: 20px;
+            position: relative;
+            display: inline-block;
+            quotes: "“" "”" "‘" "’";
+        }
+
+        .quote::before {
+            content: open-quote;
+            position: absolute;
+            left: -15px;
+            top: 0;
+        }
+
+        .quote::after {
+            content: close-quote;
+            position: absolute;
+            right: 0;
+            bottom: 0;
+        }
+    </style>
+
+<body>
+    <blockquote class="quote">
+        这是一个引用文本。它应该看起来像是从某本书中摘录的。
+    </blockquote>
+</body>
+```
+![文本样式与动画](../image/文本样式与动画.png)
+```html
+<style>
+        @keyframes flash {
+            0%,100% {
+                color: red;
+            }
+            50% {
+                color: yellow;
+            }
+        }
+
+        .flashing {
+            animation: flash 2s infinite;
+        }
+    </style>
+
+    <p class="flashing">这段文本将闪烁。</p>
+```
\ No newline at end of file