From 32385a95a585e746da44c11d43cfaf09e51d75fb Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 21 Oct 2024 17:11:51 +0800 Subject: [PATCH 1/2] 1021 --- ...35\345\257\271\345\256\232\344\275\215.md" | 134 +++++++++++++++++ ...07\350\276\276\345\275\261\351\231\242.md" | 140 ++++++++++++++++++ 2 files changed, 274 insertions(+) create mode 100644 "\351\202\271\346\260\270\346\266\233/giteenote/20241021-css\347\232\204\347\273\235\345\257\271\345\256\232\344\275\215.md" create mode 100644 "\351\202\271\346\260\270\346\266\233/homework/20241021-\347\273\235\345\257\271\345\256\232\344\275\215\347\232\204\344\270\207\350\276\276\345\275\261\351\231\242.md" diff --git "a/\351\202\271\346\260\270\346\266\233/giteenote/20241021-css\347\232\204\347\273\235\345\257\271\345\256\232\344\275\215.md" "b/\351\202\271\346\260\270\346\266\233/giteenote/20241021-css\347\232\204\347\273\235\345\257\271\345\256\232\344\275\215.md" new file mode 100644 index 00000000..ea28cec3 --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/giteenote/20241021-css\347\232\204\347\273\235\345\257\271\345\256\232\344\275\215.md" @@ -0,0 +1,134 @@ +# CSS Position(定位) +## position 属性指定了元素的定位类型。 +
+position 属性的五个值： +
+`static` +`relative` +`fixed` +`absolute` +`sticky` +元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非事先设定position属性。他们也有不同的工作方 +
+式，这取决于定位方法。 +
+ +## static 定位 +HTML 元素的默认值，即没有定位，遵循正常的文档流对象。 +
+静态定位的元素不会受到 top, bottom, left, right影响。 +
+``` +div.static { + position: static; + border: 3px solid #73AD21; +} +``` + + +## fixed 定位 +元素的位置相对于浏览器窗口是固定位置。 +
+即使窗口是滚动的它也不会移动： +
+``` +p.pos_fixed +{ + position:fixed; + top:30px; + right:5px; +} +``` +注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。 +
+Fixed定位使元素的位置与文档流无关，因此不占据空间。 +
+Fixed定位的元素和其他元素重叠。 +
+ +## relative 定位 +相对定位元素的定位是相对其正常位置。 +
+``` +h2.pos_left +{ + position:relative; + left:-20px; +} +h2.pos_right +{ + position:relative; + left:20px; +} +``` +
+移动相对定位元素，但它原本所占的空间不会改变。 + +``` +h2.pos_top +{ + position:relative; + top:-50px; +} +``` +
+相对定位元素经常被用来作为绝对定位元素的容器块。 +
+ +## absolute 定位 +绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于: +
+``` +h2 +{ + position:absolute; + left:100px; + top:150px; +} +``` +
+absolute 定位使元素的位置与文档流无关，因此不占据空间。 +
+absolute 定位的元素和其他元素重叠。 +
+ +## sticky 定位 +sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。 +
+position: sticky; 基于用户的滚动位置来定位。 +
+粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 +
+它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。 +
+元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 +
+这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 +
+注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 +
+``` +div.sticky { + position: -webkit-sticky; /* Safari */ + position: sticky; + top: 0; + background-color: green; + border: 2px solid #4CAF50; +} +``` + +## 重叠的元素 +元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素 +
+z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面） +
+一个元素可以有正数或负数的堆叠顺序： + + +```img +{ + position:absolute; + left:0px; + top:0px; + z-index:-1; +}``` \ No newline at end of file diff --git "a/\351\202\271\346\260\270\346\266\233/homework/20241021-\347\273\235\345\257\271\345\256\232\344\275\215\347\232\204\344\270\207\350\276\276\345\275\261\351\231\242.md" "b/\351\202\271\346\260\270\346\266\233/homework/20241021-\347\273\235\345\257\271\345\256\232\344\275\215\347\232\204\344\270\207\350\276\276\345\275\261\351\231\242.md" new file mode 100644 index 00000000..8ed3efb1 --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/homework/20241021-\347\273\235\345\257\271\345\256\232\344\275\215\347\232\204\344\270\207\350\276\276\345\275\261\351\231\242.md" @@ -0,0 +1,140 @@ +``` + + + + + + + Document + + + + + + +
+
+ +
+
+
+ + 1111111111111 + +
+
+ + 【海雅缤纷城】万达影城(深圳海雅广场...) + +
+ 单人电影票，可观看2D +
+ + ￥35 + + + 已售 + 225 + +
+
+ +
+ + + + +``` \ No newline at end of file -- Gitee From d442fdc3ad3f8f393de97ed7fe98bdff3f3b070e Mon Sep 17 00:00:00 2001 From: ppppp Date: Thu, 24 Oct 2024 18:39:56 +0800 Subject: [PATCH 2/2] 1024 --- ...51\345\231\250\345\261\236\346\200\247.md" | 144 +++++++++++++++ .../20241024-css\345\212\250\347\224\273.md" | 170 ++++++++++++++++++ ...74\351\261\274\345\212\250\347\224\273.md" | 158 ++++++++++++++++ 3 files changed, 472 insertions(+) create mode 100644 "\351\202\271\346\260\270\346\266\233/giteenote/20241023-css\351\200\211\346\213\251\345\231\250\345\261\236\346\200\247.md" create mode 100644 "\351\202\271\346\260\270\346\266\233/giteenote/20241024-css\345\212\250\347\224\273.md" create mode 100644 "\351\202\271\346\260\270\346\266\233/homework/\351\262\250\351\261\274\344\270\216\347\201\257\347\254\274\351\261\274\345\212\250\347\224\273.md" diff --git "a/\351\202\271\346\260\270\346\266\233/giteenote/20241023-css\351\200\211\346\213\251\345\231\250\345\261\236\346\200\247.md" "b/\351\202\271\346\260\270\346\266\233/giteenote/20241023-css\351\200\211\346\213\251\345\231\250\345\261\236\346\200\247.md" new file mode 100644 index 00000000..f69de1d9 --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/giteenote/20241023-css\351\200\211\346\213\251\345\231\250\345\261\236\346\200\247.md" @@ -0,0 +1,144 @@ + + +```markdown +# CSS选择器属性笔记 + +CSS选择器用于定位HTML文档中的元素，并应用样式。以下是一些常用的CSS选择器及其属性： + +## 基本选择器 + +### 元素选择器 +选择所有指定的HTML元素。 +```css +p { + color: blue; +} +``` +上述代码会选择所有的`

