diff --git "a/\350\200\201\350\203\241/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md" "b/\350\200\201\350\203\241/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md" deleted file mode 100644 index 90824d654dfb77c07abc5067b73cdf1b7c1e99b3..0000000000000000000000000000000000000000 --- "a/\350\200\201\350\203\241/20240904-git\346\265\201\347\250\213\346\216\214\346\217\241.md" +++ /dev/null @@ -1,105 +0,0 @@ -# 今天天气很好，40多度，老胡很帅呆 - -## 今天讲了git的流程，特画图如下，快夸我 - -![你看你那什么破图！^=^|||](./imgs/img011.jpg) - - 我是没有感情的文字 - -我是百度 - -[我也是百度](http://baidu.com) - -

一级标题

-

二级标题

- -# 一级标题 - -## 二级标题 - -斜体 - -*斜体* - -**粗体** - -***粗斜体*** - -> 我是一段引用 - - -比如我这里需要使用一个`dom`标签，这个`dom`标签是指`font` - -如下代码可以说明若干问题： - -```js -console.log('我是女生，爱哭的女生') - -``` - -有序列表 - -1. 列表 - 1. 还是列表 - A. 总是列表 - 2. 还是列表 - 3. 还是列表 - 4. 还是列表 -2. 列表 -3. 列表 - - -18) 第一项 -2) 第二项 -3) 第三项 - -i. 第一项 -ii. 第二项 -iii. 第三项 - -a. 第一项 -b. 第二项 -c. 第三项 - -无序列表 - -我是新增行 - -+ 无序列表 - + 我还是 - + 总是 - + 天天向上 - + 总是 - + 总是 - + 总是 - + 我还是 - + 我还是 - + 我还是 - + 我还是 -+ 无序列表 - - gd gd - - 悠悠岁月 - - 悠悠岁月 - - 悠悠岁月 - - 悠悠岁月 - - gd gd - - gd gd - - gd gd - - gd gd -+ 无序列表 -+ 无序列表 - * 星星眨眼 - * 这个天 - * 这个天 - * 这个天 - * 星星眨眼 - * 星星眨眼 - * 星星眨眼 -+ 无序列表 - - -| 左对齐 | 居中 | 右对齐 | -| :- | :-: | -: | -| 单元格1 | 单元格2 | 单元格3 | -| 单元格4 | 单元格5 | 单元格6 | - diff --git "a/\350\200\201\350\203\241/imgs/img01.jpg" "b/\350\200\201\350\203\241/imgs/img01.jpg" deleted file mode 100644 index 9a379cf5f0681088cca4da476e10125b29ad16e5..0000000000000000000000000000000000000000 Binary files "a/\350\200\201\350\203\241/imgs/img01.jpg" and /dev/null differ diff --git "a/\350\222\213\347\276\244/\344\275\234\344\270\232/0913\344\275\234\344\270\232/th.jpg" "b/\350\222\213\347\276\244/\344\275\234\344\270\232/0913\344\275\234\344\270\232/th.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..bb53e161f2c57e761ef25cce9622b923973cdf7a Binary files /dev/null and "b/\350\222\213\347\276\244/\344\275\234\344\270\232/0913\344\275\234\344\270\232/th.jpg" differ diff --git "a/\350\222\213\347\276\244/\344\275\234\344\270\232/0913\344\275\234\344\270\232/works.html" "b/\350\222\213\347\276\244/\344\275\234\344\270\232/0913\344\275\234\344\270\232/works.html" new file mode 100644 index 0000000000000000000000000000000000000000..f49e5adf3b8b049e6aef9b77eae7257cb730d9be --- /dev/null +++ "b/\350\222\213\347\276\244/\344\275\234\344\270\232/0913\344\275\234\344\270\232/works.html" @@ -0,0 +1,27 @@ + + + + + + Document + + + +
+ + + + + + \ No newline at end of file diff --git "a/\350\222\213\347\276\244/\344\275\234\344\270\232/0914\344\275\234\344\270\232/work.html" "b/\350\222\213\347\276\244/\344\275\234\344\270\232/0914\344\275\234\344\270\232/work.html" new file mode 100644 index 0000000000000000000000000000000000000000..dd57c24c0f06f444011660b093d5efbb955d774b --- /dev/null +++ "b/\350\222\213\347\276\244/\344\275\234\344\270\232/0914\344\275\234\344\270\232/work.html" @@ -0,0 +1,97 @@ + + + + + + Document + + + + + +
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git "a/\350\222\213\347\276\244/\344\275\234\344\270\232/text.md" "b/\350\222\213\347\276\244/\344\275\234\344\270\232/text.md" new file mode 100644 index 0000000000000000000000000000000000000000..00339972ec2f28f485d33f1c544666fbd806c093 --- /dev/null +++ "b/\350\222\213\347\276\244/\344\275\234\344\270\232/text.md" @@ -0,0 +1,14 @@ +# 24/09/09作业 +# 全国主流浏览器对应的渲染引擎和JS引擎如下表所示‌： + + +| 浏览器名称 | 渲染引擎 | JS引擎 | +|:------:|:-------:|------:| +| Chrome | Blink | V8 | +| Firefox | Gecko | SpiderMonkey | +| Safari | Webkit | JavaScriptCore | +| Edge (Chromium-based) | Blink | V8 | +| Opera (Chromium-based) | Blink | V8 | + + + diff --git "a/\350\222\213\347\276\244/\344\275\234\344\270\232/work.html" "b/\350\222\213\347\276\244/\344\275\234\344\270\232/work.html" new file mode 100644 index 0000000000000000000000000000000000000000..0bd0deaabc913e0074219f83a51f13ab892f05f8 --- /dev/null +++ "b/\350\222\213\347\276\244/\344\275\234\344\270\232/work.html" @@ -0,0 +1,27 @@ + + + + + + Document + + + + +

