自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(40)
  • 收藏
  • 关注

原创 前端学习Day40

Day40:跟着视频教程进行网站设计的收尾工作,并尝试运行。

2024-08-31 14:18:52 201

原创 前端学习Day39

Day39:跟着视频教程进行网站设计。

2024-08-31 14:17:18 165

原创 前端学习Day38

Day38:跟着视频教程进行网站设计。

2024-08-31 14:16:22 218

原创 前端学习Day37

Day37:规划最终作品。

2024-08-31 14:12:03 195

原创 前端学习Day36

同样的将变量和函数组合到了一起并能通过this 实现数据的共享,所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的。就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依次调用就可以了。我们可以把那些不变的方法,直接定义在 prototype对象上,这样所有对象的实例就可以共享这些方法。构造函数和原型对象中的this 指向构造函数和原型对象中的this都指向实例化的对象。构造函数和原型对象中的this 都指向实例化的对象。构造函数体现了面向对象的封装特性;

2024-08-31 13:30:09 671

原创 前端学习Day35

includes(搜索的字符串【,检测位置索引号】)判断一个字符串是否包含在另一个字符串中,根据情况返回true或 false(重点)every检测数组所有元素是否都符合指定条件,如果所有元素都通过检测返回true,否则返回false(重点)find查找元素,返回符合测试条件的第一个数组元素值,如果没有符合条件的则返回undefined(重点)substring(需要截取的第一个字符的索引【,结束的索引号】)用于字符串截取(重点)返回新数组,返回的是处理之后的数组元素,想要使用返回的新数组。

2024-08-24 10:44:38 327

原创 前端学习Day34

