diff --git "a/\351\231\206\346\273\242\351\222\260/20240923-html\345\237\272\347\241\200\345\222\214\346\273\232\345\212\250\345\255\227\345\271\225\344\275\234\344\270\232.md" "b/\351\231\206\346\273\242\351\222\260/20240923-html\345\237\272\347\241\200\345\222\214\346\273\232\345\212\250\345\255\227\345\271\225\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..1984d23b4c5f0f40c329475b8452eb7b64a29cc0 --- /dev/null +++ "b/\351\231\206\346\273\242\351\222\260/20240923-html\345\237\272\347\241\200\345\222\214\346\273\232\345\212\250\345\255\227\345\271\225\344\275\234\344\270\232.md" @@ -0,0 +1,57 @@ +# 作业和笔记 + +## 笔记 + +### 拖拽元素 +draggable="true" + + + +## 作业 + +### 效果图 + + + +### 主要代码 +1. html +```html + + + + + + Document + + + +
+
哈哈哈哈哈哈哈
+
+ + +``` + +2. css +```css +@keyframes scroll-left { + 0% { + transform: translateX(100%); /* 从容器的右侧开始 */ + } + 100% { + transform: translateX(-100%); /* 滚动到容器的左侧 */ + } + } + + /* 应用动画到元素 */ + .scroll-container { + overflow: hidden; /* 隐藏溢出的元素 */ + white-space: nowrap; /* 保持文本在一行显示 */ + } + + .scroll-text { + display: inline-block; /* 使元素内联显示 */ + padding-left: 100%; /* 初始位置在容器的右侧 */ + animation: scroll-left 10s linear infinite; /* 应用动画 */ + } +``` \ No newline at end of file diff --git "a/\351\231\206\346\273\242\351\222\260/20240926-\346\226\207\346\234\254\346\240\267\345\274\217.md" "b/\351\231\206\346\273\242\351\222\260/20240926-\346\226\207\346\234\254\346\240\267\345\274\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..23d573dcb60a24661518190a176fec84fb625fcd --- /dev/null +++ "b/\351\231\206\346\273\242\351\222\260/20240926-\346\226\207\346\234\254\346\240\267\345\274\217.md" @@ -0,0 +1,114 @@ + + +## 作业 + +### 12效果图 +![20240929194051](http://sjli7ulh3.hn-bkt.clouddn.com/20240929194051.png) + +### 主要代码 +```html + + + + + + Document + + + +

+ 文本样式综合设计 +

+ + +``` + +```css + .highlight{ + color: gold; + background-color: black; + text-indent: 20px; + text-transform: uppercase; +} + +.highlight:hover{ + color: white; + background-color: darkgray; +} +``` + +### 13效果图 +![20240929194121](http://sjli7ulh3.hn-bkt.clouddn.com/20240929194121.png) + +### 主要代码 +```html + + + + + + Document + + + +
+

任花开花落，光阴荏苒，这废园多少年都是这个样子。这里的花草树木随时间流转而枯荣，见证了岁月，却一次次老了故枝，落了旧叶。

+

窗外的阳光，穿透柳絮的飞扬，跌落在玻璃的一角，折叠出色彩的褶皱。我细数着那每一道或深或浅的印迹，于记忆荒芜的城垣里，把往事雕成文字，潮湿了心中阳光的味道

+
+ + +``` + +```css +.article p{ + color: darkgray; + font-size: 16px; + line-height: 1.5; + text-indent: 1em; +} + +.article p:first-letter{ + font-weight: bold; + font-size: 24px; +} +``` + +### 14效果图 +![20240929194154](http://sjli7ulh3.hn-bkt.clouddn.com/20240929194154.png) + +### 主要代码 +```html + + + + + + Document + + + +
+ 好好学习，good good study。天天向上，day day up。 + 好好学习，good good study。天天向上，day day up。 + 好好学习，good good study。天天向上，day day up。 + 好好学习，good good study。天天向上，day day up。 + 好好学习，good good study。天天向上，day day up。 + 好好学习，good good study。天天向上，day day up。 + 好好学习，good good study。天天向上，day day up。 +
+ + +``` + +```css +.poem{ + text-align: center; + color: darkblue; + text-transform:capitalize; + +} + +.poem::first-line{ + color: darkred; +} +``` \ No newline at end of file