From f88c613f15f3ce0282998a44aa93c69a343550a5 Mon Sep 17 00:00:00 2001 From: Zhangyuyan <3136627705@qq.com> Date: Wed, 9 Oct 2024 13:28:30 +0800 Subject: [PATCH 1/2] =?UTF-8?q?20241009-=E6=B8=90=E5=8F=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...0\346\225\210\346\236\234\345\233\276.png" | Bin 0 -> 16521 bytes ...\351\241\271\347\273\203\344\271\240.html" | 100 +++++++++ ...14\346\231\257\345\261\236\346\200\247.md" | 172 +++++++++++++-- ...15\345\244\215\346\270\220\345\217\230.md" | 198 ++++++++++++++++++ 4 files changed, 451 insertions(+), 19 deletions(-) create mode 100644 "\345\274\240\350\257\255\345\253\243/image/\347\272\277\346\200\247\346\270\220\345\217\230\346\225\210\346\236\234\345\233\276.png" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241009/test01-\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241009-\347\272\277\346\200\247\346\270\220\345\217\230+\345\276\204\345\220\221\346\270\220\345\217\230+\351\207\215\345\244\215\346\270\220\345\217\230.md" diff --git "a/\345\274\240\350\257\255\345\253\243/image/\347\272\277\346\200\247\346\270\220\345\217\230\346\225\210\346\236\234\345\233\276.png" "b/\345\274\240\350\257\255\345\253\243/image/\347\272\277\346\200\247\346\270\220\345\217\230\346\225\210\346\236\234\345\233\276.png" new file mode 100644 index 0000000000000000000000000000000000000000..4a26b9fe4705c1034bd60e400fc046746c6759d7 GIT binary patch literal 16521 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 MGB+$d=k)OZ0DO~8NB{r; literal 0 HcmV?d00001 diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241009/test01-\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241009/test01-\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240.html" new file mode 100644 index 00000000..361fcf81 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241009/test01-\347\272\277\346\200\247\346\270\220\345\217\230\344\270\223\351\241\271\347\273\203\344\271\240.html" @@ -0,0 +1,100 @@ + + + + + + + test01 + + + + +
+
+
中华人民共和国
+
+ +
+ + \ 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/20240930-CSS\350\203\214\346\231\257\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/20240930-CSS\350\203\214\346\231\257\345\261\236\346\200\247.md" index 805c318b..0e3a5c1e 100644 --- "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20240930-CSS\350\203\214\346\231\257\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/20240930-CSS\350\203\214\346\231\257\345\261\236\346\200\247.md" @@ -122,7 +122,7 @@ p:hover{ - 多重背景 ### RGBA 表示法 -```javascript +```css background-color: rgba(0, 0, 255, 0.3); border: 30px solid rgba(0, 255, 0, 0.3); @@ -132,7 +132,7 @@ p:hover{ - R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1 ### HSLA 表示法 -```javascript +```css background-color: hsla(240,50%,50%,0.4); ``` - `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。 @@ -222,21 +222,155 @@ p:hover{ ``` -## 渐变：background-image -- 线性渐变：沿着某条直线朝一个方向产生渐变效果。 - -- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。 - -- 重复渐变。 - -### 线性渐变 - -格式： - -```javascript - - background-image: linear-gradient(方向, 起始颜色, 终止颜色); - - background-image: linear-gradient(to right, yellow, green); +# 作业 +1. 背景颜色 +```html + +``` +2. 背景图片 +```html + +``` +3. 背景尺寸 +```html + +``` +4. 背景位置 +```html + ``` -方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°） \ No newline at end of file +5. 背景重复 +```html + +``` +6. 多重背景 +```html + +``` +7. 背景渐变 +```html + +``` +8. 背景裁剪 +```html + + + + + + test08 + + + +

中心部分

+
+

原图

