diff --git "a/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/20240911.html" "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/20240911.html" new file mode 100644 index 0000000000000000000000000000000000000000..77222e688e018a12ae84eeef355a2ef78e4e88ef --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/20240911.html" @@ -0,0 +1,26 @@ + + + + + + Document + + + +
+
我是一名大二的软件工程学子
+ + \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.13.html" "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.13.html" new file mode 100644 index 0000000000000000000000000000000000000000..4ee891163debb92a416265079e6ebf0cb4875825 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.13.html" @@ -0,0 +1,18 @@ + + + + + + 图片 + + + + + 山河 + + \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.14.html" "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.14.html" new file mode 100644 index 0000000000000000000000000000000000000000..a717fc13552b7af320b2f23f8001306037c655ce --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/9.14.html" @@ -0,0 +1,87 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/R-C.jfif" "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/R-C.jfif" new file mode 100644 index 0000000000000000000000000000000000000000..396c4de867890dce36da6561d967989f5361becc Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/R-C.jfif" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/\346\265\217\350\247\210\345\231\250.md" "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/\346\265\217\350\247\210\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..bff99416305fe1b1067e043d9e6c49a0729392a0 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\344\275\234\344\270\232/\346\265\217\350\247\210\345\231\250.md" @@ -0,0 +1,10 @@ +#国内外常用的浏览器 +|浏览器| 渲染引擎| JS引擎| +|:- |:-: | -:| +|Google Chrome谷歌 |Chromium| v8| +|Microsoft Edge| Chromium| Charkra| +|Mozilla Firefox火狐|Gecko| SpiderMonkey| +|Safari苹果| WebKit| JAvaScriptCore| +|Opera 挪威| Presto| Carakan| +|QQ BrowserQQ浏览器 | WebKit| JavaScript| +|阿里巴巴UCBrowser| Blink| U3引擎 | \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/2 024 0911\347\254\224\350\256\260.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/2 024 0911\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..4b10a96343a7f65f69681f8a374a59814ff409ec --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/2 024 0911\347\254\224\350\256\260.md" @@ -0,0 +1,31 @@ +# 回到某一时刻并3强推并不会影响他人文件 + 1. git reset --hard xxxx(前四位) 回退 +2. git push -f 强推 +3. git reflog 查看推前推后两个时刻 + # 排版标签 + ```js +

标题标签 +

段落标签 +


水平线标签 +
换行标签 +
占一行 + 不换行 +
居中 +
 预定义/预格式化文本标签(可以使空格表现出来)
+```
+```js
+
+1. 
标签 + (1)div标签:可以把标签中的内容分割为独立的区块。必须单独占据一行。 + + (2)span标签:和div的作用一致,但不换行。 + + div和span的区别 +
唯一的区别在于:是不换行的,而
是换行的。 + 居中
+ 2.
+

+