不想早八

+
+

不想早十

+ + + + + +
+

早点睡觉

+

早点起床

+
+ + + + + \ No newline at end of file diff --git "a/\350\222\213\347\276\244/\344\275\234\344\270\232/\345\233\276\345\272\212\350\256\276\347\275\256.html" "b/\350\222\213\347\276\244/\344\275\234\344\270\232/\345\233\276\345\272\212\350\256\276\347\275\256.html" new file mode 100644 index 0000000000000000000000000000000000000000..030f2a41ef9b5f0f03dc11b6c31fa672eeadbc1e --- /dev/null +++ "b/\350\222\213\347\276\244/\344\275\234\344\270\232/\345\233\276\345\272\212\350\256\276\347\275\256.html" @@ -0,0 +1,13 @@ + + + + + + Document + + + +

我的图床图片展示

+ ![20240915003622](sjt78aar6.hn-bkt.clouddn.com/20240915003622.png) + + \ No newline at end of file diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20230913-\345\255\227\344\275\223and\350\266\205\351\223\276\346\216\245and\345\233\276\345\272\212.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20230913-\345\255\227\344\275\223and\350\266\205\351\223\276\346\216\245and\345\233\276\345\272\212.md" new file mode 100644 index 0000000000000000000000000000000000000000..a067daba6f461978eb0cd67fa1202693148c66ec --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20230913-\345\255\227\344\275\223and\350\266\205\351\223\276\346\216\245and\345\233\276\345\272\212.md" @@ -0,0 +1,51 @@ +# 24/09/13笔记 +## HTML字体标签和超链接 +### 字体标签： +#### 特殊字符（转义字符） +1.   ; :空格 +2. < ; :小于号 +3. & gt ;:大于号 +4. & ；符号& +5. " ;:双引号 +6. &apos ; :单引号 +### 下划线，中划线 ，斜体 +<u>:下划线 +<del>:中划线（删除线） +<i>：斜体 +### 上标 <sup> 下标：<sub> +上标：02 下标：53 + +### 超链接 + +1. 外部连接：链接到外部文件 +列如：< a href="02页面。html">点击进入另一个文件s + +2. 锚链接：给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。 +列如：顶部 +< pre> +< /pre> +< a href="#name1">回到顶部 +#### 超链接的属性 +1. href：目标URL +1. title：悬停文本。注意***************************列如：< a href="02页面。html" title="你真好看">文字 +1. name：主要用于设置一个锚点的名称。 +1. target：告诉浏览器用什么方式来打开目标页面。 + +## img图片标签 +#### 能插入的图片类型 +能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等 +### img标签的src属性 +图片的路径时，有两种写法：相对路径、绝对路径 +img标签的其他属性： +1. width：图像的宽度。 +1. height：图像的高度。 + + +************title：提示性文本。鼠标悬停时出现的文本。 +列如： +align 属性 +图片的align属性：图片和周围文字的相对位置。 + + +![20240915002416](sjt78aar6.hn-bkt.clouddn.com/20240915002416.png) +![20240915002529](sjt78aar6.hn-bkt.clouddn.com/20240915002529.png) \ No newline at end of file diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20240904-md\346\225\231\347\250\213.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240904-md\346\225\231\347\250\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..7b08917f0ce589e54f08cc578ac3f852cfbd8fa9 --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240904-md\346\225\231\347\250\213.md" @@ -0,0 +1,38 @@ +# 2024.9.04第一节课笔记 +## 如下： +# 我是一级标题 +## 我是二级标题 +[文字](相应的地址) +eg:[我是百度的地址](http://baidu.com) ——跳转相应的地址 + +*我是斜体* + +**我是粗体** + +***我是粗斜体*** +>我是说明 可以说明相应的内容 + +有序列表： +第一种： +1. 列表 + 1. 我还是列表 +1. 列表 + 1. 我还是列表 + + +无序列表： ++ 无序列表 + + 我还是无序列表 ++ 无序列表 + - 我还是无序列表 + + +（+ ，— 都可以用） +表格： + +| 左对齐 | 居中对齐 | 右对齐 | +|:------:|:-------:|------:| +| 文本1 | 文本2 | 文本3 | +| 文本4 | 文本5 | 文本6 | + + diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20240909-html\344\273\213\347\273\215.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240909-html\344\273\213\347\273\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..85cf4b774b2a2db9b1482be64a5f4722724e5797 --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240909-html\344\273\213\347\273\215.md" @@ -0,0 +1,29 @@ +# 2024/09/09笔记 +# HTML +## HTML的专有名词 +1. 网页：由各种标记组成的一个页面就叫网页 +2. 主页（首页）：一个网站的起始或者导航页面 +3. 标记：