+
原图
+ + +``` +9. 背景缩放 +```html + +``` +10. 背景附加属性 +```html + +``` + +PS：效果图能不能省略啊，好多，好难贴.............. \ 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/20241009-\347\272\277\346\200\247\346\270\220\345\217\230+\345\276\204\345\220\221\346\270\220\345\217\230+\351\207\215\345\244\215\346\270\220\345\217\230.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241009-\347\272\277\346\200\247\346\270\220\345\217\230+\345\276\204\345\220\221\346\270\220\345\217\230+\351\207\215\345\244\215\346\270\220\345\217\230.md" new file mode 100644 index 00000000..54fe97ba --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241009-\347\272\277\346\200\247\346\270\220\345\217\230+\345\276\204\345\220\221\346\270\220\345\217\230+\351\207\215\345\244\215\346\270\220\345\217\230.md" @@ -0,0 +1,198 @@ +## 渐变：background-image +- 线性渐变：沿着某条直线朝一个方向产生渐变效果。 + +- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。 + +- 重复渐变。 + +### 线性渐变 + +方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°） + +格式： + +```javascript + + background-image: linear-gradient(方向, 起始颜色, 终止颜色); + + background-image: linear-gradient(to right, yellow, green); + + /* 不写方向，表示默认的方向是：从上往下 */ + background-image: linear-gradient(yellow, green); + + /* 方向可以指定角度 */ + background-image: linear-gradient(135deg, yellow, green); + + /* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */ + background-image: linear-gradient(to right,yellow 0%,red 40%,green 70%,blue 100%); + + /* 颜色之间，出现突变 */ + background-image: linear-gradient(45deg,/*这里用 to right也行*/yellow 0%,yellow 25%,blue 25%,blue 50%,red 50%,red 75%,green 75%,green 100%); + +``` + +### 径向渐变 + +中心点的位置可以是：at left right center bottom top。如果以`像素`为单位，则中心点参照的是盒子的`左上角` + +格式： + +```javascript + + background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色); + + background-image: radial-gradient(100px at center,yellow ,green);//围绕中心点做渐变，半径是100px，从黄色到绿色做渐变,中心点在中间 + + background-image: radial-gradient(at left top, yellow, green);//中心点在左上角 + + background-image: radial-gradient(100px 50px at center, yellow, green);//如果辐射半径的宽高不同，那就是椭圆 + + background-image: radial-gradient(200px at 100px 100px,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.5));//透明度从0到0.5。如果透明度是从0到0，则样式无变化。如果透明度是从1到1，则盒子是全黑的。 + +``` + +### 重复渐变 repeating-linear-gradient +格式： +``` +background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...); +``` +- direction：渐变的方向，可以是角度（如 45deg）或关键词（如 to bottom） +- color-stop1, color-stop2, ...：颜色停靠点，定义渐变中的颜色和位置(可以是px也可以是百分比，百分比时得设置宽度) + +简单示范：渐变从红色开始，在10px处变成黄色，然后在接下来的10px内保持黄色，从20px开始再次重复这个模式 +``` + background: repeating-linear-gradient(45deg, red, red 10px, yellow 10px, yellow 20px); + height: 200px; /* 确保元素有足够的高度来显示渐变 */ +``` + +**应用场景**： + +- 背景图案：使用重复渐变可以创建复杂的背景图案，如条纹、网格等 +- 装饰性元素：可以用于按钮、卡片、分隔线等装饰性元素的背景 + +## clip-path：裁剪出元素的部分区域做展示 +`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。 +```css +.div1 { + background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat; + background-size: cover; + + /* 裁剪出圆形区域 */ + clip-path: circle(50px at 100px 100px); + transition: clip-path .4s; + } + .div1:hover{ + /* 鼠标悬停时，裁剪出更大的圆形 */ + clip-path: circle(80px at 100px 100px); + } +``` +好处:即使做了任何裁剪，**容器的占位大小是不变的**,方便做一些动画效果 + +`clip-path: polygon()` + +通过 `clip-path: (svg)` 可以导入svg矢量图，实现 iOS图标的圆角 + +# 作业 +![线性渐变效果图](../image/线性渐变效果图.png) +```html + + + + + + + test01 + + + + +
+
+
中华人民共和国
+
+ +
+ + +``` \ No newline at end of file -- Gitee From a967f63f5cd09b318b3d3552e3f296107a92ef4c Mon Sep 17 00:00:00 2001 From: Zhangyuyan <3136627705@qq.com> Date: Sat, 12 Oct 2024 23:30:42 +0800 Subject: [PATCH 2/2] 20241012 --- ...\345\210\227\347\273\203\344\271\240.html" | 19 ++ .../20241012/test02.html" | 20 ++ .../20241012/test03.html" | 20 ++ .../20241012/test04.html" | 22 +++ .../20241012/test05.html" | 26 +++ .../20241012/test06.html" | 23 +++ .../20241012/test07.html" | 28 +++ .../20241012/test08.html" | 30 +++ .../20241012/test09.html" | 30 +++ .../20241012/test10.html" | 26 +++ ...14\351\200\211\346\213\251\345\231\250.md" | 173 ++++++++++++++++++ 11 files changed, 417 insertions(+) create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test01-\351\200\211\346\213\251\345\231\250\345\272\217\345\210\227\347\273\203\344\271\240.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test02.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test03.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test04.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test05.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test06.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test07.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test08.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test09.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test10.html" create mode 100644 "\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" diff --git "a/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test01-\351\200\211\346\213\251\345\231\250\345\272\217\345\210\227\347\273\203\344\271\240.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test01-\351\200\211\346\213\251\345\231\250\345\272\217\345\210\227\347\273\203\344\271\240.html" new file mode 100644 index 00000000..da49fbea --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test01-\351\200\211\346\213\251\345\231\250\345\272\217\345\210\227\347\273\203\344\271\240.html" @@ -0,0 +1,19 @@ + + + + + + test01 + + + +
+ + +
+ + \ 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/20241012/test02.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test02.html" new file mode 100644 index 00000000..4e0b835a --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test02.html" @@ -0,0 +1,20 @@ + + + + + + test02 + + + +
+ + + +
+ + \ 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/20241012/test03.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test03.html" new file mode 100644 index 00000000..c7ca142a --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test03.html" @@ -0,0 +1,20 @@ + + + + + + test03 + + + +
+ + + +
+ + \ 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/20241012/test04.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test04.html" new file mode 100644 index 00000000..e183f0de --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test04.html" @@ -0,0 +1,22 @@ + + + + + + test04 + + + +
+ + + + + +
+ + \ 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/20241012/test05.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test05.html" new file mode 100644 index 00000000..aa88fcff --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test05.html" @@ -0,0 +1,26 @@ + + + + + + test05 + + + +
+ + + + + + + + + +
+ + \ 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/20241012/test06.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test06.html" new file mode 100644 index 00000000..57379416 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test06.html" @@ -0,0 +1,23 @@ + + + + + + test06 + + + +
+ + + + + + +
+ + \ 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/20241012/test07.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test07.html" new file mode 100644 index 00000000..fe99e8ae --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test07.html" @@ -0,0 +1,28 @@ + + + + + + test07 + + + +
+ + + + + + + + + + + +
+ + \ 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/20241012/test08.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test08.html" new file mode 100644 index 00000000..452309cf --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test08.html" @@ -0,0 +1,30 @@ + + + + + + test08 + + + +
+ + + + + + + + + + + + + +
+ + \ 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/20241012/test09.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test09.html" new file mode 100644 index 00000000..b95215b9 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test09.html" @@ -0,0 +1,30 @@ + + + + + + test09 + + + +
+ + + + + + + + + + + + + +
+ + \ 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/20241012/test10.html" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test10.html" new file mode 100644 index 00000000..50092cb2 --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\220\216\344\275\234\344\270\232/20241012/test10.html" @@ -0,0 +1,26 @@ + + + + + + test10 + + + +
+ + + + + + + + + +
+ + \ 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/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 00000000..2b34826e --- /dev/null +++ "b/\345\274\240\350\257\255\345\253\243/\350\257\276\345\240\202\347\254\224\350\256\260/20241012-CSS\346\240\267\345\274\217\350\241\250\345\222\214\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,173 @@ +- CSS 和 HTML 结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表` +- CSS 四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器` +- CSS 几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器` + +## CSS 概述——Cascading Style Sheet 层叠样式表 + +作用：给 HTML 页面标签添加各种样式，定义网页的显示效果。将网页**内容和显示样式进行分离**，提高了显示功能 + +## CSS 语法 +语法格式：（键值对） +``` +选择器 { 属性名: 属性值; 属性名: 属性值; } +选择器 {k: v;k: v;k: v;k: v;} +``` +如果一个属性有多个值的话，那么多个值用**空格**隔开 + +### css 代码的注释 +注意：CSS 只有`/* */`这种注释，没有`//`这种注释。而且注释要写在` +``` + +## CSS 的一些简单常见的属性——括号中的内容表示快捷键 +- color : 字体颜色（c） +- font-size : 字号大小（fos） +- background-color : 背景颜色（bgc） +- font-weight : + - bold; 加粗（fwb） + - normal; 不加粗（fwn） +- font-style : + - italic; 斜体（fsi） + - normal; 不斜体（fsn） +- text-decoration : + - underline; 下划线（tdu） + - none; 无下划线（tdn） + +## CSS 的书写方式 +1. **行内样式**：在某个特定的标签里采用 style **属性**。范围只针对此标签 +2. **内嵌样式**（内联样式）：在页面的 head 标签里里采用` +``` + +```html +
    +
  • 项目
    • +
  • 项目
    • +
  • 项目
    • +
  • 项目
    • +
  • 项目
    • +
  • 项目
    • +
  • 项目
    • +
  • 项目
    • +
  • 项目
    • +
  • 项目
    • +
+``` +用类选择器来选择第一个或者最后一个： +```html +ul li.first{ color:red; } ul li.last{ color:blue; } +``` + +### 3.下一个兄弟选择器`+` +h3后面紧挨着的第一个兄弟 +```html + +``` + +## 伪类（伪类选择器 ： ）——静态、动态 +伪类：同一个标签，不同的状态，有不同的样式。例如，查看前、后。 + +1. `静态`伪类选择器：只能用于`超链接`的样式 +- `:link` 链接：超链接点击之前 +- `:visited` 访问过的：链接被访问过之后 +2. `动态`伪类选择器：针对`所有标签`都适用 +- `:hover` 悬停:鼠标放到标签上的时候 +- `:active` 激活:鼠标点击标签，但是不松手时 +- `:focus` 某个标签获得焦点时的样式（比如某个输入框获得焦点） + +**必须按照固定的顺序写**： +> a:link 、a:visited 、a:hover 、a:active +```html + +``` \ No newline at end of file -- Gitee