+
+ + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240909-\350\256\244\350\257\206web\357\274\214\346\265\217\350\247\210\345\231\250.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240909-\350\256\244\350\257\206web\357\274\214\346\265\217\350\247\210\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..1b800fec10dc700a6eebc6fe93331735a710b5c8 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240909-\350\256\244\350\257\206web\357\274\214\346\265\217\350\247\210\345\231\250.md" @@ -0,0 +1,16 @@ +#Web +认识web +1.web是全球光域网,也称为万维网 +2.网页:网页是构成网站的基本元素 +3.浏览器:网页运行的平台 + +##web的标准 +1.常见的浏览器 * 谷歌 Chrome * Safari * 火狐(Firefox) * IE * Edge * Opera * 组成 * 渲染引擎(浏览器内核) +2。决定了浏览器如何显示网页的内容以及页面的格式信息 * 渲染引擎是浏览器兼容性问题出现的根本原因 +3.作用:读取网页内容,计算网页的显示方式并显示在页面上 * JS引擎 * 用来解析网页中的JavaScript代码,对其处理后再运行 * HTML * 专有名词 * 网页 :由各种标记组成的一个页面就叫网页。 +4.主页(首页) : 一个网站的起始页面或者导航页面。 * 标记: 也叫标签。每个标签都规定好了特殊的含义。 + +###Web前段分三层: +1.HTML:超文本标记语言,结构 +2.CSS:层叠样式表,样式 +3.JS:JavaScript,行为 \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240913-\350\266\205\351\223\276\346\216\245\357\274\214\345\255\227\344\275\223.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240913-\350\266\205\351\223\276\346\216\245\357\274\214\345\255\227\344\275\223.md" new file mode 100644 index 0000000000000000000000000000000000000000..724301818a5e39de39055fbf16ab161767a8447c --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240913-\350\266\205\351\223\276\346\216\245\357\274\214\345\255\227\344\275\223.md" @@ -0,0 +1,65 @@ +# 特殊字符 + +|特殊字符| 描述| 字符的代码| +|:- |:-: | -:| +| |空格符 |nbsp;| +|< |小于号 |lt;| +|> |大于号 |gt;| +|& |和号 |amp;| +|¥ |人民币 | yen;| +|© |版权 | copy;| +|® |注册商标 | reg;| +|° |摄氏度 | deg;| +|± |正负号 | plusmn;| +|× |乘号 |times;| +|÷ |除号 |divide;| +|² |平方2(上标2) |sup2;| +|³ |立方3(上标3) |sup3;| + + + +# 上标 下标 + +# 外部链接:链接到外部文件 + 1. 点击进入另外一个文件 +2. 点我点我 +# 锚链接 +## 首先我们要创建一个锚点,也就是说,使用name属性或者id属性给那个特定的位置起个名字。如下: + +1. 回到顶部 +# 3、邮件链接 +1. 点击进入我的邮箱 +# 超链接的属性 +1. href:目标URL +2. title:悬停文本。 +3. name:主要用于设置一个锚点的名称。 +4. target:告诉浏览器用什么方式来打开目标页面。target属性有以下几个值: + 1. _self:在同一个网页中显示(默认值) + 2. _blank:在新的窗口中打开。 + 3. _parent:在父窗口中显示 + 4. _top:在顶级窗口中显示 + + # img标签 + 语法: + + # 插入的图片类型 +* 能够插入的图片类型是:jpg(jpeg)、gif、png、bmp等。 +* 不能往网页中插入的图片格式是:psd、ai等。 + +## img标签的src属性 +* 指图片的路径 在写图片的路径时,有两种写法:相对路径、绝对路径 + +## 标签的width、height 属性 +* width:图像的宽度。 +* height:图像的高度。 重要提示:如果要想保证图片等比例缩放,请只设置width和height中其中一个。 +# Alt 属性 +* 当图片 src 不可用的时候,显示文字。这样做,至少能让用户知道,这个图片大概是什么内容。 + +* title 属性 ++ title:提示性文本。鼠标悬停时出现的文本。 + +* :下划线标记 + + * :中划线标记(删除线) + +* :斜体标记 diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240914-\345\210\227\350\241\250\357\274\214\350\241\250\346\240\274\346\240\207\347\255\276.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240914-\345\210\227\350\241\250\357\274\214\350\241\250\346\240\274\346\240\207\347\255\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..94da670441a8435844c33c3422d06b07fd092f0b --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240914-\345\210\227\350\241\250\357\274\214\350\241\250\346\240\274\346\240\207\347\255\276.md" @@ -0,0 +1,38 @@ +# 行的属性 +* dir:公有属性,设置这一行单元格内容的排列方式。可以取值: +* ltr:从左到右(left to right,默认) +* rtl:从右到左(right to left) +* bgcolor:设置这一行的单元格的背景色。 +* height:一行的高度 +* align="center":一行的内容水平居中显示,取值:left、center、right +* valign="center":一行的内容垂直居中,取值:top、middle、bottom +# 单元格的属性 +* align:内容的横向对齐方式。属性值可以填:left right center。 +* valign:内容的纵向对齐方式。属性值可以填:top middle bottom +* width:绝对值或者相对值(%) +* height:单元格的高度 +* bgcolor:设置这个单元格的背景色。 +* background:设置这个单元格的背景图片。 +# 单元格的属性 +* colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。 +* rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。 +# :表格的标题 +* 使用时和tr标签并列 +* 属性:align,表示标题相对于表格的位置。属性取值可以是:left、center、right、top、bottom + + +* border:边框。像素为单位 +* style="border-collapse:collapse;":单元格的线和表格的边框线合并 +* width:宽度。像素为单位 +* height:高度。像素为单位 +* bordercolor:表格的边框颜色 +* align:表格的水平对齐方式。属性值可以填:left right center +* cellpadding:单元格内容到边的距离,像素为单位 +* cellspacing:单元格和单元格之间的距离,像素为单位 +* bgcolor="":表格的背景颜色 +* background="路径src/...":背景图片。 +* bordercolorlight:表格的上、左边框,以及单元格的右、下边框的颜色 +* bordercolordark:表格的右、下边框,以及单元格的上、左的边框的颜色 +* dir:公有属性,单元格内容的排列方式(direction)。 可以 取值:ltr:从左到右(left to right,默认),rtl:从右到左(right to left) + + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240918\350\241\250\345\215\225\345\222\214\350\241\250\346\240\274\344\275\234\344\270\232.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240918\350\241\250\345\215\225\345\222\214\350\241\250\346\240\274\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..1f8be6a432be5dbae4137721058a458835431445 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240918\350\241\250\345\215\225\345\222\214\350\241\250\346\240\274\344\275\234\344\270\232.md" @@ -0,0 +1,205 @@ +# 表格`` +一个表格`
`是由每行``组成的,每行是由每个单元格`
`组成的。 +所以我们要记住,一个表格是由行组成的(行是由列组成的),而不是由行和列组成的。 +在以前,要想固定标签的位置,唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候,表格作用还是有一些的。 +**``的属性:** + - `border`:边框。像素为单位。 + - `style="border-collapse:collapse;"`:单元格的线和表格的边框线合并(表格的两边框合并为一条) + - `width`:宽度。像素为单位。 + - `height`:高度。像素为单位。 + - `bordercolor`:表格的边框颜色。 + - `align`:**表格**的水平对齐方式。属性值可以填:left right center。 +注意:这里不是设置表格里内容的对齐方式,如果想设置内容的对齐方式,要对单元格标签`
`进行设置) + - `cellpadding`:单元格内容到边的距离,像素为单位。默认情况下,文字是紧挨着左边那条线的,即默认情况下的值为0。 +注意不是单元格内容到四条边的距离哈,而是到一条边的距离,默认是与左边那条线的距离。如果设置属性`dir="rtl"`,那就指的是内容到右边那条线的距离。 + - `cellspacing`:单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0 + - `bgcolor="#99cc66"`:表格的背景颜色。 + - `background="路径src/..."`:背景图片。 +背景图片的优先级大于背景颜色。 + - `bordercolorlight`:表格的上、左边框,以及单元格的右、下边框的颜色 + - `bordercolordark`:表格的右、下边框,以及单元格的上、左的边框的颜色 +这两个属性的目的是为了设置3D的效果。 + - `dir`:公有属性,单元格内容的排列方式(direction)。 可以 取值:`ltr`:从左到右(left to right,默认),`rtl`:从右到左(right to left) + ### 单元格的合并 + +单元格的属性: + +- `colspan`:横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。 +- `rowspan`:纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。 +# 表单`
` +表单标签用``表示,用于与服务器的交互。表单就是收集用户信息的,就是让用户填写的、选择的。 + +**属性:** + - `name`:表单的名称,用于JS来操作或控制表单时使用; + - `id`:表单的名称,用于JS来操作或控制表单时使用; + - `action`:指定表单数据的处理程序,一般是PHP,如:action=“login.php” + - `method`:表单数据的提交方式,一般取值:get(默认)和post + +注意:表单和表格嵌套时,是在``标记中套``标记。 +### ``:输入标签(文本框) + +用于接收用户输入。 + +```html + +``` + +**属性:** + +- **`type="属性值"`**:文本类型。属性值可以是: + - `text`(默认) + - `password`:密码类型 + - `radio`:单选按钮,名字相同的按钮作为一组进行单选(单选按钮,天生是不能互斥的,如果想互斥,必须要有相同的name属性。name就是“名字”。 + )。非常像以前的收音机,按下去一个按钮,其他的就抬起来了。所以叫做radio。 + - `checkbox`:多选按钮,**name 属性值相同的按钮**作为一组进行选择。 + - `checked`:将单选按钮或多选按钮默认处于选中状态。当``标签设置为`type="radio"`或者`type=checkbox`时,可以用这个属性。属性值也是checked,可以省略。 + - `hidden`:隐藏框,在表单中包含不希望用户看见的信息 + - `button`:普通按钮,结合js代码进行使用。 + - `submit`:提交按钮,传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后,这个表单就会被提交到form标签的action属性中指定的那个页面中去。 + - `reset`:重置按钮,清空当前表单的内容,并设置为最初的默认值 + - `image`:图片按钮,和提交按钮的功能完全一致,只不过图片按钮可以显示图片。 + - `file`:文件选择框。 + 提示:如果要限制上传文件的类型,需要配合JS来实现验证。对上传文件的安全检查:一是扩展名的检查,二是文件数据内容的检查。 + + - **`value="内容"`**:文本框里的默认内容(已经被填好了的) + + - `size="50"`:表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。 +注意**size属性值的单位不是像素哦**。 + + - `readonly`:文本框只读,不能编辑。因为它的属性值也是readonly,所以属性值可以不写。 +用了这个属性之后,在google浏览器中,光标点不进去;在IE浏览器中,光标可以点进去,但是文字不能编辑。 + + - `disabled`:文本框只读,不能编辑,光标点不进去。属性值可以不写。 + +# 作业 +## 表单作业 + ``` + + + + + + + + +## 表格作业 + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
星期一星期二星期三星期四星期五
数学数学体育
语文语文
历史地理政治政治
数学体育体育计算机
英语语文数学数学
+ ``` diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240920-HTML\357\274\214\344\275\234\344\270\232.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240920-HTML\357\274\214\344\275\234\344\270\232.md" new file mode 100644 index 0000000000000000000000000000000000000000..3cbebd827753226a355306417db22c6e4fddba07 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240920-HTML\357\274\214\344\275\234\344\270\232.md" @@ -0,0 +1,186 @@ + +# 什么是HTML5? +* HTML5是构建Web内容的一种语言描述方式,HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式,被认为是互联网的核心技术之一。 +* HTML产生于1990年,1997年HTML4成为互联网标准,并广泛应用于互联网应用的开发。 +* HTML5是Web中核心语言HTML的规范,用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的,在浏览器中通过一些技术处理将其转换成为了可识别的信息,HTML5在从前HTML4.01的基础上进行了一定的改进。 +# 表单元素(标签) +1. <datalist> 数据列表 --> 与下拉框相似,它可以输入关键字搜索 + ```html + + + + + + + ``` + +2. <fieldset> 字段集 --> 将表单内的一组相关表单元素进行分组。与<legend> 标签一起使用。 + ```html + 语法: +
+ 标题 +
+ 代码显示: +
+ 标题 + +
+ ``` + +3. <meter> 度量器 + +- low:低于该值后警告 + +- high:高于该值后警告 + +- value:当前值 + +- max:最大值 + +- min:最小值。 +```javascript + +``` + +### 表单属性 + - `placeholder` 占位符(提示文字) + + - `autofocus` 自动获取焦点(刷新时,文本可直接输入) + + - `multiple` 文件上传多选或多个邮箱地址 + + - `autocomplete` 自动完成(填充的)。on 开启(默认),off 取消。用于表单元素,也可用于表单自身(on/off) + + - `form` 指定表单项属于哪个form,处理复杂表单时会需要 + + - `novalidate` 关闭默认的验证功能(只能加给form) + + - `required` 表示必填项 + + - `pattern` 自定义正则,验证表单 + +### 表单事件 +- `oninput()`:用户输入内容时触发,可用于输入字数统计。 +- `oninvalid()`:验证不通过时触发。比如,如果验证不通过时,想弹出一段提示文字,就可以用到它。 + +### 音频 +- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`,都可以。 +- `controls` 控制条。(建议把这个选项写上,不然都看不到控件在哪里) +- `loop` 循环播放。 +- `preload` 预加载 同时设置 autoplay 时,此属性将失效。 + +```html + +``` + + + +### 视频 +- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`,都可以。 +- `controls` 控制条。(建议把这个选项写上,不然都看不到控件在哪里) +- `loop` 循环播放。 +- `preload` 预加载 同时设置 autoplay 时,此属性将失效。 +- `width`:设置播放窗口宽度。 +- `height`:设置播放窗口的高度。 + +```html + +``` + +# 作业 +## 登录页面 +``` + +div class="login-container"> +