称为开始标记，

称为结束标记，也叫标签。每个标签都有特定的涵义。 +4. 元素：

内容

称为元素，也叫dom元素，也叫节点 +5. 属性：每个标签所做的辅助信息 +6. XHTML:符合XML语法标准的HTML +7. DHTML：dynamic，动态的。javascript + css + html合起来的页面就是一个 DHTML。 +8. HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。 + +## 书写第一个HTML页面 +打开VS Code软件，后缀名为.html +1.按英文的！ 再按回车 2.输入html:5 就可以自动生成以下内容 + + + + + + Document + + + +1. html:HTML标签 页面中最大的标签，我们成为根标签.
+2. head :文档的头部 注意在head标签中我们必须要设置的标签是title.
+3. title: 文档的标题 让页面拥有一个属于自己的网页标题.
+4. body文档的主体 元素包含文档的所有内容，页面内容 基本都是放到body里面的. + diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20240911-\346\265\217\350\247\210\345\231\250.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240911-\346\265\217\350\247\210\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..e30694572401e3f580284465551fe66a1bcdbd8d --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240911-\346\265\217\350\247\210\345\231\250.md" @@ -0,0 +1,32 @@ +# 2024/9/11笔记 +## 主流浏览器 +1. User Interface（UI界面）2.2、Browser engine （浏览器引擎 3、Rendering engine（渲染引擎）4、Networking （网络模块）5、JavaScript Interpreter（JavaScript解析器） + +### 出识HEML 1.HTML的规范 +1. 所有标记元素都要正确的嵌套，不能交叉嵌套
+2. 所有标记必须小写
+3. 所有标签必须闭合 +双标签：span /span +单标签：br ,hr +4. 所有属性必须加引号
+5. 所有属性必须有值 +6. XHTML文档开头必须要有DTD文档类型定义 + +### 2.HTML的基本语法特征 +1.HTML对换行不敏感，对tab不敏感
+2.空白折叠现象
+3.标签要严格封闭 + +## HTML标签排版 +### 排版标签： + +1. 标题标签

一级标签

二级标签