`标签，并将其文字颜色设置为蓝色。 + +### 类选择器 +选择具有指定类属性的所有元素。 +```css +.className { + background-color: yellow; +} +``` +上述代码会选择所有类名为`className`的元素，并设置其背景颜色为黄色。 + +### ID选择器 +选择具有指定ID属性的元素。 +```css +#uniqueId { + font-weight: bold; +} +``` +上述代码会选择ID为`uniqueId`的元素，并将其文字设置为粗体。 + +## 属性选择器 + +### 存在属性选择器 +选择具有指定属性的任何元素。 +```css +[attribute] { + border: 1px solid black; +} +``` +上述代码会选择所有具有`attribute`属性的元素，并为其添加黑色边框。 + +### 属性值选择器 +选择具有指定属性和值的元素。 +```css +[attribute="value"] { + color: green; +} +``` +上述代码会选择所有`attribute`属性值为`value`的元素，并将其文字颜色设置为绿色。 + +### 属性值开始选择器 +选择属性值以指定值开始的元素。 +```css +[attribute^="value"] { + font-style: italic; +} +``` +上述代码会选择所有`attribute`属性值以`value`开头的元素，并将其文字设置为斜体。 + +### 属性值结束选择器 +选择属性值以指定值结束的元素。 +```css +[attribute$="value"] { + text-decoration: underline; +} +``` +上述代码会选择所有`attribute`属性值以`value`结尾的元素，并为其添加下划线。 + +### 属性值包含选择器 +选择属性值包含指定值的元素。 +```css +[attribute*="value"] { + background-color: lightgray; +} +``` +上述代码会选择所有`attribute`属性值包含`value`的元素，并设置其背景颜色为浅灰色。 + +## 伪类选择器 + +### 链接伪类 +选择所有未被访问的链接。 +```css +a:link { + color: red; +} +``` +上述代码会选择所有未被访问的链接，并将其文字颜色设置为红色。 + +### 访问伪类 +选择所有已被访问的链接。 +```css +a:visited { + color: purple; +} +``` +上述代码会选择所有已被访问的链接，并将其文字颜色设置为紫色。 + +### 鼠标悬停伪类 +选择鼠标悬停在其上的元素。 +```css +a:hover { + background-color: lightblue; +} +``` +上述代码会选择鼠标悬停在其上的链接，并为其设置浅蓝色背景。 + +### 活动伪类 +选择当前被激活的元素。 +```css +a:active { + color: white; +} +``` +上述代码会选择当前被点击的链接，并将其文字颜色设置为白色。 + +## 伪元素选择器 + +### 第一行伪元素 +选择元素的第一行。 +```css +p::first-line { + font-variant: small-caps; +} +``` +上述代码会选择所有`