登录页面

+ +
+ + +
+
+ + +
+ + + + +# 跑马灯 + +
+
+

关关雎鸠,在河之洲。窈窕淑女,君子好逑。 + 参差荇菜,左右流之。窈窕淑女,寤寐求之。 + 求之不得,寤寐思服。悠哉悠哉,辗转反侧。 + 参差荇菜,左右采之。窈窕淑女,琴瑟友之。 + 参差荇菜,左右芼之。窈窕淑女,钟鼓乐之

+
+
+``` \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240923-html.CSS.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240923-html.CSS.md" new file mode 100644 index 0000000000000000000000000000000000000000..2c4cd605cfb6d98583ca27adb587feda7c8807bd --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240923-html.CSS.md" @@ -0,0 +1,98 @@ +# html详解 +## 拖拽元素 +页面中设置了 `draggable="true"` 属性的元素 + +**拖拽元素的事件监听**:应用于拖拽元素 + +- `ondragstart`当拖拽开始时调用 + +- `ondragleave` 当**鼠标离开拖拽元素时**调用 + +- `ondragend` 当拖拽结束时调用 + +- `ondrag` 整个拖拽过程都会调用 + +事例: +```html + +
+ + + +``` + +# 地理定位(位置) + +地理定位是HTML5中新增的API特性,它允许JavaScript程序向浏览器询问用户真实的地理位置。识别地理位置的一些应用就可以使用它来显示地图、导航和其它一些与用户当前位置有关的信息。当然,考虑到用户的隐私,支持地理定位API的浏览器在JavaScript程序获取用户物理位置前总是会询问用户是否允许获取当前位置。 + +### 获取地理位置的方式 + +1. IP地址 + +2. 三维坐标: + + +(1)**GPS**(Global Positioning System,全球定位系统)。 + +# css基础 +CSS(Cascading Style Sheets,层叠样式表)是为 web 内容添加样式的代码。 + +### CSS的单位 +html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样。 CSS中的单位是必须要写的,因为它没有默认单位。 + +绝对单位 +1 in=2.54cm=25.4mm=72pt=6pc。 + +各种单位的含义: + +- in:英寸Inches (1 英寸 = 2.54 厘米) +- cm:厘米Centimeters +- mm:毫米Millimeters +- pt:点Points,或者叫英镑 (1点 = 1/72英寸) +- pc:皮卡Picas (1 皮卡 = 12 点) +相对单位 +- px:像素 em:印刷单位相当于12个点 %:百分比,相对周围的文字的大小 + +### 字体属性`font` + +有以下属性: +- `` +- `` +- `` +- `` +- `` +- `` +- `` + +**注意:** font-style、font-variant 和 font-weight 必须在 font-size 之前 +font-variant 只可以使用 CSS 2.1 定义的值,即 normal 和 small-caps +font-stretch 必须是单个关键字值 +line-height 必须跟在 font-size 后面,由“/”分隔,例如“16px/3” +font-family 必须最后指定 + + \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240925-\345\255\227\344\275\223 \346\226\207\346\234\254.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240925-\345\255\227\344\275\223 \346\226\207\346\234\254.md" new file mode 100644 index 0000000000000000000000000000000000000000..e2b0f86621247ff2770d0f2d095e9ae984fef183 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240925-\345\255\227\344\275\223 \346\226\207\346\234\254.md" @@ -0,0 +1,41 @@ +## 文本属性 + +CSS样式中,常见的文本属性有以下几种: + +- `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`(每个单词的首字母大写) +### 字体属性: + +- `font-family`: 设置字体,如 SimSun(宋体),SimHei(黑体),Microsoft Yahei(微软雅黑),Arial,serif 等 +。 +- `font-size`: 设置字体大小,可以使用像素(px)、百分比(%)或者 em 作为单位。 +- `font-weight`: 设置字体粗细,如 normal(默认)、bold(粗体)、lighter(细体)、bolder(更粗)等。 +- `font-style`: 设置字体样式,如 normal(默认)、italic(斜体)等。 + +### 行高和间距: + +- `line-height`: 设置行高,可以使用单位值或者数字(相对于当前字体大小的倍数)。 +- `letter-spacing`: 设置字符间距,通常用于调整字母之间的间距。 +- `word-spacing`: 设置单词间距,用于调整单词之间的间距。 + +# 文本装饰: + +- text-decoration: 设置文本装饰,如 underline(下划线)、overline(上划线)、line-through(删除线)等。 +- text-transform: 控制文本转换,如 uppercase(大写)、lowercase(小写)、capitalize(首字母大写)等。 + +# 首字下沉: + +- first-letter: 选择元素的第一个字母进行特殊样式设置。 + +```css +p.dropcap:first-letter { + float: left; + font-size: 3em; + line-height: 1; + padding-right: 8px; + padding-top: 4px; +} diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240929\350\203\214\346\231\257\347\254\224\350\256\2601.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240929\350\203\214\346\231\257\347\254\224\350\256\2601.md" new file mode 100644 index 0000000000000000000000000000000000000000..c27324acac416c68e2b02db76192987fc0f38b80 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240929\350\203\214\346\231\257\347\254\224\350\256\2601.md" @@ -0,0 +1,134 @@ +# 文本属性补充 +## overflow属性:超出范围的内容要怎么处理 + +`overflow`属性的属性值可以是: + +- `visible`:默认值。多余的内容不剪切也不添加滚动条,会全部显示出来。 +- `hidden`:不显示超过对象尺寸的内容。 +- `auto`:如果内容不超出,则不显示滚动条;如果内容超出,则显示滚动条。 + - `scroll`:Windows 平台下,无论内容是否超出,总是显示滚动条。Mac 平台下,和 `auto` 属性相同。 + +## 鼠标的属性 cursor + +鼠标的属性`cursor`有以下几个属性值: + + - `auto`:默认值。浏览器根据当前情况自动确定鼠标光标类型。 + - `pointer`:IE6.0,竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 + - `hand`:和`pointer`的作用一样:竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。 + + # 背景属性 + + ## 滤镜`` + + 滤镜(filter)是一种强大的工具,它允许开发者在网页上直接应用各种视觉效果,如模糊、亮度调整、对比度调整等。这些滤镜可以用于图像、背景、甚至整个页面元素,为网页设计提供了更多的创意空间。 + +设置背景图片是否重复及如何重复,默认平铺满 ++ no-repeat:不要平铺 ++ repeat-x:横向平铺 ++ repeat-y:纵向平铺 +```cs +background-repeat: no-repeat +``` +4. 设置背景图片在当前容器中的位置 +```cs +background-position: 100 200 +background-position:center top +``` +5. 设置背景图片是否跟着滚动条一起移动 ++ scroll:默认属性,和fixed相反 ++ fixed:背景被固定,不会随滚动条滚动 +```cs +background-attachment:scroll +``` +6. 综合属性:将上面的多个属性写在一个声明中 +```cs +background +``` +## 新增属性 +1. background-origin +2. background-clip:背景裁切 +3. background-size:调整尺寸 + +### background-color:背景颜色的表示 +1. 单词 +```cs +background-color:red +``` +2. rgb表示法 +```cs +background-color:rgb(255,0,0) +``` +3. 十六进制表示法 +```cs +background-color:#ff0000 +``` + +#### CSS3的新方式 +1. RGBA表示法 +R,G,B的取值范围是:0-255;透明度的取值范围是0-1 +```js +background-color:rgba(0,0,255,0.3) +``` +2. HSLA表示法 ++ H:色调,取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。 ++ S:饱和度,取值范围 0%~100%。值越大,越鲜艳。 ++ L:亮度,取值范围 0%~100%。亮度最大时为白色,最小时为黑色。 ++ A:透明度,取值范围 0~1。 +```cs +background-color:hsla(240,50%,50%,0.4) +``` + + +```` + + + +
+
+
+
+ + +```` \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240930\350\203\214\346\231\257\347\254\224\350\256\2602.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240930\350\203\214\346\231\257\347\254\224\350\256\2602.md" new file mode 100644 index 0000000000000000000000000000000000000000..63f948ff3dbe5c241b75a74e679f85d752df9f7f --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20240930\350\203\214\346\231\257\347\254\224\350\256\2602.md" @@ -0,0 +1,111 @@ +# 背景属性 +## background-attachment 属性 + +- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是: + - `fixed`(背景就会被固定住,不会被滚动条滚走)。 + - `scroll`(与fixed属性相反,默认属性) + +## `background-size`属性:背景尺寸 + +`background-size`属性:设置背景图片的尺寸。 + +格式举例: + +```javascript + /* 宽、高的具体数值 */ + background-size: 500px 500px; + + /* 宽高的百分比(相对于容器的大小) */ + background-size: 50% 50%; // 如果两个属性值相同,可以简写成:background-size: 50%; + + background-size: 100% auto; //这个属性可以自己试验一下。 + + /* cover:图片始终填充满容器,且保证长宽比不变。图片如果有超出部分,则超出部分会被隐藏。 */ + background-size: cover; + + /* contain:将图片完整地显示在容器中,且保证长宽比不变。可能会导致容器的部分区域为空白。 */ + background-size: contain; + ## 背景原点:background-origin 属性 +格式举例: +```css +/**从padding-box 内边距开始显示背景图 */ +background-origin: padding-box; /**默认值 */ + +/**从border-box 边框开始显示背景图 */ +background-origin: border-box; + +/**从content-box 内容区域开始显示背景图 */ +background-origin:content-box; +``` + +## background-clip 属性:设置元素的背景(背景图片或颜色)是否延伸到边框下面 + +格式举例: + ++ `background-clip: content-box;` 超出的部分,将裁剪掉。属性值可以是: + ++ `border-box`: 超出 `border-box` 的部分,将裁剪掉 + ++ `padding-box`: 超出 `padding-box` 的部分,将裁剪掉 + ++ `content-box`: 超出 `content-box` 的部分,将裁剪掉 + +## 渐变:background-image +渐变分为: ++ 线性渐变:沿着某条直线朝一个方向产生渐变效果。 + ++ 径向渐变:从一个中心点开始沿着四周产生渐变效果。 + ++ 重复渐变 + +### 线性渐变 +格式: +```css +background-image: linear-gradient(方向,起始颜色,终止颜色); +``` +> 方向可以是:`to left`、`to right`、`to top`、`to bottom`、角度`30deg`(指的是顺时针方向30deg) +# line-height专项练习作业俩个 + ``` + ![图片](./imgs/效果图.png) + + + +
+
+ + + + + +```` \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241009\346\240\267\345\274\217\351\200\211\346\213\251\345\231\250.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241009\346\240\267\345\274\217\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..76d8720c487e3a7b4dcf74f81582c463ca6fd3e9 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241009\346\240\267\345\274\217\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,164 @@ +# 径向渐变 +语法: + +``` + background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色); + + background-image: radial-gradient(100px at center,yellow ,green); + +``` +中心点的位置可以是:at left right center bottom top。如果以像素为单位,则中心点参照的是盒子的左上角。 + +## clip-path:裁剪出元素的部分区域做展示 +`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。 + +虽然`clip-path`不是背景属性,但这个属性非常强大,但往往会结合背景属性一起使用,达到一些效果。 +* 好处是,即使做了任何裁剪,**容器的占位大小是不变的**。 + # CSS样式表 + - CSS 四种基本选择器:`标签选择器`、`类选择器`、`ID选择器`、`通用选择器` +- CSS 几种扩展选择器:`后代选择器`、`交集选择器`、`并集选择器` + +**CSS 优点:** +1. 使数据和显示分开 +2. 降低网络流量 +3. 使整个网站视觉效果一致 +4. 使开发效率提高了 + ## CSS 语法 + +**语法格式:**(其实就是键值对) +* 语法 +```html +选择器{ 属性名: 属性值; 属性名: 属性值; } +``` +或者可以写成: + +```css +选择器 { + k: v; + k: v; + k: v; + k: v; +} +选择器 { + k: v; + k: v; + k: v; + k: v; +} +``` +- 选择器代表页面上的某类元素,选择器后一定是大括号。 +- 属性名后必须用冒号隔开,属性值后用分号(最后一个属性可以不用分号,但最好还是加上分号)。 +- 冒号和属性值之间可以留一个空格(编程习惯的经验)。 +- 如果一个属性有多个值的话,那么多个值用**空格**隔开。 +# CSS 的一些简单常见的属性 +**字体颜色:**(c) + +```html +color:red; +``` +color 属性的值,可以是英语单词,比如 red、blue、yellow 等等;也可以是 rgb、十六进制(后期详细讲)。 + +**字号大小:**(fos) + +```html +font-size:40px; +``` + +font 就是“字体”,size 就是“尺寸”。px 是“像素”。单位必须加,不加不行。 + +**背景颜色:**(bgc) + +```html +background-color: blue; +``` + +background 就是“背景”。 + +**加粗:**(fwb) + +```html +font-weight: bold; +``` + +font 是“字体” weight 是“重量”的意思,bold 粗。 + +**不加粗:**(fwn) + +```html +font-weight: normal; +``` + +normal 就是正常的意思。 + +**斜体:**(fsi) + +```html +font-style: italic; +``` + +italic 就是“斜体”。 + +**不斜体:**(fsn) + +```html +font-style: normal; +``` + +**下划线:**(tdu) + +```html +text-decoration: underline; +``` + +decoration 就是“装饰”的意思。 + +**没有下划线:**(tdn) + +```html +text-decoration:none; +``` + +# CSS 的三种书写方式 +1. **行内样式**:在某个特定的标签里采用 style **属性**。范围只针对此标签。 + +2. **内嵌样式**(内联样式):在页面的 head 标签里里采用` + + +
+ +
+ + + +``` + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241011\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250\347\254\224\350\256\260.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241011\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..912b8d5e6c17b312e112a8c2f97b9b7f53bf366f --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241011\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250\347\254\224\350\256\260.md" @@ -0,0 +1,68 @@ +# CSS 的4种高级选择器 +- 后代选择器:用空格隔开 +- 交集选择器:选择器之间紧密相连 +- 并集选择器(分组选择器):用逗号隔开 +- 伪类选择器 +1. 子代选择器,用符号`>`表示 +2. 序选择器 +3. 下一个兄弟选择器 + +# 伪类选择器 +## 概念: +* 同一个标签,根据其**不同的种状态,有不同的样式**。这就叫做“伪类”。伪类用冒号来表示 + +# 伪类选择器分两种 +## 第一种是静态伪类 +**静态伪类**:只能用于**超链接**的样式。如下: + +- `:link` 超链接点击之前 +- `:visited` 链接被访问过之后 + +PS:以上两种样式,只能用于超链接。 + +## 第二种是动态伪类 +(2)**动态伪类**:针对**所有标签**都适用的样式。如下: + +- `:hover` “悬停”:鼠标放到标签上的时候 +- `:active` “激活”: 鼠标点击标签,但是不松手时。 +- `:focus` 是某个标签获得焦点时的样式(比如某个输入框获得焦点) + +# 超链接a标签 +## 超链接的四种状态 +a标签有4种伪类(即对应四种状态)如下: +- `:link` “链接”:超链接点击之前 +- `:visited` “访问过的”:链接被访问过之后 +- `:hover` “悬停”:鼠标放到标签上的时候 +- `:active` “激活”: 鼠标点击标签,但是不松手时。 + +对应的代码如下: + +```html + +``` +在CSS中,四种状态必须按照固定顺序写: +* 1: a:link : +* 2 a:visited 、 +* 3:a:hover : +* 4:a:active: + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241012\347\273\247\346\211\277\345\222\214\345\261\202\345\217\240.md.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241012\347\273\247\346\211\277\345\222\214\345\261\202\345\217\240.md.md" new file mode 100644 index 0000000000000000000000000000000000000000..e6db4d539a391fa6b2afcaf3476c2e42fba64691 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241012\347\273\247\346\211\277\345\222\214\345\261\202\345\217\240.md.md" @@ -0,0 +1,71 @@ +# CSS继承性 +概念:可以让子元素自动获得父类元素的某些样式属性,可以减少子元素代码重复,通常情况下:继承用于字体,颜色等属性,而盒子、定位、布局的属性,都不能继承。 +# css层叠性 +## 计算权重 + +**层叠性:就是css处理冲突的能力。** + +当多个选择器,选择上了某个元素的时候,要按照如下顺序统计权重: + +- id 选择器 +- 类选择器、属性选择器、伪类选择器 +- 标签选择器、伪元素选择器 + +因为对于相同方式的样式表,其选择器排序的优先级为:ID选择器 > 类选择器 > 标签选择器 + +### 层叠性:权重计算的问题大总结 + +层叠性。层叠性是一种能力,就是处理冲突的能力。当不同选择器,对一个标签的同一个样式,有不同的值,听谁的?这就是冲突。css有着严格的处理冲突的机制。 + +- 选择上了,数权重,(id的数量,类的数量,标签的数量)。如果权重一样,谁写在后面听谁的。 +- 没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。如果描述的一样近,比如选择器权重,如果权重再一样重,谁写在后面听谁的。 + +### CSS样式表的冲突的总结 + +- 1、对于相同的选择器(比如同样都是类选择器),其样式表排序:行级样式 > 内嵌样式表 > 外部样式表(就近原则) +- 2、对于相同类型的样式表(比如同样都是内部样式表),其选择器排序:ID选择器 > 类选择器 > 标签选择器 +- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器 + +> 总结:就近原则。ID选择器优先级最大。 + +另外还有两个冲突的情况: + +- 1、对同一个标签,如果用到的都是内嵌样式表,且权重一致,那它的优先级:**定义**的CSS样式表中,谁最近,就用谁。 +- 2、对于同一个标签,如果用到的都是外部样式表,且权重一致,那它的优先级:html文件中,引用样式表的位置越近,就用谁。 + +### 同一个标签,携带了多个类名,有冲突: + +这里需要补充两种冲突的情况: + +- 1、对同一个标签,如果用到了了多个相同的内嵌样式表,它的优先级:**定义**的样式表中,谁最近,就用谁。 +- 2、对于同一个标签,如果引用了多个相同的外部样式表,它的优先级:html文件中,引用样式表的位置越近,就用谁。 + + +### class和id的区别 + +class用于css的,id用于js的。 + +1)class页面上可以重复。id页面上唯一,不能重复。 +2)一个标签可以有多个class,用空格隔开。但是id只能有id。 + +### 各种选择器(浏览器兼容性) + +IE6层面兼容的选择器: 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符。如下: + +``` +p +#box +.spec +div p +div.spec +div,p +* +```d +``` +### css两个性质 + +- 继承性:好的事儿。继承从上到下,哪些能?哪些不能? + +- 层叠性:冲突,多个选择器描述了同一个属性,听谁的? + + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241014\347\233\222\345\255\220\347\254\224\350\256\260.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241014\347\233\222\345\255\220\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..9af0dbf9898e032d124736e7c35f2da93974525b --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241014\347\233\222\345\255\220\347\254\224\350\256\260.md" @@ -0,0 +1,85 @@ +# 盒子模型 +## 盒子模型主要五大属性: +1. width :宽度 +2. height:高度 +3. padding:内边距 +4. border:边框 +5. marin:外边距 + +# CSS盒模型和IE盒模型的区别: + +- 在 **标准盒子模型**中,**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。 + +- **IE盒子模型**中,**width 和 height 指的是内容区域+border+padding**的宽度和高度。 + +## 认识width、height +真实占有宽度 = 左border + 左padding + width + 右padding + 右border + +## 认识padding +padding就是内边距。padding的区域有背景颜色, + +|属性| |描述| +|:- |:-: | -:| +|padding-top| |上内边距| +|padding-right| |右内边距| +|padding-bottom| |下内边距| +|padding-left| |左内边距| + +## 认识border +border就是边框。边框有三个要素:像素(粗细)、线型、颜色。 + +```css +border-width:10px; //边框宽度 +border-style:solid; //线型 +border-color:red; //颜色。 +``` +等价于: + +``` +border:10px solid red; +``` + +|常见线型值| |描述| +|:- |:-: | -:| +|solid| |实线| +|dashed| |虚线| +|dotted| |点状线| +|double| |双边框| +|groove| |定义 3D 凹槽边框。效果取决于 border-color 值| +|ridge| |定义 3D 垄状边框。效果取决于 border-color 值| +|inset| |3D inset 边框。其效果取决于 border-color 的值。| +|outset| |3D outset 边框。其效果取决于 border-color 的值。| +|none| |无边框| +|hidden| |隐藏边框| + +## 边框的三要素小属性 +|小属性| |描述| +|:- |:-: |-:| +|border-width| |线宽| +|border-style| |线型| +|border-color| |线颜色| +## 四个方向的边框 +|属性| |描述| +|:- |:-: |-:| +|border-top| |上边框| +|border-right| |右边框| +|border-bottom| |下边框| +|border-left| |左边框| +## 四个方向的边框的三要素小属性 +|属性| |描述| +|:- |:-: |-:| +|border-top-width| |上边框宽度| +|border-top-style| |上边框线型| +|border-top-color| |上边框颜色| +|border-right-width| |右边框宽度| +|border-right-style| |右边框线型| +|border-right-color| |右边框颜色| +|border-bottom-width| |下边框宽度| +|border-bottom-style| |下边框线型| +|border-bottom-color| |下边框颜色| +|border-left-width| |左边框宽度| +|border-left-style| |左边框线型| +|border-left-color| |左边框颜色| + + + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241016\346\265\256\345\212\250\347\254\224\350\256\260.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241016\346\265\256\345\212\250\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..0968981c18b5369315ab16f2ac33f69579fe7aed --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241016\346\265\256\345\212\250\347\254\224\350\256\260.md" @@ -0,0 +1,295 @@ +# 浮动笔记 +``去掉标签默认的左边符号 + list-style-type: none ;`` + - 标准文档流 + - 标准文档流的特性 + - 行内元素和块级元素 + - 行内元素和块级元素的相互转换 +- 浮动的性质 +- 浮动的清除 +- 浏览器的兼容性问题 +- 浮动中margin相关 +# 行内元素和块级元素 +**行内元素和块级元素的区别:**(非常重要) + +行内元素: + +- 与其他行内元素并排; +- 不能设置宽、高。默认的宽度,就是文字的宽度。 + +块级元素: + +- 霸占一行,不能与其他任何元素并列; +- 能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%。 +**行内元素和块级元素的分类:** + +在以前的HTML知识中,我们已经将标签分过类,当时分为了:文本级、容器级。 + +从HTML的角度来讲,标签分为: + +- 文本级标签:p、span、a、b、i、u、em。 +- 容器级标签:div、h系列、li、dt、dd。 +从CSS的角度讲,CSS的分类和上面的很像,就p不一样: + +- 行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级,但是是个块级元素。 + +- 块级元素:所有的容器级标签都是块级元素,还有p标签。 +# 浮动的性质 +## 性质1:浮动的元素脱标 + +一旦一个元素浮动了,那么,将能够并排,并且能够设置宽高,无论它原来是个div还是个span,所有标签,浮动之后,已经不区分行内、块级了 + +### 性质2:浮动的元素互相贴靠 + +我们给三个div均设置了`float:left;`属性之后,然后设置宽高 + +### 性质3:浮动的元素有"字围"效果 + +标准流中的文字不会被浮动的盒子遮挡住,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动 + +### 性质3:收缩 + +一个浮动的元素,如果没有设置width,那么将自动收缩为内容的宽度 + +## 浮动的清除 +### 方法1:给浮动元素的祖先元素加高度 + +如果一个元素要浮动,那么它的祖先元素一定要有高度,有高度的盒子,才能关住浮动 + +### 方法2:clear:both; + +clear就是清除,both指的是左浮动、右浮动都要清除,clear:both的意思就是:不允许左侧和右侧有浮动对象 + +### 方法3:隔墙法 +### 方法4:overflow:hidden; + +overflow即"溢出",hidden即"隐藏",overflow:hidden;所有溢出边框的内容,都要隐藏掉 + + +![1729172077999](image/20241016浮动笔记/1729172077999.png) +![1729172100986](image/20241016浮动笔记/1729172100986.png) + +# 作业1 +``` + + + + + +
+
+