+2. 段落标签:p +3. 水平线标签:hr +4. 换行标签:br +5.
和标签 +div标签：可以把标签中的内容分割为独立的区块。必须单独占据一行。
+sapn标签：和div的作用一样，但不换行。 +6. 内容居中标签
:只要是在这个标签里面的内容，都会居中于浏览器的中间 +7. 预定义（预格式化）标签：pre +含义：将保留标签内部所有的空白符（空格，换行符）原封不动的输出结果。（告诉浏览器不要忽略空格和空行 \ No newline at end of file diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20240914-\345\210\227\350\241\250and\350\241\250\346\240\274\346\240\207\347\255\276.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240914-\345\210\227\350\241\250and\350\241\250\346\240\274\346\240\207\347\255\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..b66c9187198f912e0ee83ab1bf75aef5b4615c62 --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240914-\345\210\227\350\241\250and\350\241\250\346\240\274\346\240\207\347\255\276.md" @@ -0,0 +1,39 @@ +# 2024/09/14笔记 +### 列表标签 +1. 无序列表：ul +无序列表中还能添加无序列表 +2. 有序列表：ol + +#### 标签去掉序号：list-style-type:none +#### padding用法： +Padding属性可以有1到4个值，分别对应上、右、下、左四个方向的内边距。 +#### padding和margin的区别 +padding：定义元素边框与元素内容之间的空间 +margin：定义元素和其他元素之间的外部空间 +### 定义列表：dl +< dl> +< dt> +< dd> +### 表格标签 +< table> + < tr> + < th> + < th> + < th> + < th> + + < tr> + < th> + < th> + < th> + < th> + + < /table> + +#### border：1px soild black; +边框 +soild:实线 dash:虚线 +border-collapse: collapse;：确保表格的边框没有空隙 +text-algin:center 文本居中 + + diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20240918-\350\241\250\345\215\225.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240918-\350\241\250\345\215\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..d984fb05566ec500c83f787a14f25c8627965595 --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240918-\350\241\250\345\215\225.md" @@ -0,0 +1,111 @@ +# 20240918笔记 +### 表单:form + ``` + + + +
+1. input :文本框 +2. placeholser:提示内容 +3. radio :单选框 +4. checkbox :复选框 （都要写name） +5. select：下拉框 +6. textarea:多文本 +7. file ：文件 +8. date :日期 +9. color：颜色 +10. email：邮箱 +11. hidden：隐藏 +12. month：月份 +13. number：数值增加减 +14. range：拉度线条 +15. reset：重置 +16. submit：提交 +17.button：按钮 +border: 3px dashed gray; dashed:虚线 + +### 作业 +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
星期一星期二星期三星期四星期五星期六星期天
语文数学英语专业思政专业思政
数学专业体育英语思政体育思政
+
+
+ + + + +
+ ``` + \ No newline at end of file diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20240920-\347\231\273\345\205\245\351\241\265\351\235\242andCSS\350\267\221\351\251\254\347\201\257and\347\231\276\345\272\246.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240920-\347\231\273\345\205\245\351\241\265\351\235\242andCSS\350\267\221\351\251\254\347\201\257and\347\231\276\345\272\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..09685b7e125059dd729028b42056da63048f9193 --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240920-\347\231\273\345\205\245\351\241\265\351\235\242andCSS\350\267\221\351\251\254\347\201\257and\347\231\276\345\272\246.md" @@ -0,0 +1,270 @@ +# H5中新增语义标签 +section:表示区块 + +article：表示文章 + +header：表示页眉 + +footer：表示页脚 + +nav： 表示导航 + +aside：表示侧边栏 + +figure：表示媒介内容分组 + +mark：表示标记 (用得少) + +progress：表示进度 (用得少) + +time：表示日期 +### H5中的表单 +email 只能输入email格式。自动带有验证功能。 + +tel 手机号码。 + +url 只能输入url格式。 + +number 只能输入数字。 + +search 搜索框 + +range 滑动条 + +color 拾色器 + +time 时间 + +date 日期 + +datetime 时间日期 + +month 月份 + +week 星期 +### 表单元素（标签） +1. datalist 数据列表： +``` + + + + +``` +2. meter元素：度量器 + +low：低于该值后警告 + +high：高于该值后警告 + +value：当前值 + +max：最大值 + +min：最小值 +### 表单属性 +1. placeholder：占位符（提示文字） +autofocus :自动获取焦点 +multiple 文件上传多选或多个邮箱地址 + +autocomplete 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off) + +form 指定表单项属于哪个form，处理复杂表单时会需要 + +novalidate 关闭默认的验证功能（只能加给form） + +required 表示必填项 + +pattern 自定义正则，验证表单 + +## 多媒体 + +### 音频 +audio标签 +HTML5通过audio标签来解决音频播放的问题。 +autoplay 自动播放。写成autoplay 或者 autoplay = ""，都可以。 + +controls 控制条。（建议把这个选项写上，不然都看不到控件在哪里） + +loop 循环播放。 + +preload 预加载 同时设置 autoplay 时，此属性将失效 + +例如：``` + + + +### 视频 +video标签 +autoplay 自动播放。写成autoplay 或者 autoplay = ""，都可以。 + +controls 控制条。（建议把这个选项写上，不然都看不到控件在哪里） + +loop 循环播放。 + +preload 预加载 同时设置 autoplay 时，此属性将失效。 + +width：设置播放窗口宽度。 + +height：设置播放窗口的高度。 +### 登入页面效果图展示 +![20240922145746](sjt78aar6.hn-bkt.clouddn.com/20240922145746.png) +### 核心代码： +```HTML + + + +
+
+
Login
+
+ + +
+ +
+
Don't have account? + Sign up +
+
+ + +``` +### css跑马灯效果图 +![GIF 2024-9-22 15-08-56](sjt78aar6.hn-bkt.clouddn.com/GIF 2024-9-22 15-08-56.gif) +### 核心代码： +```html + + + +
+
css跑马灯css跑马灯css跑马灯css跑马灯css跑马灯css跑马灯css跑马灯css跑马灯
+
+ + + +``` + + + + +### 百度新闻效果图 + +![20240922151614](sjt78aar6.hn-bkt.clouddn.com/20240922151614.png) +代码： +```html + + + +
+

