- 博客(25)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 Day5-PC端网页特效
Day5-PC 端网页特效一、元素偏移量 offset 系列1.1 offset 概述1.2 offset 与 style 区别1.3 案例-获取鼠标在盒子内的坐标1.4 案例-模态框拖拽1.5 京东放大镜效果二、元素可视区client系列2.1 client系列一、元素偏移量 offset 系列1.1 offset 概述offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。offset 系列常用属性：<!DOCTYPE htm
2023-03-15 11:16:22
101
原创 Day4-DOM4、BOM1
BOM（Browser Object Model）：即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。DOM和BOM的区别BOM 的构成BOM 比 DOM 更大，它包含 DOMwindow 对象是浏览器的顶级对象，它具有双重角色：1.它是 JS 访问浏览器窗口的一个接口。2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
2023-03-11 17:09:39
120
原创 Day3-DOM3
node.removeChild(child)：从 DOM 中删除一个子节点，返回删除的节点1.当我们把文本域里面的值赋值给li 的时候，多添加一个删除的链接2.需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的li3.阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;node.cloneNode()注意：1.如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。2.如果括号参数为 true
2023-03-02 15:11:24
94
原创 Day2-DOM2
获取H5自定义属性兼容性获取H5新增或者--ie11才开始支持如果自定义属性里面有多个 - 连接的单词，我们获取的时候采用-驼峰命名法，例子如代码所示< body >
2023-02-27 10:52:36
84
原创 Day1-DOM1
文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM 树文档：一个页面就是一个文档，DOM 中使用 document 表示元素：页面中的所有标签都是元素，DOM 中使用 element 表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示。
2023-02-25 10:45:52
46
原创 Day05-对象
*区别：**伪数组比真数组少了一些 pop() push() 等方法。// 定义方法---方法名：function() {}// 2. 访问属性 得到值 对象['属性名']// 1. 访问属性 得到值 对象.属性名。// 调用方法 对象.方法名()2.方法二：对象[‘属性名’]1.方法一：对象.属性名。
2023-02-01 17:57:43
113
原创 Day04-函数
2.函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行 3.return会立即结束当前函数。4.函数可以没有 return，这种情况函数默认返回值为 undefined。1.在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用。4.命名建议：常用动词约定。1.和变量命名基本一致。2.尽量小驼峰式命名法。
2022-11-01 16:37:27
39
原创 Day03-循环和数组
它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交换过来。这个算法的名字由来是因为越小的元素会经由交换慢慢“浮”到数列的顶端。比如数组 [2,3,1,4,5] 经过排序成为了 [1,2,3,4,5] 或者 [5,4,3,2,1]。deleteCount:表示要移除的数组元素的个数，如果省略则默认从指定的起始位置删除。将一个或多个元素添加到数组的末尾，并返回该数组的新长度。将一个或多个元素添加到数组的开头，并返回该数组的新长度。：数组中数据的个数，通过数组的length属性获得。
2022-10-23 17:38:26
56
原创 Day01-变量、数据类型
目标：初步了解 JavaScript1.JavaScript （是什么？）是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2.作用（做什么？）网页特效 (监听用户的一些行为让网页作出对应的反馈)表单验证 (针对表单数据的合法性进行判断)数据交互 (获取后台的数据, 渲染到前端)服务端编程 (node.js)3.JavaScript的组成（有什么？）规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等。
2022-09-20 17:00:56
75
原创 Day07-响应式
目标：能够根据设备宽度的变化，设置差异化样式媒体特性常用写法：max-widthmin-width完整写法：关键词：and、only、not媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。css属性都有层叠性，要注意书写顺序外链式CSS引入还能实现简单的隐藏功能目标：知道 UI框架的作用UI框架概念：将常见效果进行统一封装后形成的一套代码, 例如：BootSt
2022-09-11 21:56:35
113
原创 Day06-移动适配（vw/vh）
目标：能够使用vw单位设置网页元素的尺寸相对单位：相对视口的尺寸计算结果vw：viewport width1vw = 1/100视口宽度vh：viewport height1vh = 1/100视口高度目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果vw单位尺寸1.确定设计稿对应的vw尺寸 （1/100视口宽度）查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）2.vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )vh单位尺寸
2022-09-10 19:38:02
185
原创 Day05-移动适配
查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10。核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。/* 1. 不同的视口,HTML标签字号不同, 字号是视口宽度的1/10 *//* 1. 不同的视口,HTML标签字号不同, 字号是视口宽度的1/10 *//* 使用媒体查询, 根据不同的视口宽度, 设置不同的跟字号 */
2022-09-09 11:29:36
107
原创 Day04-Flex布局补充+实战演练
orders.htmlbase.cssorders.css二、Flex布局补充1.1 主轴方向目标：使用flex-direction改变元素排列方向主轴默认是水平方向, 侧轴默认是垂直方向修改主轴方向属性: flex-direction目标：使用flex-wrap实现弹性盒子多行排列效果弹性盒子换行显示 : flex-wrap: wrap;调整行对齐方式 ：align-content，取值与justify-content基本相同center.htmlbase.csscenter.css
2022-09-07 21:03:37
456
原创 Day03-移动端布局
PC端网页和移动端网页的有什么不同？1.PC屏幕大，网页固定版心2.手机屏幕小， 网页宽度多数为100%如何在电脑里面边写代码边调试移动端网页效果？谷歌模拟器目标：使用谷歌模拟器调试移动端网页目标：了解屏幕尺寸概念概念屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量目标：了解移动端主流设备分辨率PC分辨率：1920 * 10801366 * 768……缩放150%：（1920/150%）*（1080/150%）总结：硬件分辨率（出厂设置）缩放调节的分辨率（软件设置）分辨率分类：
2022-09-04 22:03:22
227
原创 Day02-空间转换+动画
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。空间转换也叫3D转换属性：transform语法：transform: translate3d(x, y, z);transform: translateX(值);transform: translateY(值);transform: translateZ(值);取值（正负均可）：1.像素单位数值2.百分比属性（添加给父级）：perspective: 值;取值：像素单位数值， 数值
2022-09-03 15:27:20
122
原创 Day01-css基础补充
字体图标1.字体图标展示的是图标，本质是字体。2.处理简单的、颜色单一的图片字体图标的优点：Ø 灵活性：灵活地修改样式，例如：尺寸、颜色等Ø 轻量级：体积小、渲染快、降低服务器请求次数Ø 兼容性：几乎兼容所有主流浏览器使用方便：1.下载字体包2.使用字体图标字体图标下载地址：图标库Iconfont下载字体包步骤：登录 → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地使用字体图标：1.Unicode编码2.类名使用字体图标 - Unicode编码
2022-08-31 19:43:11
44
原创 Day08-CSS样式补充-小兔鲜准备
场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度例如：需要在网页中展示8张小图片• 8张小图片分别发送 → 发送8次• 合成一张精灵图发送 → 发送1次场景：把页面的主体内容约束在网页中间作用：让不同大小的屏幕都能看到页面的主体内容代码：注意点：版心类名常用：container、wrapper、w 等。...
2022-08-27 16:54:41
111
原创 Day07-CSS布局-定位+装饰
1.标准流块级元素独占一行 → 垂直布局行内元素/行内块元素一行显示多个 → 水平布局2.浮动可以让原本垂直布局的 块级元素变成水平布局3.定位可以让元素自由的摆放在网页的任意位置一般用于 盒子之间的层叠情况1.可以解决盒子与盒子之间的层叠问题• 定位之后的元素层级最高，可以层叠在其他盒子上面2.可以让盒子始终固定在屏幕中的某个位置1.设置定位的方式：position2.设置偏移值：水平+垂直就近各取一个➢ 介绍：静态定位是默认值，就是之前认识的标准流。➢ 代码：position:sta
2022-07-25 00:42:26
251
原创 Day06-CSS布局-浮动
目标：能够使用 结构伪类选择器 在HTML中定位元素作用与优势：1.作用：根据元素在HTML中的结构关系查找元素2.优势：减少对于HTML中类的依赖，有利于保持代码整洁3.场景：常用于查找某父级选择器中的子元素选择器➢ n的注意点：1.n为：0、1、2、3、4、5、6、……2.通过n可以组成常见公式➢ 问题：在下列案例中，如果需要找到第一个a标签，如何去查找？➢ 选择器：➢ 区别：• :nth-child → 直接在所有孩子中数个数• :nth-of-type → 先通过该 类型 找
2022-07-10 00:37:29
69
原创 Day05-CSS布局-盒子模型
➢ 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式➢ 优先级公式：• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important➢ 注意点：➢ 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效➢ 权重叠加计算公式：（每一级之间不存在进位）➢ 比较规则：➢ 权重计算题解题步骤：➢ 注意点：• 实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己
2022-07-04 23:56:31
292
原创 Day04-CSS基础（选择器进阶+背景属性+元素显示模式+三大特性）
作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素选择器语法：选择器1 选择器2 { css }结果：在选择器1所找到标签的后代（儿子、孙子、重孙子）中，找到满足选择器2的标签，设置样式注意点：作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素选择器语法：选择器1 > 选择器2 { css }结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式注意点：作用：同时选择多组标签，设置相同的样式选择器语法：选择器1 ， 选择器2 { css
2022-06-30 19:30:16
228
原创 Day03-CSS基础（基础选择器+字体文本相关样式）
CSS中文名：层叠样式表CSS的作用：给页面中的HTML标签设置样式CSS常见属性：CSS的语法规则：css写在style标签中，style标签一般写在head标签里面，title标签下面CSS常见的三种引入方式特点区别有哪些？结构：标签名 { css属性名：属性值； }注意点：结构：.类名 { css属性名：属性值； }注意点：结构：#id属性值 { css属性名：属性值； }注意点：补充：类与id的区别class类名与id属性值的区别：• class类名相当于姓名，可以重复，一个标签可
2022-06-29 00:06:41
217
原创 Day02-HTML基础
无序列表由几个标签组成？分别表示什么？无序列表标签的嵌套规范是什么？有序列表由几个标签组成？分别表示什么？有序列表标签的嵌套规范是什么？自定义列表由几个标签组成？分别表示什么？自定义列表的标签嵌套规范是什么？无序列表最常用，有序列表偶尔用，自定义列表底部导航用完成一个标准的表格，需要由几个标签组成？分别表示什么？表格基本标签的嵌套规范是什么？table>tr>td注意点：实际开发时针对样式效果推荐用CSS设置注意点：注意点：5.1 合并单元格合并单元格的步骤分哪几步？注意点：只有同
2022-06-25 00:17:23
1014
原创 Day01-HTML初识
问题1：网页由哪些部分组成？答：文字、图片、音频、视频、超链接问题2：我们看到的网页背后本质是什么？答：前端程序员写的代码问题3：前端的代码是通过什么软件转换成用户眼中的界面的？答：通过浏览器转化（解释和渲染）成用户看到的网页五大浏览器有哪些？相同的网页在不同的浏览器中显示效果会完全一致吗？答：因为不同浏览渲染引擎不同，解析的效果会存在差异前端工程师日常推荐使用哪一个浏览器？答：谷歌浏览器（Chrome）Web标准中分成三个构成：............
2022-06-22 22:39:05
125
Day03-css基础
2022-06-29
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人