logo

+

语言选择

+

导航条

+
+ +
+ +

大广告

+ +
+
+
+
+
+ +
+ +
+
+ +
+
+ + +作业2: + + + + + + + +``` + diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241018\345\256\232\344\275\215\347\254\224\350\256\260.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241018\345\256\232\344\275\215\347\254\224\350\256\260.md" new file mode 100644 index 0000000000000000000000000000000000000000..8e414d0692143e114051efd48694099baa64da4e --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241018\345\256\232\344\275\215\347\254\224\350\256\260.md" @@ -0,0 +1,245 @@ +# 定位属性 +css定位属性有三种: +1. 绝对定位:position: absolute +2. 相对定位:position: relative +3. 固定定位:position: fixed + +## 相对定位 +相对定位的元素会相对于它自己的原始位置进行偏移。这意味着,如果你给一个元素设置了top: 10px;和left: 20px;,它会从它在页面上原本应该出现的地方向下移动10像素,向右移动20像素。重要的是,即使元素移动了,它原本占据的空间仍然保留,这就意味着它不会影响到页面上其他元素的布局。 +### 相对定位的定位值 +``` +- left:盒子右移 +- right:盒子左移 +- top:盒子下移 +- bottom:盒子上移 +PS:负数表示相反的方向。 +``` + +## 绝对定位 +绝对定位的元素会相对于最近的设置了定位的祖先元素进行偏移。如果没有这样的祖先元素,它会相对于文档的元素进行定位。与相对定位不同,绝对定位的元素会从文档流中移除,这意味着它不再占据原来的空间,可能会导致页面上其他元素的布局发生变化。 +## 相对定位和绝对定位区别: +相对定位不会改变元素在文档流中的状态,而绝对定位会将元素从文档流中移除。 + +相对定位保留元素原来的空间,绝对定位不保留。 + +绝对定位的元素位置是相对于它的定位祖先元素,如果没有定位祖先元素,则相对于元素。 + +## 固定定位position: fixed +固定定位概念语法 + +固定定位 是 固定在屏幕中的某个位置 , 即使拖动滚动条 , 固定定位的元素仍然保持位置不变 ; + +固定定位 完全脱离 标准流 , 不占用 布局中的位置 , 漂浮在任何元素上方 ; + +固定定位 只相对于 浏览器可视窗口 进行定位 , 定位的方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; + +固定定位 与 父元素没有任何关系 ; + +固定定位 与 滚动条滚动没有任何关系 ; + +固定定位的元素 始终显示在浏览器可视窗口的固定位置 , 不会改变 ; + +注意相对的是 浏览器可视窗口 , 不管浏览器大小如何 , 都是基于可视窗口显示 ; + +固定定位 的 本质是一种 特殊的绝对定位 ; +固定定位语法: +``` +选择器{ + posititon:fixed; + left: 0px; + top:0px; +} +``` +# 作业1: +![1729341897431](image/20241018定位笔记/1729341897431.png) + +``` + + + +
+