百度新闻热榜

+ +
+ + + + diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20240923-\346\213\226\346\213\275andcss\345\237\272\347\241\200.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240923-\346\213\226\346\213\275andcss\345\237\272\347\241\200.md" new file mode 100644 index 0000000000000000000000000000000000000000..ea219e321ac59c93a473e0e86e48be445134ff46 --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240923-\346\213\226\346\213\275andcss\345\237\272\347\241\200.md" @@ -0,0 +1,106 @@ +## 1.拖拽元素 +draggable="ture" 属性的元素 +## 拖拽元素的事件监听（应用于拖拽元素） +`ondragstart`:当拖拽开始时调用 +`ondragleave`:当鼠标离开拖拽元素时调用 +`ondragend`:当拖拽结束时调用 +`ondrag`:整个拖拽过程都会使用 + +相关代码展示： +`html + +### 2、目标元素 +**目标元素的事件监听**：（应用于目标元素） + +- `ondragenter` 当拖拽元素进入时调用 + +- `ondragover` 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态） + +- `ondrop` 当在目标元素上松开鼠标时调用 + +- `ondragleave` 当鼠标离开目标元素时调用 + +### 获取地理信息的方式 +1. IP地址 +2.三维坐标 +3.用户自定义 + +### 全屏 +方法如下：（注意 screen 是小写） + +```javascript + requestFullscreen() //让元素开启全屏显示 + + cancleFullscreen() //让元素关闭全屏显示 + ``` + + + +### css基础 +1. css属性：字体属性和文本属性 +## 文本重要内容 + - CSS的单位 + - 字体属性 + - 文本属性 + - 定位属性：position、float、overflow等 + ## css的单位 + ### 1.绝对单位 + 各种单位的含义： + +- `in`：英寸Inches (1 英寸 = 2.54 厘米) +- `cm`：厘米Centimeters +- `mm`：毫米Millimeters +- `pt`：点Points，或者叫英镑 (1点 = 1/72英寸) +- `pc`：皮卡Picas (1 皮卡 = 12 点) +### 2.相对单位 +`px`：像素 +`em`：印刷单位相当于12个点 +`%`：百分比，相对周围的文字的大小 +### font字体属性 +```css +p{ + font-size: 50px; /*字体大小*/ + line-height: 30px; /*行高*/ + font-family: 幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/ + font-style: italic ; /*italic表示斜体，normal表示不倾斜*/ + font-weight: bold; /*粗体*/ + font-variant: small-caps; /*小写变大写*/ +} +``` +### 行高 +css中都有行高，盒子模型的padding，是作用在行上面的 +** 行高，字号，一般都是偶数 +### 如何让单行文本垂直居中 +设置**行高=盒子高**（只适于单行文本居中） +### `vertical-align: middle;` 属性 +可用于指定**行内元素（inline）,行内块元素（inline-block）,**表格的单元格**（table-cell）的垂直对齐方式。 +代码举例： +```css +vertical-align: middle; /*指定行级元素的垂直对齐方式。*/ +``` + diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20240925-css\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240925-css\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..751025a6641195099cd66faf317c7b3c13164f0d --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240925-css\345\255\227\344\275\223\345\261\236\346\200\247\345\222\214\346\226\207\346\234\254\345\261\236\346\200\247.md" @@ -0,0 +1,112 @@ + +## 字号、行高、字体三大属性 +1. 字号：font-size: +2.行高：line-height: +3.字体：font-family: +### 字体加粗 +font-weight:normal ;//正常 +font-weight:bold;//加粗 +## 文本属性 +- `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文本属性 +1. color：设置文本颜色 +2. dierection:设置文本方向 +3.letter-spacing:增加或减少字符间距 +4.text-align:排列元素中的文本 +5.text-decoration：向文本添加修饰 +6.text-indent:缩进元素中文本的首行 +7.text-transfor:控制元素中的字母 +8.white-space：设置元素中空白的处理方式 +9.word-spacing:增加或减少字间距 +## 列表属性：list-style +作用：将多个属性写在一个声明中 +## list +list-style:用于将所有列表的属性设置于一个声明中 +list-style-image:将图像设置为列表项标记 +list-style-postion:设置列表项被放置的位置 +list-style-type：设置列表标记的类型 + + +十二、文本样式综合设计效果图： + +核心代码： +```html + + + + +

