diff --git "a/\344\270\201\346\235\250\346\202\246/20240923 dragstart\346\213\226\345\212\250\344\272\213\344\273\266.md" "b/\344\270\201\346\235\250\346\202\246/20240923 dragstart\346\213\226\345\212\250\344\272\213\344\273\266.md"
new file mode 100644
index 0000000000000000000000000000000000000000..e4e35f78551758123f79373d8b551831f52da95c
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/20240923 dragstart\346\213\226\345\212\250\344\272\213\344\273\266.md"	
@@ -0,0 +1,141 @@
+### dragstart拖动事件
+dragstart 事件在用户开始拖动元素时触发，它是一个自定义数据传输的开始点。这个事件通常用于初始化拖放操作，比如设置拖动数据、自定义拖动时的光标样式等。
+
+##### 事件对象
+* dragstart 事件会传递一个事件对象（通常命名为 e 或 event），它包含了与拖动操作相关的信息和方法。
+
+##### 设置拖动数据
+* 通过 dataTransfer.setData() 方法可以设置拖动的数据。这些数据稍后可以在 drop 事件中通过 dataTransfer.getData() 方法获取。
+* 可以设置多种格式的数据，如文本、URL 等。
+
+##### 自定义拖动效果
+* dataTransfer.effectAllowed 属性可以设置允许的拖动效果，如 copy、move 或 link。
+* dataTransfer.dropEffect 属性可以设置放置时的拖动效果，如 copy、move 或 link。
+
+##### 事件监听
+* 可以通过 addEventListener 方法添加 dragstart 事件监听器。
+* 也可以直接在 HTML 元素上使用 ondragstart 属性添加事件处理函数。
+
+##### 阻止默认行为
+* 通常情况下，不需要调用 e.preventDefault() 来触发 dragstart 事件，因为拖动操作本身就是一种默认行为。
+
+1. draggable属性：在HTML中，设置draggable="true"使元素可以被拖动。
+
+2. dragstart事件：当用户开始拖动元素时触发。可以在这里设置拖动的数据（使用e.dataTransfer.setData）。
+
+3. dragover事件：在放置目标上拖动时触发。必须调用e.preventDefault()以允许放置。
+
+4. drop事件：在放置目标上放下拖动的元素时触发。在这里可以获取拖动的数据并进行处理。
+
+
+### 代码演示
+```
+
+    <div id="box" draggable="true"></div>
+
+    <script>
+        let box=document.getElementById('box');
+
+    
+        console.log(box);
+
+        box.onabort=function(){
+           
+        }
+        document.addEventListener('drag',function(){
+            console.log('不嘻嘻');
+        })
+
+     
+
+    </script>
+    
+```
+
+### 跑马灯
+
+## 图示
+![跑马灯图示](./跑马灯图示.png)
+
+## 代码
+``
+<style>
+        .xx{
+            overflow: hidden;
+            white-space: nowrap;
+            position: relative;
+            background-color: aquamarine;
+        }
+
+        .xx p{
+            display: inline-block;
+            animation: move 15s linear infinite;
+            will-change: transform;
+            color: blueviolet;
+            font-size: 25px;
+        }
+
+        @keyframes move{
+            from{
+                transform: translateX(100%);
+            }
+            to{
+                transform: translateX(-100%);
+            }
+
+        }
+
+      
+    </style>
+</head>
+<body>
+    <div class="xx">
+        <p> 老到走不远了
+            至少 楼下散步 有我呢
+            你说你没安全感 习惯了孤单
+            我会让你习惯 多一个人陪伴
+            我们都怕寂寞 被时间慢慢吞没
+            别怕 亲爱的 有我呢--《有我呢》</p>
+    </div>
+``
+
+```
+<style>
+        .xx{
+            overflow: hidden;
+            white-space: nowrap;
+            position: relative;
+            background-color: aquamarine;
+        }
+
+        .xx p{
+            display: inline-block;
+            animation: move 15s linear infinite;
+            will-change: transform;
+            color: blueviolet;
+            font-size: 25px;
+        }
+
+        @keyframes move{
+            from{
+                transform: translateX(100%);
+            }
+            to{
+                transform: translateX(-100%);
+            }
+
+        }
+
+      
+    </style>
+</head>
+<body>
+    <div class="xx">
+        <p> 老到走不远了
+            至少 楼下散步 有我呢
+            你说你没安全感 习惯了孤单
+            我会让你习惯 多一个人陪伴
+            我们都怕寂寞 被时间慢慢吞没
+            别怕 亲爱的 有我呢--《有我呢》</p>
+    </div>
+```
diff --git "a/\344\270\201\346\235\250\346\202\246/20240926 css\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\345\255\227\344\275\223\345\261\236\346\200\247.md" "b/\344\270\201\346\235\250\346\202\246/20240926 css\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\345\255\227\344\275\223\345\261\236\346\200\247.md"
new file mode 100644
index 0000000000000000000000000000000000000000..b81340ea8c2613687f2a13b855200f806aecd5dc
--- /dev/null
+++ "b/\344\270\201\346\235\250\346\202\246/20240926 css\346\226\207\346\234\254\345\261\236\346\200\247\345\222\214\345\255\227\344\275\223\345\261\236\346\200\247.md"	
@@ -0,0 +1,151 @@
+## 文本属性
+1. color:设置文本颜色
+
+2. font-family：设置字体族，可以指定一个或多个字体
+
+3. font-size：设置字体大小
+
+4. font-style：设置字体风格，可以是 normal, italic, 或 oblique。
+
+5. font-weight: 设置字体粗细，可以是 normal, bold, bolder, lighter 或具体的数（100-900）。
+
+6. text-align: 设置文本对齐方式，可以是 left, right, center, justify。
+
+7. text-decoration: 设置文本装饰，可以是 none, underline, overline, line-through。
+
+8. text-indent: 设置首行文本的缩进。
+
+9. line-height: 设置行高，可以是数字（相对于字体大小的倍数）或具体数值。
+
+10. letter-spacing: 设置字符间距。
+
+11. word-spacing: 设置单词间距。
+
+12. text-shadow: 设置文本阴影。
+
+* letter-spacing: 0.5cm ; 单个字母之间的间距
+* word-spacing: 1cm; 单词之间的间距
+* text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线
+* color:red; 字体颜色
+* text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify
+* text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）
+
+
+## 字体属性
+CSS还提供了一个简写属性 font，允许你在一个声明中设置所有字体相关的属性：
+```
+css
+body {
+  font: italic normal bold 16px/1.5 Arial, sans-serif;
+}
+```
+这个例子中，font 属性按照以下顺序设置了不同的值：
+
+* italic: 字体风格
+* normal: 字体加粗（font-weight）
+* bold: 字体粗细（font-weight 重复，这里会覆盖前面的 normal）
+* 16px: 字体大小
+* 1.5: 行高
+* Arial, sans-serif: 字体族
+这些属性是CSS中控制文本和字体样式的基础，通过它们可以创建出各种视觉效果的文本内容。
+
+# 作业
+1. 十二、文本样式综合设计
+要求：
+设计一个类 .highlight，使得应用该类的元素文本颜色为金色，背景颜色为黑色，文本为大写，并且首行缩进 20px。
+同时，设置该元素的 :hover 伪类，使得悬停时文本颜色变为白色，背景颜色为深灰色
+
+#### 代码块
+```
+<style>
+        .highlight{
+            background-color: black;
+            font-size: larger;
+            color: gold;
+            text-indent: 20px;
+        }
+
+        .highlight:hover{
+            background-color: dimgray;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <p class="highlight">《骆驼祥子》是中国现代著名作家老舍的代表作之一，讲述了20世纪20年代北平城内一个名叫祥子的人力车夫的悲惨命运。祥子原是个破产农民，从农村流落到城市，几经选择，最后做了人力车夫。他年轻力壮、自信、要强、勤奋，决心买一辆人力车，凭自己的力气，做一个自食其力、独立生活的劳动者。
+        在小说中，祥子经历了买车、失车、再买车、再失车的坎坷过程。他的第一次买车是通过三年的省吃俭用，终于攒够了钱，实现了自己买车的宿愿。但不幸的是，他连人带车被混战的旧军队抓了去，车丢了。在军队溃逃的慌乱之中，他牵了三匹散落在外的骆驼逃出来，这就是“骆驼祥子”这个名字的由来。他把骆驼卖了三十五块大洋，又重新开始了奋斗
+        。</p>
+</body>
+```
+#### 效果实现
+![第十二题](../作业图片/字体属性12.png)
+
+2. 十三、文本排版设计
+要求：
+设计一个类 .article，使得应用该类的元素文本颜色为深灰色，字体大小为 16px，行高为 1.5，首行缩进为 1em。
+同时，设置该元素的:first-letter 伪元素，使得首字母字体大小为 24px，字体加粗。
+
+#### 代码块
+```
+<style>
+        .article p {
+            font-size: 16px;
+            color: dimgrey;
+            line-height: 1.5;
+            text-indent: 1em;
+        }
+
+        .article p:first-letter {
+            font-weight: bold;
+            font-size: 24px;
+        }
+    </style>
+</head>
+
+<body>
+    <article class="article">
+        <p>多年以后，奥雷连诺上校站在行刑队面前，准会想起父亲带他去参观冰块的那个遥远的下午。当时，马孔多是一个二十户人家的村庄，一座座土房都盖在河岸上，河水清澈，沿着遍布石头的河床流去，河里的石头光滑、洁白，活像史前的巨蛋。世界新生伊始，许多事物还没有名字，提到的时候尚需用手指指点点。
+        </p>
+        <p>小王子觉得有点不安，但他没有表现出来。
+            “我不明白，”他说，“我怎么会在这里。我本来在很远的地方。”
+            “你从很远的地方来，”蛇说，“但是你从哪里来，这并不重要。重要的是你要去哪里。”。</p>
+    </article>
+
+</body>
+```
+
+#### 代码实现
+![第十三题](../作业图片/字体属性13.png)
+
+3. 十四、文本对齐和装饰
+要求：
+设计一个类 .poem，使得应用该类的元素文本对齐方式为两端对齐，文本颜色为深蓝色，并且每个单词的首字母大写。
+同时，设置该元素的 ::first-line 伪元素，使得第一行文本颜色为深红色。
+
+#### 代码块
+```
+ <style>
+        .poem {
+            color: blue;
+            text-align: center;
+            text-transform: capitalize;
+        }
+
+        .poem::first-line {
+            color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="poem">
+        这是一首诗。每个字都充满了情感，每个词都蕴含着深意。
+        <hr>
+        "Shall I compare thee to a summer's day? / Thou art more lovely and more temperate."
+    </div>
+</body>
+
+```
+
+#### 代码实现
+![第十四题](../作业图片/字体属性14.png)
\ No newline at end of file
diff --git "a/\344\270\201\346\235\250\346\202\246/\350\267\221\351\251\254\347\201\257\345\233\276\347\244\272.png" "b/\344\270\201\346\235\250\346\202\246/\350\267\221\351\251\254\347\201\257\345\233\276\347\244\272.png"
new file mode 100644
index 0000000000000000000000000000000000000000..e66ecea4fb6e1341efc5256a8350c3dca6cabce1
Binary files /dev/null and "b/\344\270\201\346\235\250\346\202\246/\350\267\221\351\251\254\347\201\257\345\233\276\347\244\272.png" differ