被遍历的数组.forEach(function(当前数组元素,当前元素索引号){.赋值运算符=左侧的0用于批量声明变量,右侧对象的属性值将被赋值给左侧的变量。4.构造函数的作用:构造函数是来快速创建多个类似的对象,大写字母开头的函数。forEach()方法用于调用数组的每个元素,并将元素传递给回调函数。对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法。构造函数的属性和方法被称为静态成员(静态属性和静态方法).对象属性的值将被赋值给与属性名相同的变量。构造函数自动返回创建的新的对象公。

2024-08-24 10:43:41 259

原创 前端学习Day33

从根部扫描对象,能查找到的就是使用的,查找不到的就要回收。封闭数据,实现数据私有,外部也可以访问函数内部的变量。查找不到则会依次逐级查找父级作用域直到全局作用域。9.用var关键字声明变量会有变量提升。先把var变量提升到当前作用域于最前面。2.局部作用域声明的变量外部不能使用。函数提升能够使函数的声明调用更灵活;作用域链本质上是底层的变量查找机制。会优先查找当前函数作用域中查找变量。闭包=内层函数+外层函数的变量。只提升变量声明,不提升变量赋值。函数表达式不存在提升的现象;函数提升出现在相同作用域当中。

2024-08-24 10:42:34 275

原创 前端学习Day32

【a-z】表示a到z 26个英文字母都可以【a-zA-Z】表示大小写都可以。\W:除所有字母、数字和下划线以外的字符,相当于【^A-Za-z0-9_】\w:匹配任意的字母、数字和下划线,相当于【A-Za-z0-9_】\S:匹配非空格的字符,相当于【^itlrinlvf】\D:匹配所有O-9以外的字符,相当于【^0-9】\d:些配0-9之间的任一数字,相当于【0-9】【^a-Z】匹配除了小写字母以外的字符。【0-9】表示0~9的数字都可以。{n,}:重复n次或更多次。{n,m}:重复n到m次。

2024-08-24 10:41:34 225

原创 前端学习Day31

需要将复杂数据类型转换成JSON字符串,在存储到本地语法:JSON.stringify(复杂数据类型)可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在。可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在。存储:localStorage.setltem(key, value)可以多窗口(页面)共享(同一浏览器可以共享)以键值对的形式存储使用。删除: localStorage.removeltem(key)regobj.test(被检测的字符串)

2024-08-24 10:39:49 243

原创 前端学习Day30

像document、alert()、 console.log()这些都是window的属性,基本BOM的属性和方法都是window的。删除节点和隐藏节点(display:none)有区别的:隐藏节点还是存在的,但是删除,则从html中删除节点。3.插件:就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果。所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法;window对象是一个全局对象,也可以说是JavaScript中的顶级对象;

2024-08-17 14:23:52 236

原创 前端学习Day29

插入到父元素中某个子元素的前面:父元素.insertBefore(要插入的元素,在哪个元素前面)插入到这个父元素的最后:父元素.appendChild(要插入的元素)日期对象方法里面月份和星期有什么注意的:月份是0~11,星期是0~6。getDate():获取月份中的每一天,不同月份取值也不相同。getMinutes():获取分钟,取值为0~59。getMonth():获得月份,取值为0~11。getHours():获取小时,取值为0~23。getDay():获取星期,取值为0~6。

2024-08-17 14:22:58 292

原创 前端学习Day28

检测页面滚动的头部距离(被卷去的头部)用那个属性?7.offsetWidth和offsetHeight是得到元素什么的宽高?给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件。获取元素的自身宽高、包含元素自身设置的宽高、padding、border。offsetTop和offsetLeft得到位置以谁为准?找到真正触发的元素:事件对象.target.tagName。注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0。获取元素距离自己定位父级元素的左、上距离。

2024-08-17 14:21:33 206

原创 前端学习Day27

语法: addEventListener(事件类型,事件处理函数,是否使用捕获)后面注册的事件不会覆盖前面注册的事件(同一个事件)必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)匿名函数无法被解绑。把函数当做另外一个函数的参数传递,这个函数就叫回调函数回调函数本质还是函数,只不过把它当成参数使用。同一个对象,后面注册的事件会覆盖前面注册(同一个事件)直接使用null覆盖偶就可以实现事件的解绑。指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境。

2024-08-17 14:20:36 239

原创 前端学习Day26

标准属性:标签天生自带的属性比如class id title等,可以直接使用点语法操作比如:disabled、checked、selected。let变量名= setInterval(函数,间隔时间)clearInterval(变量名)click鼠标点击,mouseenter鼠标经过,mouseleave鼠标离开。Keydown键盘按下触发,Keyup键盘抬起触发。setInterval(函数,间隔时间)自定义属性在标签上一律以data-开头。目标:能够使用定时器函数重复执行代码。文本事件:表单输入触发。

2024-08-13 01:35:14 262

原创 前端学习Day25

如果基本数据类型的值或者引用类型的地址发生变化的时候,需要用let;1.声明变量优先使用const,有了变量先给const,如果发现它后面是要被修改的,再改为let。将HTML文档以树状结构直观的表现出来,我们称之为文档树或DOM树。因为对象是引用类型,里面存储的是地址,只要地址不变,就不会报错。2.为什么const声明的对象可以修改里面的属性?浏览器根据html标签生成的JS对象(DOM对象)作用:文档树直观的体现了标签与标签之间的关系。DOM的核心就是把内容当对象来处理。是DOM里提供的一个对象。

2024-08-10 12:30:29 406

原创 前端学习Day24

Math.random()随机数函数,返回一个0-1之间,并且包括0不包括1的随机小数[0,1)改和增语法一样,判断标准就是对象有没有这个属性,没有就是新增,有就是改。删除对象中属性:delete 对象名.属性名。对象添加新的数据:对象名.新属性名=新值。4.内置对象-生成任意范围随机数。2.对象访问属性有哪两种方式?点后面的属性名一定不要加引号。如何生成0-10的随机数呢?【】里面的属性名一定加引号。如何生成5-10的随机数?重新赋值:对象.属性=值。【】形式:对象【'属性】查询对象:对象.属性。

2024-08-10 12:29:19 308

原创 前端学习Day23

记忆:"、0、undefined、null、false、NaN转换为布尔值后都是false,其余则为true。对象( object) : JavaScript里的一种数据类型,无序的数据的集合。减法–(像大多数数学运算一样)只能用于数字,它会使空字符串""转换为0;原因:通过左边能得到整个式子的结果,因此没必要再判断右边。可以理解为是一种无序的数据集合,注意数组是有序的数据集合。无序的数据的集合\可以详细的描述描述某个事物。有字符串的加法“"+1,结果是“1”;&&:左边为false就短路。

2024-08-10 12:28:12 397

原创 前端学习Day22

函数声明时,小括号里面的是形参,形式上的参数函数调用时,小括号里面的是实参,实际的参数尽量保持形参和实参的个数一致。函数执行后得到结果,结果是调用者想要拿到的(一句话,函数内部不需要输出结果,而是返回结果)return后面不接数据或者函数内不写return,函数的返回值是undefined。returd能立即结束当前函数,所以return后面的数据不要换行写。对执行结果的扩展性更高,可以让其他的程序使用这个结果。也称为函数作用域,函数内部有效。8.函数有返回值的关键字;可以极大的提高了函数的灵活性。

2024-08-10 12:27:10 237

原创 前端学习Day21

数组.push()方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度。数组. pop()方法从数组中删除最后一个元素,并返回该元素的值。start起始位置:指定修改的开始位置(从0计数)arr.splice(操作的下标,删除的个数)arr.splice(起始位置,删除几个元素)目标:掌握利用push向数组添加元素(数据)arr.unshift(新增的内容)arr.push(新增的内容)目标:能够删除数组元素(数据)表示要移除的数组元素的个数。或者我们称为访问数组数据。语法:arr.pop()

2024-08-10 12:25:24 368

原创 前端学习Day20

continue 退出本次循环,一般用于排除或者跳过某一个选项的时候,可以使用continuebreak 退出整个for循环,一般用于结果已经得到,后续的循环不需要的时候可以使用。. switch...case语句通常处理case为比较确定值的情况,而i...slse ..语句更加灵活,通常用于范围判断(大于,等于某个范围)。当如果明确了循环的次数的时候推荐使用for循环当不明确循环的次数的时候推荐使用while循环。while(true)来构造“无限”循环,需要使用break退出循环。

2024-08-03 09:25:44 235

原创 前端学习Day19

while大括号里代码执行完毕后不会跳出,而是继续回到小括号里判断条件是否满足,若满足又执行大括号里的代码,然后再回到小括号判断条件,直到括号内条件不满足,即跳出。跟if语句很像,都要满足小括号里的条件为true才会进入循环体执行代码。终止条件(没有终止条件,循环会一直执行,造成死循环)在满足条件期间,重复执行某些代码。变量变化量(用自增或者自减)要重复执行的代码(循环体)while(循环条件){

2024-08-03 09:24:31 687

原创 前端学习Day18

因为表达式可被求值,所以它可以写在赋值语句的右侧。而语句不一定有值,所以比如alert() for和break 等语句就不能被用于赋值。3.自增运算符也是为了简化写法,每次自加1,使用场景是什么?==是判断只要求值相等,不要求数据类型一样即可返回true。4.实际开发中,我们一般都是单独使用的,后置++更多。===是全等要求值和数据类型都一样返回的才是true。2.只需要一个表达式就可以运算的运算符叫一元运算符。将等号右边的值赋予给左边,要求左边必须是一个容器。经常用于计数来使用。开发中,请使用===

2024-08-03 09:23:24 190

原创 前端学习Day17

6.JavaScript中只要用单引号、双引号、反引号包含起来的就是字符串类型。7.字符串拼接比较麻烦,我们可以使用模板字符串,可以让我们拼接字符串更简便。如果一个变量里面确定存放的是对象,如果还没准备好对象,可以放个null。const——类似于let , 但是变量的值无法被修改。9.布尔数据类型有2个值:true和 false。var —以前的声明变量的方式,会有很多问题。先乘除取余,后加减,有小括号先算小括号里面的。let ——现在实际开发变量声明方式。11.null类型;用√${变量名}使用变量?

2024-08-03 09:22:08 254

原创 前端学习Day16

2.JavaScript:JavaScript是一门编程语言,可以实现很多的网页交互效果。作用:在/*和*/之间的所有内容都会被忽略快捷键: shift + alt + a。作用:/ /右边这一行的代码会被忽略快捷键: ctrl+ l。内部Javascript -写到</body>标签上方。8.变量赋值符号:=这个符号我们也称为赋值运算符。注意变量指的是容器而不是数据。可以加也可以不加,可以按照团队约定。输出: alert()7.变量声明关键字:let。内部JavaScript。输入: prompt()

2024-08-03 09:21:06 404

原创 前端学习Day15

特点4:好物内容的文字部分类选择器需要增加.goods ,因为好物推荐部分与此不一样。3.热门品牌推荐(brand):结构:左侧(left)+ 右侧箭头(显示在标题外部:定位)4.生鲜(fresh):结构:右侧(right)>菜单(ul)+查看全部。特点3:标题和好物内容需要做成公共类,方便好物推荐调用。1.新鲜好物区域:特点1:标题(title)+内容(bd)注意2:.right 中的li在混动到的时候才变色。2.好物推荐:(1)直接复制好物推荐的内容进行修改。注意1:复制推荐好物的标题内容进行修改。

2024-07-27 02:57:33 327

原创 前端学习Day 14

5.banner区域:通栏>版心>轮播图(ul.pic)+侧导航(subnav)+圆点指示器(ol)3.底部帮助中心:使用div将结构分为左右两块,space-between左右分开放置。2.底部服务区域:结构ul>li ,使用flex布局,通过CSS精灵来设置图片。左边:left中使用dl 嵌套 dt和dd,然后使用flex布局。1.底部区域的设计:分为服务,帮助,版权三个区域,(通栏套版心)分别设置三个div块的高,帮助区域的高,默认包含上下的留白。右边:使用ul>li ,实现2个公众号。

2024-07-27 02:54:54 365

原创 前端学习Day13

5.Bootstrap下载步骤:(1)官网下载bootstrap V5 中文文档(www.bootcss.com)1.头部-导航:ul>li>a 实现,超链接的边框线加给a,不是hover。2.头部-搜索:使用iconfont增加字体图标,input标签作为输入框。6.Bootstrap使用步骤:(1)引入bootstrap css文件。3.头部-购物车:使用iconfont增加字体图标,i标签增加数字。(2)调用类名:container:响应式布局版心。(4)下载bootstrap生产文件。

2024-07-24 23:36:06 162

原创 前端学习Day12

9.头部(header)-布局:结构:.header>logo+导航(nav)+搜索(search)+ 购物车(cart)1.竞价排名/2.将网页制作成html后缀/3.标签语义化(在合适的地方使用合适的标签)/4.……title:网页标题标签 / description:网页描述 / keywords:网页关键词。图标:favicon.ico,一般存放到网站的根目录里面,使用link:favicon引入。8.快捷导航(shortcut):结构:通栏>版心>导航ul。

2024-07-24 23:32:34 125

原创 前端学习Day11

步骤:1.定位模式:position:relative(相对定位)/absolute(绝对定位)4.定位居中:tranform:translate(-50%,-50%)6.字体图标:iconfont,可以将图标当作字体来处理,文字属性可以操作图标。属性名:transition 属性值:过渡的属性 花费的时间。4.定位总结:定位的作用就是灵活的改变标签的位置,相对/绝对/固定。1.第八天课程介绍:CSS第六天:定位、CSS高级技巧、修饰属性。8.字体图标步骤:1.引入字体图标的样式表 2.调用类名。

2024-07-24 23:31:36 196

原创 前端学习Day10

2.版心效果:在index.css中新建.wrapper类选择器,实现版心居中(margin和width)12.前端开发工程师区域:分为.left .right,.right 分为.top 和.bottom。10.精品推荐区域(recommend):结构 .recommend>h3+ul+a.modify。9.banner区域-布局:结构:通栏banner>版心>.left+.right。8.header区域-用户区域:.user>a>img+span。6.header区域-导航制作:ul>li*3>a。

2024-07-20 07:45:13 248

原创 前端学习Day9

5.flex布局-主轴对齐方式:justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly。10.flex布局-行对齐方式:align-content:flex-start/flex-end/center/space-between/space-around/space-evenly。特点:浮动后的盒子顶对齐,浮动后的盒子具有行内块的特点,父级宽度不够,浮动的子级会换行,浮动后的盒子脱标……

2024-07-19 11:31:18 411

原创 前端学习Day8

场景:行内元素添加margin和padding,无法改变元素的垂直位置。内减模式:box-sizing:border-box。注意:x,y必须书写,默认是外阴影,内阴影需要添加inset。手动做减法:减掉border/padding的尺寸。1.场景:父子级的标签,子级的添加上外边距会产生塌陷问题。12.标准流:标准流也叫文档流,指的是标签在页面中默认的排布规则。1.场景:垂直排列的兄弟元素,上下margin会合并。padding的多值写法:两值,三值,四值。2.现象:取两个margin中的较大值生效。

2024-07-18 07:57:41 321

原创 前端学习Day7

2.显示模式转换:display:(block,inline-block,inline。2.常见线条样式:solid(实线)dashed(虚线)dotted(点线)E:nth-child 查找第N个E元素(第一个元素的N值为1)7.伪元素选择器:创建虚拟元素(伪元素),用来摆放装饰性的内容。E::before 在E元素里面最前面添加一个伪元素。E::after 在E元素里面最后面添加一个伪元素。E:first-child 查找第一个E元素。E:last-child 查找最后一个E元素。

2024-07-17 00:47:17 196

原创 前端学习Day6

公式:通配符选择器<标签选择器<类选择器<id选择器<行内样式<!4.CSS的优先级:也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则。7.背景图的复合属性:background,上面的背景属性都可以写,不区分顺序。3.CSS的层叠性:相同的属性会覆盖:后面的CSS属性会覆盖前面的CSS属性。不同的属性会叠加:不同的CSS属性都会生效。2.背景图:background-image。2.CSS的继承性:子级默认继承父级的文字控制属性。7.背景图复合属性:background。

2024-07-15 23:13:06 136

原创 前端学习Day5

写法:选择器1,选择器2,……选择器N{CSS属性},选择器之间用,隔开。写法:选择器1选择器2{CSS属性},选择器之间直接连写,没有任何符号。写法:父选择器 子选择器 {CSS属性},父子选择器之间用空格隔开。CSS的选择器的方法是真的多,这也就意味着同一个功能可实现的方案有很多。3.CSS的第二天内容:复合选择器,CSS特性,背景特性,显示模式。写法:父选择器>子选择器{CSS属性},父子之间用>隔开。写法:鼠标悬停状态:选择器:hover{CSS属性}2.综合案例一和综合案例二。

2024-07-13 00:03:27 157

原创 前端学习Day4

/*选择器 {CSS属性}*/

2024-07-11 12:52:11 480

原创 前端学习Day3

标签选择器: 标签名 p h1 div img a。(选中同名标签设置同样的样式)类选择器:差异化设置标签显示效果(标签添加class=“类名”引用:.类名)布局网页-div大盒子(独占一行) span小盒子(不换行)内部样式:在style标签里x{ key:value }下拉菜单-select嵌套option。外部样式:在html中使用link标签。行内样式: 标签内部style。富文本-textarea。

2024-07-11 12:47:39 648

原创 前端学习Day2

内容

2024-07-11 12:41:07 348

原创 前端学习Day1

1.课程内容:HTML5+CSS3;4.VSC的插件:打开网页插件:open in browser, 汉化工具:chinese。6.标签分为:单标签(<br>,<hr>)和双标签(<strong></strong>)9.HTML注释: <!-- 注释内容 --> , 注释的快捷键 Ctrl+/13.图片标签:<img src="图片的URL" alt="">12.文本格式化标签:strong,em,ins,del。10.标题标签:<h1>标题标签含有1-6级</h1>11.段落标签:<p></p>

2024-07-11 12:38:33 471

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除