这是一段很厉害的样式文本sssss！！！

+ + + +十三、文本排版设计效果图： + + + +核心代码： +```html + + + +
+

qqq这是文章的第一段

+

zzz这是文章的第二段

+
+ + + +十四、文本对齐和装饰效果图： +核心代码： +```html + + + +
+

相思

+ 作者：唐·王维 +

a红豆生南国，b春来发几枝。

+

c愿君多采撷，d此物最相思。

+
+ + diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20240929-\350\203\214\346\231\257\345\261\236\346\200\2471-1.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240929-\350\203\214\346\231\257\345\261\236\346\200\2471-1.md" new file mode 100644 index 0000000000000000000000000000000000000000..c510cfcba6f4094b3dc00e294cfbcdc557f18869 --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240929-\350\203\214\346\231\257\345\261\236\346\200\2471-1.md" @@ -0,0 +1,297 @@ +## overflow属性：超出范围的内容要怎么处理 +1. visible:默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。 + +hidden：不显示超过对象尺寸的内容。 + +auto：如果内容超出，则不显示滚动条。内容超出，则显示滚动条 + +scroll :无论书否超出，总显示滚动条 +## 鼠标的属性：cursor +1. auto：默认值：浏览器根据当前的情况自动确定鼠标光标类型。 + - `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 + - `hand`：和`pointer`的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 + hover：悬浮效果 + ## 滤镜： filter + `` + +## +### 背景属性：background +## 常见的一些背景属性： +1. background-color：#ff99ff；设置元素的背景颜色 +2. background-image：url(img.gif):将图片设置为背景 +3. background-repeat:no-repeat:设置背景图片是否重复，如何重复，默认平铺（重要） + 1. no-repeat不要平铺 + 2. repeat-x横向平铺 + 3. repeat-y纵向平铺 +4. background-position：center top ：将图片背景图片在当前容器中的位置 +5. background-attachment：scroll:设置背景图片是否跟着滚动条一起滚动 +`scroll`（与fixed属性相反，默认属性）、`fixed`（背景就会被固定住，不会被滚动条滚走）。 +6. 综合属性：background +通常是在css中运用：background-orign +background-clip 背景裁切 +background-size：调整尺寸 +### background-color：背景颜色的表示方法 +颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。 +1. 用英语单词表示 +比如red、green、blue、orange、gray等 +2. RGB 表示法 +`background-color: rgb(255,0,0)` +3. RGBA 表示法 +` background-color: rgba(0, 0, 255, 0.3)` +4. 十六进制表示法 +`background-color: #ff0000` +5. HSLA 表示法 +`background-color: hsla(240,50%,50%,0.4` +- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。 + +- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。 + +- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。 + +- `A` 透明度，取值范围 0~1 +### 设置透明度的其他方式 +opacity: 0.3;` 会将整个盒子及子盒子设置透明度。 +`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。 +### background-repeat属性 +background-repeat：no-repeat：设置背景是否重复及如何重复，默认平铺满 + 1. no-repeat不要平铺 + 2. repeat-x横向平铺 + 3. repeat-y纵向平铺 + ### background-position属性 + background-position属性指的是背景定位属性 + 1. 用像素值描述属性值： + background-position：像右偏移量 向下偏移量 + 属性值可以是正数，也可以是负数：100培训200培训，-34px -123px + 2. 用单词描述与属性值 + `background-position: 描述左右的词 描述上下的词;` + 1. 描述左右的词：left、center、right + 2. 描述上下的词：top 、center、bottom + right center 表示将图片放在右边的中间；center center表示将图片放在正中间 + bottom 表示将图片的底部和父亲底部贴齐 + +通栏banner + +### background-attachment属性 +background-attachment：scroll：设置背景图片是否固定。属性值可以是： + 1. fixed：背景图就会被固定住，不会被滚动条滚走 + 2. scroll：与fixed属性相反，默认属性。 + + 1.背景颜色效果图： + ![20240929214614](sjt78aar6.hn-bkt.clouddn.com/20240929214614.png) + + +背景图片效果图： + ![20240929214737](sjt78aar6.hn-bkt.clouddn.com/20240929214737.png) + + +尺寸效果图： + ![20240929214837](sjt78aar6.hn-bkt.clouddn.com/20240929214837.png) + + 背景位置（右下角）效果图： + + ![20240929214919](sjt78aar6.hn-bkt.clouddn.com/20240929214919.png) + + 背景重复并确保图片在垂直方向上重复效果图： +![20240929215050](sjt78aar6.hn-bkt.clouddn.com/20240929215050.png) + +核心代码： +```html + + + + +
+ + +
+ +
+ + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + +``` +进阶练习 +多重背景：第一个图片覆盖在第二个图片之上。 效果图： +![20240930001136](sjt78aar6.hn-bkt.clouddn.com/20240930001136.png) + 背景渐变：从左到右的线性渐变背景，颜色从蓝色到红色 效果图： + ![20240930001340](sjt78aar6.hn-bkt.clouddn.com/20240930001340.png) + 背景裁剪：确保图片只显示在元素的中心区域。效果图： + ![20240930001432](sjt78aar6.hn-bkt.clouddn.com/20240930001432.png) + 背景缩放：确保图片能够根据元素大小自动缩放。效果图： + ![20240930001815](sjt78aar6.hn-bkt.clouddn.com/20240930001815.png) + 背景附加属性：保图片在页面滚动时固定在底部。 效果图： + ![20240930001919](sjt78aar6.hn-bkt.clouddn.com/20240930001919.png) + 核心代码： + ```html + + + + + + +
+ +
+ + +
+ +
+ + +
+ + +
+ + +
+ +
+ + + + + + + + + + + + diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20240930-\350\203\214\346\231\257\345\261\236\346\200\2471-2.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240930-\350\203\214\346\231\257\345\261\236\346\200\2471-2.md" new file mode 100644 index 0000000000000000000000000000000000000000..c6502d63cf5fd8bdfdf348e3280c23171fab7b79 --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20240930-\350\203\214\346\231\257\345\261\236\346\200\2471-2.md" @@ -0,0 +1,134 @@ +## background-attachment属性 +设置背景图片是否固定。属性值可以是： +1.fixed（背景图会被固定住，不会被滚动条滚走） +2. scroll（与fixed属性相反，默认属性值） +## background综合属性 +小属性可以覆盖大属性 + +## background-size属性：背景尺寸 +1. 宽高的具体数值：background-size：50px 50px; +2. 宽高的百分比（相当于容器的大小）background-size：50% 50%; +3. cover：图片始终充满容器，且保证长宽比不变，图片有超出的部分，超出部分则会被隐藏 +4. contain：将图片完整的显示在容器中。保持长宽高比不变 +### 背景原点：background-origin属性 +1. 从padding-box 内边距开始显示背景图：background-origin：padding-box +2. 从border-box边框开始显示背景图：background-orgin：boder-box +3. 从content-box内容区开始显示背景图 ：background-content-box +### background-clip属性：设置元素的背景（颜色）是否延伸到边框下面 +`background-clip: content-box;` 超出的部分，将裁剪掉。属性值可以是： + + - `border-box` 超出 border-box 的部分，将裁剪掉 + + - `padding-box` 超出 padding-box 的部分，将裁剪掉 + + - `content-box` 超出 content-box 的部分，将裁剪掉 + + ### 设置多个背景 + background：url(./....),url(./....),url(./....),url(./....);盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 + + ## 渐变：background=image + - 线性渐变：沿着某条直线朝一个方向产生渐变效果。：linear-gradient + +- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。：radial-gradient + +- 重复渐变。：linar-repeating-gradient + +### 线性渐变 +background-image：linear-gradient（方向，起始颜色，终止颜色） +`background-image: linear-gradient(to right, yellow, green);` + +方向可以是：to left ,to right,to top ,to bottom ，角度30deg(顺时针方向30度) + + +颜色渐变，字体效果图： +![20241001235320](sjt78aar6.hn-bkt.clouddn.com/20241001235320.png) +核心代码 +： +```html + + + +
+ +
+
+ +
祝中华人民共和国生日快乐！！
+ + +滚动视差效果效果图： +![GIF 2024-10-2 0-02-43](sjt78aar6.hn-bkt.clouddn.com/GIF 2024-10-2 0-02-43.gif) +核心代码： +```html + + + +
头部
+
+
内容
+
+
底部
+
+ \ No newline at end of file diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20241009-\345\276\204\345\220\221\346\270\220\345\217\230+cs\346\240\267\345\274\217.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20241009-\345\276\204\345\220\221\346\270\220\345\217\230+cs\346\240\267\345\274\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..f2f993fc09d459a7cbe1093b69a0fdb82884f0ae --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20241009-\345\276\204\345\220\221\346\270\220\345\217\230+cs\346\240\267\345\274\217.md" @@ -0,0 +1,181 @@ +### 径向渐变 +格式： background-image：radial-gradient(辐射的半径大小，中心的位置，起始颜色，终止颜色)； + + background-image：radial-gradient(100px at center ,yellow,green); + + 解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。 + + ### clip-path：裁剪出元素的部分区域做展示 + 创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。 + + + + ### CSS css优点 + 1. 使数据和显示分开 + 2. 减低网络流量 + 3. 使整个网站视觉效果一致 + 4. 提高开发效率 + + + ## ### CSS 的重点知识点 + +盒子模型、浮动、定位 + + +### CSS语法 + +语法格式：选择器{属性名：属性值；属性名：属性值；} +或者可以写成： + +选择器{ + + k:v； + + k:v； + + k:v； + + k:v； + +} +- 选择器代表页面上的某类元素，选择器后一定是大括号。 +- 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。 +- 冒号和属性值之间可以留一个空格（编程习惯的经验）。 +- 如果一个属性有多个值的话，那么多个值用**空格**隔开。 + +### css代码的注释 +`/* */`这种注释 + +注释要写在` + + ### 2、交集选择器：定义的时候紧密相连 +定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头 +![](http://img.smyhvae.com/20170711_1851.png) +### 3、并集选择器：定义的时候用逗号隔开 + +例如： +`p,h1,.title1,#one { + color: red; +}`html + + +小方格子效果图： +![20241010201626](sjt78aar6.hn-bkt.clouddn.com/20241010201626.png) +代码： +` + + + +
+ + + +`html diff --git "a/\350\222\213\347\276\244/\347\254\224\350\256\260/20241011-\351\200\211\346\213\251\345\231\250+\344\274\252\347\261\273.md" "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20241011-\351\200\211\346\213\251\345\231\250+\344\274\252\347\261\273.md" new file mode 100644 index 0000000000000000000000000000000000000000..972681babab4929e6f4fe6c6fc3f0a25f76d84c6 --- /dev/null +++ "b/\350\222\213\347\276\244/\347\254\224\350\256\260/20241011-\351\200\211\346\213\251\345\231\250+\344\274\252\347\261\273.md" @@ -0,0 +1,229 @@ +### 选择器 +### 1.子代选择器，用符号>表示 +列如：div > p{ + color:red; +} +div的儿子p + + + +### 2.序选择器 +1. first-child +意思是：选中同级别标签中的第一个标签。 +元素中第一个数：first-child + +2. last-child +选中级别中最后一个标签。 +元素中最后一个数：last-child + +### 3.下一个兄弟选择器 ++ 表示下一个兄弟选择器 + +`