`标签的第一行，并将其设置为小型大写字母。 + +### 第一个字母伪元素 +选择元素的第一个字母。 +```css +p::first-letter { + font-size: 200%; +} +``` +上述代码会选择所有`

`标签的第一个字母，并将其字体大小设置为200%。 + +以上是CSS选择器属性的一些基本介绍和示例。CSS选择器的强大之处在于它们可以组合使用，以精确地定位和样式化页面上的元素。 +``` + diff --git "a/\351\202\271\346\260\270\346\266\233/giteenote/20241024-css\345\212\250\347\224\273.md" "b/\351\202\271\346\260\270\346\266\233/giteenote/20241024-css\345\212\250\347\224\273.md" new file mode 100644 index 00000000..4095312b --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/giteenote/20241024-css\345\212\250\347\224\273.md" @@ -0,0 +1,170 @@ + +```markdown +# CSS动画笔记 + +CSS动画允许你在CSS中创建动画效果，而无需使用JavaScript或Flash。以下是一些关键概念和示例。 + +## 动画属性 + +### `animation-name` +定义动画的关键帧名称。 +```css +@keyframes slidein { + from { + transform: translateX(0); + } + to { + transform: translateX(100%); + } +} + +.element { + animation-name: slidein; +} +``` + +### `animation-duration` +定义动画完成一个周期所需的时间。 +```css +.element { + animation-duration: 3s; +} +``` + +### `animation-timing-function` +定义动画的速度曲线。 +```css +.element { + animation-timing-function: ease-in-out; +} +``` + +### `animation-delay` +定义动画开始之前的延迟时间。 +```css +.element { + animation-delay: 1s; +} +``` + +### `animation-iteration-count` +定义动画播放的次数。 +```css +.element { + animation-iteration-count: infinite; +} +``` + +### `animation-direction` +定义动画播放的方向。 +```css +.element { + animation-direction: alternate; +} +``` + +### `animation-fill-mode` +定义动画在开始之前和结束之后如何应用样式。 +```css +.element { + animation-fill-mode: forwards; +} +``` + +### `animation-play-state` +定义动画的播放或暂停状态。 +```css +.element { + animation-play-state: paused; +} +``` + +## 关键帧 + +关键帧允许你控制动画的开始、结束以及中间过程。 +```css +@keyframes example { + 0% { + background-color: red; + } + 50% { + background-color: yellow; + } + 100% { + background-color: green; + } +} +``` + +## 示例：渐变动画 + +以下是一个简单的渐变动画示例，它会在5秒内完成一个周期，无限次重复。 +```css +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + 50% { + background-position: 100% 50%; + } + 100% { + background-position: 0% 50%; + } +} + +.element { + animation-name: gradient; + animation-duration: 5s; + animation-iteration-count: infinite; + background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%); + background-size: 200% 200%; +} +``` + +## 示例：滑动动画 + +以下是一个滑动动画示例，它会在3秒内将元素从屏幕左侧滑动到右侧。 +```css +@keyframes slide { + from { + transform: translateX(-100%); + } + to { + transform: translateX(0); + } +} + +.element { + animation-name: slide; + animation-duration: 3s; + animation-fill-mode: forwards; /* 保持动画结束时的状态 */ +} +``` + +## 示例：弹跳动画 + +以下是一个弹跳动画示例，它会在2秒内完成一个周期，并且只播放一次。 +```css +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-30px); + } + 60% { + transform: translateY(-15px); + } +} + +.element { + animation-name: bounce; + animation-duration: 2s; + animation-iteration-count: 1; +} +``` + +CSS动画是一个非常强大的工具，可以创建平滑、吸引人的视觉效果，增强用户的交互体验。 +``` + + diff --git "a/\351\202\271\346\260\270\346\266\233/homework/\351\262\250\351\261\274\344\270\216\347\201\257\347\254\274\351\261\274\345\212\250\347\224\273.md" "b/\351\202\271\346\260\270\346\266\233/homework/\351\262\250\351\261\274\344\270\216\347\201\257\347\254\274\351\261\274\345\212\250\347\224\273.md" new file mode 100644 index 00000000..3bba01d7 --- /dev/null +++ "b/\351\202\271\346\260\270\346\266\233/homework/\351\262\250\351\261\274\344\270\216\347\201\257\347\254\274\351\261\274\345\212\250\347\224\273.md" @@ -0,0 +1,158 @@ +![20241024183810](http://www.lamianeatpp.top/zhao/20241024183810.png) +``` + + + + + + + Document + + + + +

+ +
+
+
+ +
+
+ + + +``` \ No newline at end of file -- Gitee