内容
称为元素 + * 属性：给每一个标签所做的辅助信息 +段落标签 +
预定义/预格式化文本标签（可以使空格表现出来） + ``` + + ```js + 1. 段落标签+ 段落，是英语“paragraph“缩写。 + eg:
中华人民共和国
+ + 2. 水平线标签
+ 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明. + (1) 属性： + ① align="属性值"：设定线条置放位置。属性值可选择：left right center。 + ② size="2" ：设定线条粗细。以像素为单位，内定为2 + ③ width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。 + ④ color="#0000FF"：设置线条颜色。 + ⑤ noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。 + eg:
+ + 3. 换行标签
+ + 4.和 标签 + (1)div标签：可以把标签中的内容分割为独立的区块。必须单独占据一行。 + + (2)span标签：和div的作用一致，但不换行。 + + div和span的区别 + 和唯一的区别在于：是不换行的，而是换行的。 + + 5. 居中+ + + + + + 6. 预定义(预格式化)标签+ 含义：将保留标签内部所有的空白字符(空格、换行符)，原封不动地输出结果（告诉浏览器不要忽略空格和空行）。 + 说明：真正排网页过程中，标签几乎用不着。 效果演示： + ``` + + ```js + HTML标签是分等级的，HTML将所有的标签分为两种： + 1. 文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input） + 2. 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。 + **p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。错误写法：（尝试把 h 放到 p 里） + ``` + +# 二.作业 +1.  +2. 代码 +```html + + +++ +软件工程学院
+
+软件技术
+++ + +``` + + + + + + + + + + + + + + + + + + + + + diff --git "a/\346\236\227\344\275\231\345\200\251/20240913\345\255\227\344\275\223\345\255\227\347\254\246\346\240\207\347\255\276.md" "b/\346\236\227\344\275\231\345\200\251/20240913\345\255\227\344\275\223\345\255\227\347\254\246\346\240\207\347\255\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..1f1bcda075f42cd874f3a4481b63217f1cdaaf78 --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20240913\345\255\227\344\275\223\345\255\227\347\254\246\346\240\207\347\255\276.md" @@ -0,0 +1,58 @@ +# 一.笔记 +### 一.字体标签 +#### 特殊字符 +```js + ； 空格 +<； < (尖括号) +>； > +&； 符号& +"； 双引号 +&apos； 单引号 +©； 版权c +&trade； 商标sm +&#数字； 端口号 +&sup； 平方上标 + +<u> 下划线() +<s>/<del></del> 文字删除线（+ 软件技术 + +/） +<i>/<em> 斜体(/) +``` +```js + eg: + 3的平方： 3 &sup；2； + 32 + 水的化学式：H2O + + 斜体：font-style：italic + 删除线：text-decoration：soild + + !写样式时：id-#，class-. +``` + +### 二.超连接 + ```js + 1. 外部链接 + + + + 2. 锚链接 + 给超链接取一个名字，作用是早本页面或者其他页面不同位置进行跳转 + 顶部 + ... + 回到顶部 + + 属性： + ① href：目标URL + ② title：悬停文本(鼠标悬停在上面显示的文本) + ③ name：主要用于设置一个锚点名称 + target："_blank" 打开一个全新标签页 + + ``` +### 三.图片标签 +```js ++ | + ^ alt="图片不显示时，展示的文字" +``` + + diff --git "a/\346\236\227\344\275\231\345\200\251/20240914\345\210\227\350\241\250+\350\241\250\346\240\274\346\240\207\347\255\276.md" "b/\346\236\227\344\275\231\345\200\251/20240914\345\210\227\350\241\250+\350\241\250\346\240\274\346\240\207\347\255\276.md" new file mode 100644 index 0000000000000000000000000000000000000000..3888489765d791cc8116039940a7f3b3fba01c9c --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20240914\345\210\227\350\241\250+\350\241\250\346\240\274\346\240\207\347\255\276.md" @@ -0,0 +1,120 @@ +# 一.笔记 +### 列表标签 + ```js +
,
,
+ + 1.无序列表
+
+ +
+ 去除前面无序符号：list-style-type：none; + 将小圆点包含在元素内部：list-style-position：inside; + + 2.有序列表+
+ +
+ + 3.定义列表+
- 列表的标题 +
- 列表的内容 + + 4.表格标签
+
行， 单元格， 加粗, 表格标题 + border:1px solie black; 边框设为1像素，实线，黑色 + border-collapse:collapse; 折叠 + ``` + +# 二.作业 +1.  +2. 代码 +```html + + + + ++ +``` \ No newline at end of file diff --git "a/\346\236\227\344\275\231\345\200\251/20240918\350\241\250\345\215\225+\351\253\230\344\272\256and\346\214\211\351\222\256\346\240\267\345\274\217.md" "b/\346\236\227\344\275\231\345\200\251/20240918\350\241\250\345\215\225+\351\253\230\344\272\256and\346\214\211\351\222\256\346\240\267\345\274\217.md" new file mode 100644 index 0000000000000000000000000000000000000000..570ef686f0b9d0461260a572dc073dfedb2cd968 --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20240918\350\241\250\345\215\225+\351\253\230\344\272\256and\346\214\211\351\222\256\346\240\267\345\274\217.md" @@ -0,0 +1,191 @@ +## 目录 + 一. 表单标签 <form> + + 二. 输入标签(文本框) <input> + + 三. 作业（表格样式+表单按钮样式） + + +### 一.表单标签 <form> + ```js + 1. 属性： + ① name/id :表单的名称 + ② action + ③ method :表单数据提交方式-get(默认)/post + ``` + + +### 二.输入标签(文本框) <input> + ```js + 1. 提示词 placeholder="提示词" + + + 2. 单选框 radio + + **在单选性别时，要注意给name添值 name="gender" 两个都要一样 + **或者其他方法：使用标签 + + 3. 复选框 checkbox + + + 4. 下拉框 + + 5. 多行文本 textarea + + + 6. 文件 file + + + 7. 日历 data + + + 8. 系统时间 + + + 9. 隐藏 hidden + + 10. 按钮 + 重置 reset + 提交 submit + 按钮 button + + ``` + + +### 三.作业（表格样式+表单按钮样式） +表格高亮样式 +1. 图片显示 + [表格高亮](http://sjqofutsr.hn-bkt.clouddn.com/image.png) +2. 表格样式 +```js + + + + + + 表格高亮 + + + ++
+ + +``` + + +表单按钮样式 +1. 图片显示 + [按钮样式](http://sjqofutsr.hn-bkt.clouddn.com/image-1.png) +2. 主要代码 +```js + + + + + ++ +星期一 +星期二 +星期三 +星期四 +星期五 + ++ +美术 ++ 美术 +音乐 +音乐 ++ +语文 +数学 +语文 ++ 数学 ++ +历史 +政治 +历史 +政治 +政治 ++ +数学 +体育 ++ 体育 +体育 ++ + + + ++ 英语 +语文 +英语 +英语 +表单按钮 + + + + + + +``` \ No newline at end of file diff --git "a/\346\236\227\344\275\231\345\200\251/20240920\350\241\250\345\215\225+\347\231\273\345\275\225.md" "b/\346\236\227\344\275\231\345\200\251/20240920\350\241\250\345\215\225+\347\231\273\345\275\225.md" new file mode 100644 index 0000000000000000000000000000000000000000..b3240aec9206975c1a76aa8c04ae671ebca39b7b --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20240920\350\241\250\345\215\225+\347\231\273\345\275\225.md" @@ -0,0 +1,236 @@ +## 一.笔记 +### 表单元素(标签) +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 + +``` + +## 二.作业 +### 1.登录页面 +1. 效果：[登录页面效果图](http://sjqofutsr.hn-bkt.clouddn.com/%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.png) +2. 代码： +```html + + + + + + ++ +``` + +### 2.跑马灯 +1. 动图样式：[跑马灯效果图](http://sjqofutsr.hn-bkt.clouddn.com/%E8%B7%91%E9%A9%AC%E7%81%AF.gif) +2. 代码： +```html + + + ++ ++++ + +Login
++ + + + + +++ ++++ +``` + diff --git "a/\346\236\227\344\275\231\345\200\251/20240923\346\213\226\346\213\275+\345\255\227\344\275\223\346\226\207\346\234\254\345\261\236\346\200\247.md" "b/\346\236\227\344\275\231\345\200\251/20240923\346\213\226\346\213\275+\345\255\227\344\275\223\346\226\207\346\234\254\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..ac0630099931db9cf3b9e76c26588a4b7f829baf --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20240923\346\213\226\346\213\275+\345\255\227\344\275\223\346\226\207\346\234\254\345\261\236\346\200\247.md" @@ -0,0 +1,106 @@ + +### 1.拖拽元素 draggable +(1)可以拖拽一个logo开启新页面 +(2)draggable="true" +举例： +```html + + + + + +``` +(3)拖拽元素的事件监听 +① ondragstart 当拖拽开始时调用 +② ondragleave 当鼠标离开拖拽元素时调用 +③ ondragend 当拖拽结束时调用 +④ ondrag 整个拖拽过程中都会调用 +代码演示： +```html + + + + + + + + +``` + +### 2.历史 + +界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。 + +在HTML5中可以通过 `window.history` 操作访问历史状态，让一个页面可以有多个历史状态 + +`window.history`对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。 + +- window.history.forward(); // 前进 + +- window.history.back(); // 后退 + +- window.history.go(); // 刷新 + +- window.history.go(n); //n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。 + +- 通过JS可以加入一个访问状态 + +- history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态) + +### 3. css:字体属性和文本属性 +#### 绝对单位 + in cm mm pt pc +#### 相对单位 + px mm % +#### font 字体属性 +```css + p{ + /* 字体大小 */ + font-size：50px; + /* 行高 */ + line-height：30px; + /* 字体类型：如果没有幼圆就显示黑体，没有黑体就默认 */ + font-family：幼圆,黑体; + /* italic表示斜体，normal表示不倾斜 */ + font-style：italic; + /* 粗体 */ + font-weight:bold; + /* 小写变大写 */ + font-variant：small-caps; + } +``` \ No newline at end of file diff --git "a/\346\236\227\344\275\231\345\200\251/20240925\350\241\214\351\253\230+\346\226\207\346\234\254\345\261\236\346\200\247.md" "b/\346\236\227\344\275\231\345\200\251/20240925\350\241\214\351\253\230+\346\226\207\346\234\254\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..d01780c02fe58677067c6c6dd41d33e8637fae86 --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20240925\350\241\214\351\253\230+\346\226\207\346\234\254\345\261\236\346\200\247.md" @@ -0,0 +1,129 @@ +### 一.行高 line-height +```css +/* 1. 行高=盒子高度，可以使p在盒子的中间(即在盒子中上下居中) */ + + p{ + /* 直接使用数值 */ + line-height:1.5; + } + p{ + /* 使用长度值 */ + line-height:20px; + } + p{ + /* 使用百分比 */ + line-height:150%; + } + + +vertical-align：middle; /* 指定行级元素的垂直对齐方式*/ + +``` + +### 二.字号，行高，字体三大属性 +```css + (1)字号 + font-size:14px; + (2)行高 + hine-height:24px; + (3)字体 + font-family:"宋体"; + + 确定了是否加粗我们可以连写： + 是否加粗 字体/行高 字体 + font：加粗 24px/1.5 "字体" + font: 400 24px/1.5 "宋体" + + 如果引用网站的字体： + (1)下载字体道文字库中 + (2)引用外部路径 + font-family:外部字体名称 + src:url(./外部路径) + +``` + +### 三.文本属性(常见) +```css + + letter-spacing:0.5cm; /* 单个字母之间的间距 */ + word-spacing:1cm; /* 单词，词语之间的间距 */ + text-decoratin:none; /* nine 去除下划线；underline 下划线；line-through 中划线；overline 上划线 */ + text-line:12px; /* 文本首行缩进 */ + writing-mode:vertical-lt; /* 使文字竖着排列，水平/垂直 */ + +``` + +### 四.作业 +#### 作业1 +1. 显示图 !(文本-鼠标触碰变灰)[http://sjqofutsr.hn-bkt.clouddn.com/%E6%AE%B5%E8%90%BD%20%282%29.png] +2. 代码 +```html + + + ++ Habit cures habit +
+文本 text+ +``` + +#### 作业2 +1. 显示图 !(第一个字大写加粗)[http://sjqofutsr.hn-bkt.clouddn.com/%E6%AE%B5%E8%90%BD%E5%BC%80%E5%A4%B4.png] +2. 代码 +```html + + ++ + +``` + +#### 作业3 +1. 显示图 !(第一行变色)[http://sjqofutsr.hn-bkt.clouddn.com/%E7%AC%AC%E4%B8%80%E8%A1%8C%E5%8F%98%E8%89%B2.png] +2. 代码 +```html + + +这是文章的第一段
+这是文章的第二段
++ this is the first line of a poem, + and this is the second line. + continue adding more lines... ++ +``` diff --git "a/\346\236\227\344\275\231\345\200\251/20240929\346\265\256\345\212\250+\350\203\214\346\231\257\345\261\236\346\200\247.md" "b/\346\236\227\344\275\231\345\200\251/20240929\346\265\256\345\212\250+\350\203\214\346\231\257\345\261\236\346\200\247.md" new file mode 100644 index 0000000000000000000000000000000000000000..013bcd86dff32f1b7b2f432a5210f222ea3dea45 --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20240929\346\265\256\345\212\250+\350\203\214\346\231\257\345\261\236\346\200\247.md" @@ -0,0 +1,438 @@ +## 一.笔记 +### overflow 属性：溢出范围的内容如何解决 +1. 属性 +```css + 属性： + visible (看得见的)：默认值。多余部分会全部显示出来 + hidden (隐藏的)：不显示超过对象尺寸的内容（即超过部分隐藏） + auto (自动的)：如果不超出内容，则不显示滚动条;超出则使用滚动条 + scroll (纸卷)：无论是否超出，都显示滚动条 + +``` +2. 代码样式 +```html + + ++ 第一个图示：啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 +++ 第二个图示：啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 +++ 第三个图示：啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 ++ +``` +3. 图片显示效果 +  + +### 图片插入 + list-style-img：url(./) + +### 鼠标属性 cursor +``` + 1. auto :默认，浏览器根据当前情况自动确定光标类型 + 2. pointer：竖起一只手指的手型光标 + 3. hand：与pointer一样 +``` +### 滤镜 +```html + + style="filter：gray()" +``` + +## background 常见背景属性 +``` +1. background-color 设置背景颜色 +2. background-image 设置图片为背景 +3. background-repeat：no-reprad; 设置图片是否重复及如何重复，默认平铺满 + no-repeat 不要平铺 + repeat-x 横向平铺 + repeat-y 纵向平铺 +``` +### background-position 属性 +是指背景定位属性 +```html + 1. 像素值格式： + background-position：向右偏移量 向下偏移量 + 2. 单词格式 + background-position：左右单词 向下单词 + 左右：left，right，center 上下：top，botton，center + eg：'right top' 表示将图放到右边中间 + 'center center' 正中间 +``` +### background-attachment 属性 + fixed：背景固定，只有文字拉滚动条时会滚动 + scroll：与dixed相反，默认属性 + +### 通栏banner +在有宽度超大图片时使用，宽度随着屏幕变化而变化 +```css + div{ + height:465px; + background-position:center top; + background-imge:; + background-repeat:no-repeat; + } +``` + +## 二.作业 +### 基础1 +1. 图片 (基础1)[http://sjqofutsr.hn-bkt.clouddn.com/d91313679ce7eb4251137f959e55fe0.png] +2. 代码 +```html + + + +++ +``` + +### 基础2 +1. 图片 (基础2)[http://sjqofutsr.hn-bkt.clouddn.com/2.png] +2. 代码 +```html + + + +++ +``` +### 基础3 +1. 图片 (基础3)[http://sjqofutsr.hn-bkt.clouddn.com/3.png] +2. 代码 +```html + + + +++ +``` + +### 基础4 +1. 图片 (基础4)[http://sjqofutsr.hn-bkt.clouddn.com/4.png] +2. 代码 +```html + + + +++ +``` +### 基础5 +1. 图片 (基础5)[http://sjqofutsr.hn-bkt.clouddn.com/j5.png] +2. 代码 +```html + + + + + +``` +### 进阶1 +1. 图片 (进阶1)[http://sjqofutsr.hn-bkt.clouddn.com/jinjie1.png] +2. 代码 +```html + + + ++ ++ +``` + +### 进阶2 +1. 图片 (进阶2)[http://sjqofutsr.hn-bkt.clouddn.com/jinjie2.png] +2. 代码 +```html + + + ++ ++ +``` + +### 进阶3 +1. 图片 (进阶3)[http://sjqofutsr.hn-bkt.clouddn.com/jinjie3.png] +2. 代码 +```html + + + + + +``` + +### 进阶4 +1. 图片 (进阶4)[http://sjqofutsr.hn-bkt.clouddn.com/5.png] +2. 代码 +```html + + + +++ +``` + +### 进阶5 +1. 图片 (进阶5)[http://sjqofutsr.hn-bkt.clouddn.com/jinjie5.gif] +2. 代码 +```html + +``` + +### 高级1 +1. 图片 (高级1)[http://sjqofutsr.hn-bkt.clouddn.com/gao1.png] +2. 代码 +```html + + + + + + + +``` + +### 高级2 +1. 图片 (高级2)[http://sjqofutsr.hn-bkt.clouddn.com/gao2.png] +2. 代码 +```html + + + ++ ++ + +``` + +### 高级3 +1. 图片 (高级3)[http://sjqofutsr.hn-bkt.clouddn.com/gao3.png] +2. 代码 +```html + + + ++ ++ +``` + +### 高级4 +1. 图片 (高级4)[http://sjqofutsr.hn-bkt.clouddn.com/gao4.gif] +2. 代码 +```html + + + + + +``` + +### 高级5 +1. 图片 (高级5)[http://sjqofutsr.hn-bkt.clouddn.com/gao5.gif] +2. 代码 +```html + + + ++ ++ +``` \ No newline at end of file diff --git "a/\346\236\227\344\275\231\345\200\251/20240930\350\203\214\346\231\257\346\225\210\346\236\234.md" "b/\346\236\227\344\275\231\345\200\251/20240930\350\203\214\346\231\257\346\225\210\346\236\234.md" new file mode 100644 index 0000000000000000000000000000000000000000..e7afa6731380d6e5fa1f628776f13a5e94c22c8a --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20240930\350\203\214\346\231\257\346\225\210\346\236\234.md" @@ -0,0 +1,179 @@ +## 一.笔记 +### 1. background 综合属性 +```css + 1. 大属性 + background：pink url() no-repeat 100px 100px fixed; + (100px 100px 可以替换成 center) + 2. 小属性 + background-repeat: no-repeat; + background-position: center; + background-attachment: fixed; + background-color: pink; + background-image: url(); +``` + +### 2. background-size 属性: 背景尺寸 +1. cover ：图片始终充满容器;长宽不变;超出隐藏 +2. contain：完整地显示在容器;长宽不变;可能会导致容器部分空白 + +### 3. background-origin 属性 ： 背景原点 +定义： 控制背景从什么地方开始显示 +1. padding-box ： 默认值；内边距开始显示 +2. border-box : 边框开始显示 +3. content ： 内容区域开始显示 + +### 4. background-clip 裁剪 +定义：超出内容区域，将裁剪 +1. padding-box +2. border-box +3.content-box + +### 5.background-imge 渐变 +```css +1. linear-gradient (线性渐变) +2. radial-gradient (径向渐变) +3. linear-repeating-gradient (一段一段渐变) +(1) 线性渐变 + 语法：background-image：linear-gradient(方向，起始颜色，终止颜色) + （方向：to left，to right，to top，to bottom，角度30deg） +(2) 径向渐变 （围绕中心点渐变） + 语法： background-image：radial-radient(辐射的半径大小，中心位置，起始颜色，终止颜色) + （中心点：at left right top bottom center） + eg: + 1. 半径为100px，中心点在中间 + background-image：radial-gradient(100px,cener,red blue) + 2. 中心点在左上角 + background-image：radial-gradient(at left top,red blue) + 3. 不同颜色渐变 + background-image：radial-gradient(100px at center,red 0%，blue 30%，pink 60%，green 100%) + 4. 宽高不同，为椭圆 + background-image: radial-gradient(100px 50px at center, yellow, green); +``` + +### 6. clip-path: 裁剪出元素的部分区域做展示 +```cs + // 裁剪出圆形区域 + clip-path: circle(50px at 100px 100px); + transition: clip-path .4s; + + /* 鼠标悬停时，裁剪出更大的圆形 */ + clip-path: circle(80px at 100px 100px); +``` + +## 二.作业 +### 作业1 +1. 图片效果 (line-height)[http://sjqofutsr.hn-bkt.clouddn.com/19-0.png] +2. 代码 +```html + + +++ +``` + +### 作业2 +1. 图片 (滚动视差)[http://sjqofutsr.hn-bkt.clouddn.com/20-0.gif] +2. 代码 +```html + + + ++ 这是一段没有感情的文字 +
头部+ +内容+ +底部+ + +``` + +### 作业3 +1. 图片效果 (线性渐变-1)[http://sjqofutsr.hn-bkt.clouddn.com/21-1.png] + (线性渐变-2)[http://sjqofutsr.hn-bkt.clouddn.com/21-2.png] +2. 代码 +```html +1. + + +++ + +2. + + +++ +``` diff --git "a/\346\236\227\344\275\231\345\200\251/20241009\346\270\220\345\217\230+\351\200\211\346\213\251\345\231\250.md" "b/\346\236\227\344\275\231\345\200\251/20241009\346\270\220\345\217\230+\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..9ccef3ebda4d30628937bffdcb8698b8e134c251 --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20241009\346\270\220\345\217\230+\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,109 @@ +## 一.笔记 + +### 1.径向渐变 +```js + 语法： background-image：radial-radient(辐射的半径大小，中心位置，起始颜色，终止颜色) + （中心点：at left right top bottom center） + eg: + 1. 半径为100px，中心点在中间 + background-image：radial-gradient(100px,cener,red blue) + 2. 中心点在左上角 + background-image：radial-gradient(at left top,red blue) + 3. 不同颜色渐变 + background-image：radial-gradient(100px at center,red 0%，blue 30%，pink 60%，green 100%) + 4. 宽高不同，为椭圆 + background-image: radial-gradient(100px 50px at center, yellow, green); +``` +### 2. css语法 +```css + 1. 键值对形式 + 选择器{ + k: v; + } + + * 解释： + - 选择器代表页面上的某类元素，选择器后一定是大括号。 + - 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。 + - 冒号和属性值之间可以留一个空格（编程习惯的经验）。 + - 如果一个属性有多个值的话，那么多个值用**空格**隔开。 + + 2. 常见属性 + 字体颜色(c) + 字号大小(fos) + 背景颜色(bgc) + 加粗(fwb) + 不加粗(fwn) + 斜体(fsi) + 不斜体(fsn) + 下划线(tdu) + 没有下划线(tdn) + + 3. css书写方式 + 行内样式：在某个特定标签内使用style **属性**，只针对此标签 + 内嵌样式：在页面的head标签里采用 + + + 这四种状态必须按照固定的顺序写 + > a:link 、a:visited 、a:hover 、a:active +``` + +#### 4. 超链接的美化 +``` +**`a{}`和`a:link{}`的区别：** + + - `a{}`定义的样式针对所有的超链接(包括锚点) + - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点) + +我们一定要将a标签写在前面，将`:link、:visited、:hover、:active`这些伪类写在后面。 +``` +#### 5. 动态伪类 +``` + :hover` “悬停”：鼠标放到标签上的时候 + :active` “激活”： 鼠标点击标签，但是不松手时。 + :focus` 是某个标签获得焦点时的样式（比如某个输入框获得焦点） +``` +5.1 举例： +```html + +``` + + +## 二.作业 +```html + + + + +++ ++ + ++ ++ + + ++ ++ + + ++ ++ + ++ + ++ ++ ++ + ++ + ++ ++ ++ + + ++ + ++ ++ + + ++ + ++ + ++ ++ ++ ++ + + ++ + ++ + ++ ++ ++ + + ++ + ++ + ++ + + ++ ++ + ++ + + ++ + ++ ++ ++ + ++ + + ++ ++ ++ ++ + + + + + + ++ ++ + ++ + + + ++ + ++ ++ ++ ++ ++ + ++ + + + ++ ++ + + ++ + + + ++ ++ ++ + ++ + ++ + ++ + + ++ ++ ++ + + ++ + + ++ ++ + + + ++ ++ + + ++ + + + ++ +``` \ No newline at end of file diff --git "a/\346\236\227\344\275\231\345\200\251/20241012css\347\273\247\346\211\277\345\261\202\345\217\240\346\200\247+\346\235\203\351\207\215.md" "b/\346\236\227\344\275\231\345\200\251/20241012css\347\273\247\346\211\277\345\261\202\345\217\240\346\200\247+\346\235\203\351\207\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..6217c1ba397fe6f232cc407ac849033828cca331 --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20241012css\347\273\247\346\211\277\345\261\202\345\217\240\346\200\247+\346\235\203\351\207\215.md" @@ -0,0 +1,207 @@ +## 一.笔记 +### 1.css的继承性 +```html +div的继承性会使div里面的所有后代继承这个属性，三个p文字显示都为红色 + div{ + color：red; + } + ++ + + + + + ++ + ++``` +### 2.css的层叠性 +``` +层叠性：计算权重 +定义：就是css处理冲突的能力。 +``` +举例： +```js + p{color:red;} + .haha{color:green;} + #h{color:blue;} + +1
+2
+3
+++ + ** 最后为蓝色，在权重一致的情况下，red与green被blue覆盖了，最终显示为蓝色 +``` +计算权重：(重要) +```js +计算权重： + id选择器 + 类选择器，属性选择器，伪类选择器 + 标签选择器，伪元素选择器 +如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器） + +eg： + ① #box1 .haha p{color:red;} + // 1个id选择器，1个类选择器，一个标签选择器 记作：1.1.1 + + ② div div #box2 p{color:red;} + // 1个id选择器，0个类选择器，3个标签选择器 记作:1.0.3 + + ** 以上两个依次比对，①的权重大于②的权重，于是只显示①的属性 +``` +权重的两种情况：(非常重要) +@startmindmap +* css权重 + * 选中 + * 比权重 + * 权重不同，谁大听谁 + * 权重不同，谁写在后面听谁的 + * 未选中 + * 就近原则，谁描述的近听谁的 + * 如果一样，比较权重 + * 权重不同，谁大听谁 + * 权重相同，谁写的后面听谁的 +@endmindmap + +* 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。 +* 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的 +```js +(选中的是要设置的标签) +eg: 以上针对选中p或未选中p的情况 +什么颜色
+++``` + +## 二.作业 +```html + + + +什么颜色
+-----------------------1------------------
+ +++ ++ +Welcome
+This is the introduction section.
++ + +Post Title
+Post content...
++
+- Item 1
+- Item 2
+----------------------2------------------
+ + + +----------------------3------------------
+ + +-----------------------4------------------
+Special Title
+ +-----------------------5------------------
++
+ +- Item 1 +
++
+- Subitem 1
+- Subitem 2
+- Item 2 +
++
+- Subitem 3
+- Subitem 4
+-----------------------6------------------
++ ++ +``` \ No newline at end of file diff --git "a/\346\236\227\344\275\231\345\200\251/20241014\347\233\222\345\255\220\346\250\241\345\236\213.md" "b/\346\236\227\344\275\231\345\200\251/20241014\347\233\222\345\255\220\346\250\241\345\236\213.md" new file mode 100644 index 0000000000000000000000000000000000000000..469a2bb5a85b1317696f2551ad7814769aefc8fa --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20241014\347\233\222\345\255\220\346\250\241\345\236\213.md" @@ -0,0 +1,115 @@ +## 一.笔记 + +### 1. 盒子模型 +``` + 1. 盒子区域 + width：宽度 + height：高度 + padding：内边距 + margin:外边距 + border：边框 +``` +### 2. 标准盒子模型和IE盒子模型 +``` +区别： + 1. 在标准盒子中 + width和height指的是内容区域的宽度和高度。 + 增加内边距，边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。 + 2. 在IE盒子中 + width和height指的是内容区域+border+padding的宽度和高度。 +``` +### 3. 标签也有margin +``` +1. 标签不是占据整个页面的全部区域。 +2. 盒子最大的盒子是，即浏览器。 +``` +### 4. padding 内边距 +```js + 1. padding 区域也有颜色 + 内边距的背景颜色设置：padding-color：red; + + 2. padding 的方向 + padding-top 头部 + padding-right 右边 + padding-bottom 底部 + padding-left 左边 + (1)小属性 + 如以上所示 + (2)综合属性 + 写法：（上，右，下，左）顺时针方向，用空格隔开。margin也是一样 + ① 四个值的写法：上，右，下，左 + ② 三个值的写法：上，右和左，下(上，左右，下) + ③ 两个值的写法：上下，左右 + + 3. 用小属性层叠大属性 + eg： + padding：20px; + padding-left:30px; + * 该上右下还是20px，只有左边的为30px，不能反着写 + + 4. 默认带有padding元素 + 如果有默认带有padding元素时们可以使用通配符进行设置 + *{ + padding:0; + margin:0; + } +``` +### 5. border 边框 +```js + 1. border线型 + ① dotted 点状 + ② dashed 虚线 + ③ solid 实线 + ④ double 双层实线 + ⑤ groove 凹灰色线 + ⑥ ridge 凸灰色实线 + ⑦ inset 相框线 + ⑧ outset 阴影线 + ** 比较稳定的border-style就几个：solid、dashed、dotted。 + + 2. border是一个大综合属性 + eg： border：1px solid red; + border: 尺寸 线型 颜色; + (1)按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的） + border-width:10px; //边框宽度 + border-style:solid; //线型 + border-color:red; //颜色。 + 等价于： + border:10px solid red; + (2)按方向拆开：border-top、border-right、border-bottom、border-left。 + (3)按三要素和方向来拆：(就是把每个方向的，每个要素拆开。) + border-top-width:10px; + border-top-style:solid; + border-top-color:red; + + border可以没有： + + 3. boeder:none属性 + ① border可以没有： + border：none; + ② 可以某一边没有： + border-left：none; + ③ 可以设置某一边的宽度为0： + border-left-width：0; + + 4. border-image属性 + eg： border-image: url(.img.png) 30 round; +``` +### 5.1 举例1：利用border属性画一个三角形 +```html + + + + + +``` diff --git "a/\346\236\227\344\275\231\345\200\251/20241016\346\265\256\345\212\250.md" "b/\346\236\227\344\275\231\345\200\251/20241016\346\265\256\345\212\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..4cff06350a43ebf0c493c8a65db7316d09f7632c --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20241016\346\265\256\345\212\250.md" @@ -0,0 +1,284 @@ +## 一.笔记 +### 1.标准文档流的特性 +``` +(1)空白折叠现象：无论多少个空格、换行、tab，都会折叠为一个空格。 + eg：两张图片之间有空隙 +(2)高矮不齐，底边对齐 + eg：当出现一张图片与一条文字时，文字会与图片的底边对齐 +(3)自动换行，一行写不满，换行写 +``` +### 2.行内元素和块级元素区别 +``` +(1)行内元素：display：inline + 只占自身大小（从左到右） + 设置width，height无效 + 不能包含块元素 + a，b，am，i，span，strong... +(2)块级元素：display：block + 独占一行（自上而下排列） + 可以设置width，height + 可以包含行内元素及其其他块元素 + div,form,h1-h6,hr,p,table,ul... +(3)行内块元素：diaplay：inline-black + 不换行，能设置宽高 + buttom,ing,input... +``` +### 3.块级元素和行内元素可以相互转换 +``` +块级元素转换为行内元素 + 给要设置的元素添加display：inline +行内元素转换为块级元素： + 给要设置的元素添加display:block +``` +### 4.浮动（移民-脱离文档流） +``` +浮动性质： + 浮动元素脱标 + 浮动元素互相贴靠 + 浮动的元素有"字围" 效果 + 收缩 +浮动 +float：left，right +两个盒子中一个盒子设置浮动，那么设置的浮动的这个盒子就会覆盖到另一个盒子上 +``` +### 5.浮动的清除 +``` +(1) 父级元素设置宽高 +(2) 受影响的元素加clear属性 + clear：both（both无论左右浮动都清除） +(3)overfloat清除：父级不设height时使用 + 在父级元素中使用overfloaat：hidden；再将受影响的元素加clear：both +(4)伪对象方法 “::after” + 为父级标签添加伪类after，清空内容，并clear：both + con::after{ + con:" "; + overfloaat:hidden; + clear:both; + } +``` + + +## 二.作业 +### 浮动1 +1.  +2. 代码 +```html + + + ++ +``` +### 浮动2 +1.  +2. 代码 +```html + + ++ ++ ++logo
+语言选择
+导航条
+ ++ + ++ +大广告
+ + + ++ + + + ++ ++ +``` \ No newline at end of file diff --git "a/\346\236\227\344\275\231\345\200\251/20241018\345\256\232\344\275\215.md" "b/\346\236\227\344\275\231\345\200\251/20241018\345\256\232\344\275\215.md" new file mode 100644 index 0000000000000000000000000000000000000000..96a4d5fec057b9a5e7460e0e11c3e8f44e5c6ea1 --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20241018\345\256\232\344\275\215.md" @@ -0,0 +1,350 @@ +## 一.笔记 + +### position定位 +```html +(1)定位属性 + + position：absolute; + position：relative; + position：fixed; + +``` +### 1.相对定位 +```js + (0) 相对定位格式： + background-position:向右偏移量 向下偏移量; + (1)相对定位：不脱标，老家留坑，别人不会把它的位置挤走 + 让元素相对于自己原来的位置，进行位置调整（可用于盒子的位置微调）。 + 随着父级容器变化 + 定义了2个相对定位的盒子设在相同位置会挪开 + (2)相对定位的用途： + ① 微调元素 + ② 做绝对定位的参考，子绝父相 + (2)相对定位的定位值： + left ：盒子右移 + right：盒子左移 + top：盒子下移 + bottom：盒子上移 + // 负数表示相反的方向 + // eg： left: 200px等价于right: -200px +eg： + position: relative;/*相对定位：相对于自己原来的位置*/ + left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/ + top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/ + +``` + +### 2.绝对定位 +```js + 用于相互压盖(可有多个绝对定位) 区别于相对 + 随父级容器变化 + 在页面中随着滚动条变化而变化 + (1)定义：定义横坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或bottom表示 +  +eg： + position: absolute; /*绝对定位*/ + left: 10px; /*横坐标*/ + top/bottom: 20px; /*纵坐标*/ + + (2)绝对定位的参考点 + ① 如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角: + // 即会随着页面的拉动而发生改变，不是停留在远点不动 + ② 如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸，对应页面的左下角： + // 首屏：调整窗口的大小时-->原始的屏幕 +  +``` + +### 4.以盒子为参考点 +```js + 1. 定义：一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点。 + (子绝父相)：父级为相对位置，子级为绝对位置，子级在父级中的位置 + // 注意点： + (1) 要听最近的已经定位的祖先元素的，不一定是父亲，可能是爷爷： +通知公告更多>>+ ++++
+- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈2014年9月28日
+- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈2014年9月28日
+- 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈2014年9月28日
+相对定位 ++ 再比如： +没有定位 + 绝对定位，将以box1为参考，因为box2没有定位，box1就是最近的父辈元素 ++相对定位 ++ (2)不一定是相对定位，任何定位，都可以作为儿子的参考点： + 子绝父绝、子绝父相、子绝父固，都是可以给儿子定位的。但是在工程上，如果子绝、父绝，没有一个盒子在标准流里面了，所以页面就不稳固，没有任何实战用途。 + (3)绝对定位的儿子，无视参考的那个盒子的padding + +``` + +## 二.作业 +### 作业1 +1.  +2. 代码 +```html + + +相对定位 + 绝对定位，将以box2为参考，因为box2是自己最近的父辈元素 ++++ +``` + + +### 作业2 +1.  +2. 代码 +```html + + +8888+888++ 546444444444444555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555567546444444444444555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555567546444444444444555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555567546444444444444555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555567546444444444444555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555567546444444444445555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555675644444444444455555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555556754644444444444455555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555556754644444444444555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555567546444444444444555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555567546444444444444555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555567546444444444444555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555567546444444444444555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555555567756745645666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666354534544545 ++ +``` + + +### 作业3 +1.  +2. 代码 +```html + + +芜湖，吃饭了喂++ 我是提示文字 ++ +``` + + +### 作业4 +1.  +2. 代码 +```html + + ++付款图标
+存款图标
+删除图标
+粘贴图标
+笑脸图标
+ +``` + + +### 作业5 +1.  +2. 代码 +```html + + +编辑图标
+ ++ +``` + + +### 作业6 +1.  \ No newline at end of file diff --git "a/\346\236\227\344\275\231\345\200\251/20241021\345\256\232\344\275\215+\351\200\211\346\213\251\345\231\250.md" "b/\346\236\227\344\275\231\345\200\251/20241021\345\256\232\344\275\215+\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..67c73361f48cf932ea105eb995e64bdabe685bc7 --- /dev/null +++ "b/\346\236\227\344\275\231\345\200\251/20241021\345\256\232\344\275\215+\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,68 @@ +## 一.笔记 + +### 1. 固定定位 +``` + 1. 定义： + 相对浏览器窗口进行定位。无论页面怎么滚动，这个盒子显示的位置不变。 + 2. 用途： + 用途1：网页左下角的"返回到顶部" + eg： + 回到顶部 + 用途2：顶部导航条 +``` +### 2. 粘性定位 +``` + (1)sticky跟前面四个属性值都不一样，它会产生动态效果，很像relative和fixed的结合：一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）。 + + (2)粘性定位特点 + 以浏览器的可视窗口为参照点移动元素（固定定位特点） + 粘性定位占有原先的位置（相对定位特点） + 必须添加 top 、left、right、bottom 其中一个才有效 + + (3)粘性定位为什么不起作用 + 有时候设置会发现粘性定位不起作用，又找不到原因，可以看看有没有以下几点原因： + 1、父元素不能overflow:hidden或者overflow:auto属性。 + 2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位 + 3、父元素的高度不能低于sticky元素的高度 + 4、sticky元素仅在其父元素内生效 +``` +### 3. z-index属性 +``` + 1. 定义：表示谁压着谁。数值大的压盖住数值小的。 + 2. 特性： + (1) 属性值大的位于上层，属性值小的位于下层 + (2)z-index值没有单位，是一个正整数 + (3)只有定位了的元素才能有z-index值，浮动不能用 + 3. 层级 + (1) 必须有定位（static） + (2) 用在z-index来控制层级数 +``` + +### 4. 选择器 +``` + 1. 符号： + [] 表示可选项 + || 表示或者 + | 表示多选一 + ？ 0个或1个 + * 表示0个或多个 + {} 表示范围 + + 2. css3 选择器： + div>p 子代选择器 + div+p 选中div后面相邻的第一个p + div~p 选中的div后面所有的p + + 3. 属性选择器 + 标志性符号：[] + 匹配含义：^:开头 $:结尾 *：包含 + 格式： + 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。 + +``` \ No newline at end of file+ + + + + ++ + ++广东深圳宝安建安一路海雅缤纷城4楼