我是一个标题

+

我是一个段落

+

我是一个段落

+

我是一个段落

， +

我是一个标题

+

我是一个段落

+

我是一个段落

+

我是一个段落

+

我是一个标题

+

我是一个段落

+

我是一个段落

+

我是一个段落

+

我是一个标题

`html + + +效果如下： +h3标签和p标签 第一个紧挨着的第一个 +http://img.smyhvae.com/20170711_1950.png + +## 伪类（伪类选择器） +伪类：同一个标签，根据其不同的种状态，有不同的形式。 + +伪类用冒号：来表示 + +### 静态伪类选择器、动态伪类选择器 +（1）静态伪类：只用于超链接的形式： +1. ：link 超链接点击之前 +2. ：visited 链接被访问过之后 +ps: 以上的两种形式，只能用于超链接 +（2）动态伪类：针对所有标签 +1. ：hover"悬停"：鼠标放在标签的时候 +2. ：active"激活"：鼠标点击标签，不松手的时 +3. ：focus：是某个标签获得焦点的样式（比如某个输入框的焦点） + +### 超链接a标签 +- `:link` “链接”：超链接点击之前 +- `:visited` “访问过的”：链接被访问过之后 +- `:hover` “悬停”：鼠标放到标签上的时候 +- `:active` “激活”： 鼠标点击标签，但是不松手时。 + + +注意******：这四种状态必须按固定的顺序写 +a:link,a:visited,a:hover,a:active +如果不按顺序，就会失效 +### 超链接的美化 +#### a{}`和`a:link{}`的区别： + - `a{}`定义的样式针对所有的超链接(包括锚点) + - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点) + ### 动态伪类举例 + - `:hover` “悬停”：鼠标放到标签上的时候 +- `:active` “激活”： 鼠标点击标签，但是不松手时。 +- `:focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点） +` + +` + + +
+ + +
+ +
+ + + +
+ +
+ + + +
+ +
+ + + + + +
+ +
+ + + + + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + +
+ +
+ + + + + + + + + + + + + +
+ +
+ + + + + + + + + +
+ +`html \ No newline at end of file