8888

+ + +``` +# 作业2![1729341915787](image/20241018定位笔记/1729341915787.png) + +``` + + + +
8888888
+
+fffffffffffffff&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& +fffffffffffffffff &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+fffffffffffffffff&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& +fffffffffffffffff&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+fffffffffffffffff&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& +fffffffffffffffff&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+fffffffffffffffff&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+fffffffffffffffff&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+ffffffffffffffffff&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+ffffffffffffffff&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& +ffffffffffffffff&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
+ +
+ + + +``` + + +# 作业3: +![1729342275963](image/20241018定位笔记/1729342275963.png) + +``` + + + +
+

你好

+

嗨放派

+ +
+ + + ``` + +# 万达题 +![1729341958746](image/20241018定位笔记/1729341958746.png) + ``` + + + +
+
+
+ +
+
广东深圳宝安区建安一路海雅缤纷城4楼
+
+

【海雅缤纷城】万达影城(深圳海雅广场...

+
单人电影票,可观看2D +
+ ¥35¥80 + 已售225 +
+
+
+
+ + +```` \ No newline at end of file diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241021\345\256\232\344\275\215\345\222\214\351\200\211\346\213\251\345\231\250.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241021\345\256\232\344\275\215\345\222\214\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..1f6d99793d792c3926404dd84710661f18992321 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/20241021\345\256\232\344\275\215\345\222\214\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,85 @@ +# 固定定位 +概念:就是相对浏览器窗口进行定位。无论页面如何滚动,这个盒子显示的位置不变。 +## 固定定位用途: +1. 网页右下角的“返回到顶部 +2. 顶部导航条 +z-index属性: +# z-index属性: +* 概念:表示谁压着谁。数值大的压盖住数值小的。 +* 特点: +1. 属性值大的位于上层,属性值小的位于下层。 + +2. z-index值没有单位,就是一个正整数。默认的z-index值是0。 + +3. 如果大家都没有z-index值,或者z-index值一样,那么在HTML代码里写在后面,谁就在上面能压住别人。定位了的元素,永远能够压住没有定位的元素。 + +4. 只有定位了的元素,才能有z-index值。也就是说,不管相对定位、绝对定位、固定定位,都可以使用z-index值。**而浮动的元素不能用**。 + +5. 从父现象:父亲怂了,儿子再牛逼也没用。意思是,如果父亲1比父亲2大,那么,即使儿子1比儿子2小,儿子1也能在最上层。 + +* 层级性: +1. 必须有定位(除去static) +2. 用`z-index`来控制层级数。 + +# css3选择器 +## 选择器分类 +1. 类选择器:以点(.)开头,后跟类名,用于选择具有特定类的元素。 + +2. ID选择器:以井号(#)开头,后跟ID名,用于选择具有特定ID的单个元素。 + +3. 属性选择器:通过元素的属性和属性值来选择元素,例如[attribute=value]。 + +4. 后代选择器:使用空格分隔元素名称,选择特定元素的后代元素。 + +5. 子元素选择器:使用大于号(>)分隔元素名称,选择特定元素的直接子元素。 + +6. 相邻兄弟选择器:使用加号(+)分隔元素名称,选择紧邻特定元素之后的元素。 + +7. 通用兄弟选择器:使用波浪号(~)分隔元素名称,选择特定元素之后的所有兄弟元素。 +## 常用选择器 + +``` + div 标签选择器 + + .box 类名选择器 + + #box id选择器 + + div p 后代选择器 + + div.box 交集选择器 + + div,p,span 并集选择器 + + div>p 子代选择器 + + * : 通配符 + + div+p: 选中div后面相邻的第一个p + + div~p: 选中的div后面所有的p + +``` +## 属性选择器 +标志性符号是 `[]`。 +匹配含义: + +``` +^:开头 $:结尾 *:包含 +``` + +格式: + +- `E[title]` 选中页面的E元素,并且E存在 title 属性即可。 + +- `E[title="abc"]`选中页面的E元素,并且E需要带有title属性,且属性值**完全等于**abc。 + +- `E[attr~=val]` 选择具有 att 属性且属性值为:用空格分隔的字词列表,其中一个等于 val 的E元素。 + +- `E[attr|=val]` 表示要么是一个单独的属性值,要么这个属性值是以“-”分隔的。 + +- `E[title^="abc"]` 选中页面的E元素,并且E需要带有 title 属性,属性值以 abc 开头。 + +- `E[title$="abc"]` 选中页面的E元素,并且E需要带有 title 属性,属性值以 abc 结尾。 + +- `E[title*="abc"]` 选中页面的E元素,并且E需要带有 title 属性,属性值任意位置包含abc。 diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/9.04.md" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/9.04.md" new file mode 100644 index 0000000000000000000000000000000000000000..6df63be15bc5fbff9e7d49e2d6569af223028824 --- /dev/null +++ "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/9.04.md" @@ -0,0 +1,47 @@ +斜体: *斜体* + +粗体:**粗体** + +# 一级标题 +## 二级标题 +***粗斜体*** + +有序列表: +1. 软件3班 +2. 软件4班 +3. 软件5班 + +5) 软件53班 +6) 软件23班 +7) 软件24班 + +无序列表: ++ 额外 ++ 列表 ++ 列表 + +- 列表 +- 列表 +- 列表 + +* 列表 +* 列表 +* 列表 + +> 我是一段有感谢 + +dom标签是指font + +我是百度 + +{我是百度}(https://baidu.com) + +``` js +console.log("我是超级英雄") +``` + +|一级 | 二级| 三级| +|:- |:-: | -:| +|我是超级英雄| 索拉卡|数据库规划| + +下课了 diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241016\346\265\256\345\212\250\347\254\224\350\256\260/1729172077999.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241016\346\265\256\345\212\250\347\254\224\350\256\260/1729172077999.png" new file mode 100644 index 0000000000000000000000000000000000000000..5a54e830fc923290b7ba770c784f3db72357a35c Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241016\346\265\256\345\212\250\347\254\224\350\256\260/1729172077999.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241016\346\265\256\345\212\250\347\254\224\350\256\260/1729172100986.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241016\346\265\256\345\212\250\347\254\224\350\256\260/1729172100986.png" new file mode 100644 index 0000000000000000000000000000000000000000..d2ec67438ab8ac14005e081da9a6976e7fb135e1 Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241016\346\265\256\345\212\250\347\254\224\350\256\260/1729172100986.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729341897431.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729341897431.png" new file mode 100644 index 0000000000000000000000000000000000000000..d653a57d3bf5c42b84c1c539455056f51fe8816b Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729341897431.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729341915787.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729341915787.png" new file mode 100644 index 0000000000000000000000000000000000000000..b5b1c6da040957552d3e7f5434f9bcadba1560dc Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729341915787.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729341958746.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729341958746.png" new file mode 100644 index 0000000000000000000000000000000000000000..cf7d50c231ae849ed77d986ca72b51d2ccde5c88 Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729341958746.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729342275963.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729342275963.png" new file mode 100644 index 0000000000000000000000000000000000000000..f9468a38f6e0fb3e33fe9a8750e950d8783cb29c Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/1729342275963.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/\344\275\234\344\270\2323.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/\344\275\234\344\270\2323.png" new file mode 100644 index 0000000000000000000000000000000000000000..f9468a38f6e0fb3e33fe9a8750e950d8783cb29c Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/20241018\345\256\232\344\275\215\347\254\224\350\256\260/\344\275\234\344\270\2323.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\345\261\217\345\271\225\346\210\252\345\233\276.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\345\261\217\345\271\225\346\210\252\345\233\276.png" new file mode 100644 index 0000000000000000000000000000000000000000..cfbfbaf48e3de7bc09d28b3b473d71ad6c3e4090 Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\345\261\217\345\271\225\346\210\252\345\233\276.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\346\225\210\346\236\234\345\233\276.png" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\346\225\210\346\236\234\345\233\276.png" new file mode 100644 index 0000000000000000000000000000000000000000..9aa47e66c8f16d2e10a25704c4bdf4b001270767 Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\346\225\210\346\236\234\345\233\276.png" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\344\275\215\347\275\256.jpg" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\344\275\215\347\275\256.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..b9132dd1427b9d97cb269cf0b54f68f781b79345 Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\344\275\215\347\275\256.jpg" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\345\233\276\347\211\207.jpg" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\345\233\276\347\211\207.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..f3504cb80fdb78688cd159dc37ffc465fa15133b Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\345\233\276\347\211\207.jpg" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\345\260\272\345\257\270.jpg" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\345\260\272\345\257\270.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..97ed3bf672a8a27c52d49898248fef1c9b94110a Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\345\260\272\345\257\270.jpg" differ diff --git "a/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\351\207\215\345\244\215.jpg" "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\351\207\215\345\244\215.jpg" new file mode 100644 index 0000000000000000000000000000000000000000..bd5f83b2f93163a0f7ac09415af2c2c1ddbefcae Binary files /dev/null and "b/\344\276\257\345\207\244\351\230\263/\347\254\224\350\256\260/image/img/\350\203\214\346\231\257\351\207\215\345\244\215.jpg" differ