diff --git "a/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\270\220\345\217\230.html" "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\270\220\345\217\230.html" new file mode 100644 index 0000000000000000000000000000000000000000..d23c594c51d2c6738c409ceb8a920fc7ba2f5563 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\346\270\220\345\217\230.html" @@ -0,0 +1,51 @@ + + + + + Document + + + +
+
+

中华人民共和国

+
+ + \ No newline at end of file diff --git "a/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\351\200\211\346\213\251\345\231\250.html" "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\351\200\211\346\213\251\345\231\250.html" new file mode 100644 index 0000000000000000000000000000000000000000..4efa2fd8b01159c78154f6720261ee5008577736 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\344\275\234\344\270\232/\351\200\211\346\213\251\345\231\250.html" @@ -0,0 +1,76 @@ + + + + + + Document + + + + +
+ 嘿嘿嘿 + 哈哈哈 +
+ +
+ 嘿嘿嘿 + 嘿嘿嘿 + 嘿嘿嘿 +
+
+ 哈哈哈 + 嘿嘿嘿 + 嘿嘿嘿 +
+
+ 哈哈哈 + + 吼吼吼 + + 哈哈哈 +
+
+ + 好好好 + + + 嘤嘤嘤 + + + 呜呜呜 + +
+ + \ No newline at end of file diff --git "a/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.09-css\345\261\236\346\200\2473.md" "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.09-css\345\261\236\346\200\2473.md" new file mode 100644 index 0000000000000000000000000000000000000000..b00e8519d0c7c0dc6404fb77b1b3ecda42de8467 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.09-css\345\261\236\346\200\2473.md" @@ -0,0 +1,41 @@ +#### -size：cover和background-size：contain区别 ++ background-size: cover适用于希望背景图片完全覆盖容器的情况，但可能会剪裁掉图片的部分内容。 ++ background-size: contain适用于希望确保背景图片完整显示的情况，即使这会在容器中留下空白区域。 +### 渐变background-image +在CSS中，实现渐变背景通常使用的是linear-gradient（线性渐变）或radial-gradient（径向渐变）函数。这些函数允许你定义颜色之间的过渡，从而创建平滑的渐变效果作为背景。 +#### 线性渐变（Linear Gradient） +线性渐变允许你沿着一条直线定义颜色之间的过渡 +``` +.element { + background-image: linear-gradient(direction, color-stop1, color-stop2, ...); +} +``` ++ direction：渐变的方向，可以是角度（如45deg）或关键字（如to bottom、to right等）。 ++ color-stop：颜色停止点，定义渐变中的颜色及其位置。位置可以是百分比（如50%）或具体值（如10px），如果不指定位置，则颜色会均匀分布。 +#### 径向渐变（Radial Gradient） +径向渐变允许你定义一个中心点，并从该点向外创建颜色之间的过渡。 +``` +.element { + background-image: radial-gradient(shape size at position, start-color, ..., last-color); +} +``` ++ shape：渐变的形状，可以是circle（圆形）或ellipse（椭圆形）。 ++ size：渐变的大小，可以是具体值（如100px）、百分比（如50%）或关键字（如closest-side、farthest-side等）。 ++ position：渐变中心的位置，可以是百分比、具体值或关键字（如center）。 ++ start-color, ..., last-color：定义渐变中的颜色及其位置。 +``` +使用线性渐变和径向渐变创建背景的具体示例 +/* 线性渐变背景 */ +.linear-gradient-bg { + background-image: linear-gradient(to right, #ff7e5f, #feb47b); +} + +/* 径向渐变背景 */ +.radial-gradient-bg { + background-image: radial-gradient(circle at center, #ff7e5f, #feb47b); +} +``` +1.渐变背景可以与其他背景属性一起使用，如background-size、background-position和background-repeat。然而，对于渐变背景来说，background-size和background-repeat通常不起作用，因为渐变本身没有固定的尺寸和重复模式。 +2.渐变背景的颜色停止点可以是任意颜色，包括RGBA颜色（允许定义透明度）。 +3.你可以通过调整渐变的方向、形状、大小和颜色停止点来创建各种复杂的渐变效果。 +### 线性渐变专项练习 \ No newline at end of file diff --git "a/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.12-css\346\240\267\345\274\217\350\241\250and\351\200\211\346\213\251\345\231\250.md" "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.12-css\346\240\267\345\274\217\350\241\250and\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..813a4811d2a19e40e1687c581b4a75421634d856 --- /dev/null +++ "b/\345\274\240\345\251\211\345\251\267/\347\254\224\350\256\260/2024.10.12-css\346\240\267\345\274\217\350\241\250and\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,40 @@ +### CSS样式表 +1.内部样式表：直接写在HTML文件的 +``` +2.外部样式表：单独的文件，通过HTML的标签引用 +``` + +styles.css 文件内容： +/* 样式规则 */ +body { background-color: #f0f0f0; } +h1 { color: #333; } +``` +### CSS选择器 +1.基本选择器： ++ 元素选择器：选择特定类型的HTML元素。 +``` +p { color: blue; } /* 选择所有

元素 */ +``` ++ 类选择器：选择具有特定类名的元素。 +``` +.className { color: green; } /* 选择所有class="className"的元素 */ +``` ++ ID选择器：选择具有特定ID的元素 +``` +#uniqueID { color: red; } /* 选择ID="uniqueID"的元素 */ +``` ++ 组合选择器 ++ 后代选择器：选择某个元素内的所有指定后代。 +``` +div p { color: purple; } /* 选择

内的所有

元素 */ +``` ++ 子选择器：选择直接子元素 +``` +ul > li { list-style-type: none; } /* 选择