- 博客(44)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 伪元素和伪类？
css3之前 :before/::before 表示元素内容区域的前面 :after/::after 元素之后 :first-letter/::first-letter 第一个字注意： :befor是Css2的写法，::before是Css3的写法 :before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好:first-line/::first-line 第一行css3之后::section 选中部分:
2022-06-07 17:15:19
177
原创 JavaScript事件
什么是事件？事件的组成： 触发谁的事件：事件源 触发什么事件：事件类型 触发以后做什么：事件处理函数 var oDiv = document.querySelector('div')oDiv.onclick = function () {}// 谁来触发事件 => oDiv => 这个事件的事件源就是 oDiv// 触发什么事件 => onclick => 这个事件类型就是 click// 触发之后做什么 => function
2022-02-15 17:54:50
498
原创 JavaScript：DOM（Document Object Model）文档对象模型(用万字一篇讲清)
JavaScript：DOM（Document Object Model）文档对象模型
2021-11-13 18:08:12
1003
2
原创 JavaScript的BOM
1、BOM BOM（Browser Object Model）： 浏览器对象模型 其实就是操作浏览器的一些能力 我们可以操作哪些内容 获取一些浏览器的相关信息（窗口的大小） 操作浏览器进行页面跳转 获取当前浏览器地址栏的信息 操作浏览器的滚动条 浏览器的信息（浏览器的版本） 让浏览器出现一个弹出框（alert/confirm/prompt） BOM 的核心就是 window
2021-09-22 21:40:03
138
原创 JavaScript格式化输出时间
格式化输出当前的时间YY-MM-DD H:i:s比如：2021-09-16 21:01:20思路：分别获取当前的年 月 日时 分 秒 再将其按照对应格式拼接起来<script> /* 格式化输出当前的时间 YY-MM-DD H:i:s 比如： 2021-09-16 21:01:20 */ function zero(t){ return t>9?t:('0'+t); } function fo...
2021-09-16 21:10:20
840
原创 JavaScript中Math和Date
1、MathMath是js中内置对象，提供了一堆的方法帮助我们操作 数字Math方法1、random() 生成0-1之间的随机数，不包含1var num = Math.random()console.log(num) // 得到一个随机数2、round()将小数四舍五入var num = 10.1console.log(Math.round(num)) // 10var num2 = 10.6console.log(Math.round(num2...
2021-09-15 21:37:03
131
原创 JavaScript字符串
1、ES5 严格模式 我们都知道 js 是一个相对不很严谨的语言 而且开发的时候，一些代码也不是很严格要求 而严格模式就是对开发的时候写的一些内容做了要求 开启严格模式想开启严格模式，直接在代码最开始的位置写上字符串 use strict<script> 'use strtic' // 下面代码书写就要按照严格模式来书写</script>严格模式的规则1、声明变量必须有关键字 var'use strtic'var nu
2021-09-07 21:28:14
111
原创 JavaScript &&与 ||或运算
&&当且仅当其所有操作数为真时，一组操作数的逻辑 AND () 运算符（逻辑与）为真。它通常与Boolean（逻辑）值一起使用。当它是时，它返回一个布尔值。但是，&&运算符实际上返回指定操作数之一的值，因此如果此运算符与非布尔值一起使用，它将返回非布尔值。常见转为布尔值为false 0 '' undefined null NaN如果逻辑表达式放在判断中，会将结果默认转为布尔值非零数的布尔值都是true&&...
2021-09-04 17:23:02
653
原创 JavaScript ==比较详解
等于运算符（==）检查其两个操作数是否相等，并返回Boolean结果。与严格相等运算符（===）不同，它会尝试强制类型转换并且比较不同类型的操作数。详解：相等运算符（==和!=）使用抽象相等比较算法比较两个操作数。可以大致概括如下：如果两个操作数都是对象，则仅当两个操作数都引用同一个对象时才返回true。 如果一个操作数是null，另一个操作数是undefined，则返回true。 如果两个操作数是不同类型的，就会尝试在比较之前将它们转换为相同类型： 当数字与字符串进行比...
2021-09-04 17:12:03
442
原创 JavaScript数组
1、了解数组数组是一种数据类型：复杂数据类型是数据的有序集合可以存储任意类型的数据语法：[] 空数组数组中的每一个数据叫做数组的元素，多个元素之间用逗号分割创建数组： 1、字面量创建var arr1 =[1,2,3,4,5] 2、内置构造函数创建当传递的参数只是一个数字n的时候 得到数组是一个有n个元素的数组，但是数组中每一个数字都是empty 空；是u...
2021-09-02 21:13:45
127
原创 JavaScript事件初识
1、事件的概念事件是可以被计算机识别的操作，如点击，双击，移动鼠标，按下键盘，窗体的加载、滚动、双击等事件，编辑框（文本框）的文本改变事件，等等。事件三要素 : 事件源 + 事件名称 + 事件处理程序 事件源 : 谁触发这个事件 (按钮 btn) 事件名称 : 触发了什么事件 (点击click事件) 事件处理程序 : 事件触发后要执行的代码(函数形式) 事件初体验：<input type="button" value="按钮" onclic...
2021-09-02 20:26:12
116
原创 JavaScript函数下
函数之前的内容可以参考之前一篇文章：https://blog.youkuaiyun.com/qq_43954443/article/details/1200646641、作用域全局变量：函数外边的变量叫做全局变量，可以在函数外面和函数里面使用。var num = 1;function test(){ num++; console.log(num);}test(); // 2console.log(num); // 2局部变量：函数内部的变量叫做局部变量，只能在函数内部使用。..
2021-09-02 17:33:46
92
原创 JavaScript函数上
1、函数的概念函数就是具备某个功能的一个工具。是完成某个功能的一段代码。大家以前有没有用过函数呀？parseInt() alert() 这都是函数，是系统提供的，直接拿来就能用。系统提供了很多函数，但是并不能包含所有的功能，所以有些功能需要我们自己来写----自定义函数。函数定义好以后，就可以像系统函数一样使用了，不用再重复写了。所以经常写的代码，就写一个函数，需要的时候调一下好了2、函数创建1、声明式函数语法： function 函数名称(参数){...
2021-09-02 17:09:50
126
原创 JavaScript循环(for、while、do while)
1、while 循环循环结构是指在程序中需要反复执行某个功能而设置的一种程序结构while(条件语句){ 条件成立执行的代码}
2021-09-02 16:30:46
429
原创 js的逻辑分支
1、if 单分支语法：if(条件){条件为真 执行的代码段}var age;if(age>18){ alert("已经成年了");}if 中的细节if条件的结果是布尔值，所以可以将布尔值当做条件放入if的小括号中if(true){ alert("真的");}else{ alert("假的");}如果将别的非布尔值的表达式或数据放入条件小括号中，会发生隐形的类型转换if(2){ // 这里的2被...
2021-09-02 15:13:19
134
原创 JavaScript基础
前端小尨猫的学习记录1、初识JavaScriptJavaScript的历史：在95年以前，就有很多上网的用户了，当时的带宽只有28.8kb/s，用户要进行表单的验证时，点击提交按钮，直接就将数据发送到服务器了，受限于带宽的关系，浏览器和服务器的通信很慢，大概一次通信需要30s的时间。这样，问题就出现了，我们平常注册一个用户，需要填写很多信息，当我们将所有信息填写好，点击提交按钮后，等待30s以后，提示我们用户名被占用了，修改，提交，等待30s，提示用户名不符...
2021-09-01 21:32:26
685
原创 (day20)web前端实现静态页面
检验自己一个月的学习成果，实现的是静态页面（小白学习一个月的成果）欢迎各位大神参考和指点PC端目标效果：代码实现：HTML部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
2021-08-31 21:11:34
948
原创 (day19)前端的兼容问题和图片问题
前端小白的学习记录，欢迎各位大神指点1、浏览器内核欧朋浏览器是公认的渲染静态页面最快的浏览器谷歌浏览器：Google Chrome，之前一直使用苹果的webkit内核，但是现在它与苹果内核分道扬镳，自己开创了新的blink内核，这个内核也在被欧鹏（opera浏览器）共同采用和开发；火狐浏览器：Mozilla Firefox ，内核是Geckoopera浏览器：内核是blink；Presto (前内核 已经废弃 )Safari浏览器：使用的是苹果公司自己的内核:webk...
2021-08-31 20:47:00
259
原创 (day18)前端grid网格布局
PS：grid并不是第二个grid布局预热设置网格布局语法： display:gird 属性值：grid 为块状网格容器（容器自上而下排列）注意：当前的父级元素添加网格属性，将网页划分为多个网格。容器：设置了网格属性的父级盒子项目：在容器下面的直接子级元素相关属性：grid-template-columns:grid-template-rows: ...
2021-08-31 20:00:11
214
原创 (day17)web移动端布局
1、meta标签 meta标签也叫元标签meta标签的使用：忽略将页面中的数字识别为电话号码<meta name="format-detection" content="telephone=no" />忽略Android平台中对邮箱地址的识别<meta name="format-detection" content="email=no" />当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅...
2021-08-31 19:41:28
126
原创 css3多列布局案例——照片墙
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
2021-08-30 20:26:02
427
原创 (day16)媒体查询和响应式布局
1、媒体查询媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。...
2021-08-30 20:19:24
372
原创 (day15)CSS3弹性盒详解
弹性盒初识：CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有floats和positioning。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限...
2021-08-26 21:56:38
1063
原创 前端CSS实现旋转相册
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>旋转相
2021-08-24 21:09:03
439
原创 css动画实现跳动的小人
跳动的小女孩图片原尺寸为1260x300，小女孩在某时刻的宽度为180px，同一时刻其他位置的小女孩隐藏。 使用动画设置运动方式，每次显示一个位置的宽度<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2021-08-24 20:52:30
1670
2
原创 CSS3旋转立方体
CSS3旋转立方体<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti
2021-08-24 20:35:09
121
原创 (day14)CSS3中3D和动画
1、景深建立3D立体空间的概念，先了解景深景深：物体的远小近大属性：perspective属性值：数值+单位(px,em,cm)
2021-08-24 20:30:15
164
原创 (day13)css3渐变和2D
1、css3浏览器前缀-ms-IE浏览器专属的CSS属性需添加-ms-前缀-moz-所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀-o- Opera浏览器专属的CSS属性需添加-o-前缀-webkit-所有基于Webkit引擎的浏览器（如Chrome、Safari）专属2、css3渐变针对盒子的背景图像而设置，指定多个颜色之间的过渡变化，渐变是由浏览器解析得到的。...
2021-08-21 16:12:49
146
原创 (day12)css3基础
1、css3概念和优势CSS3是css技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。css3的优点：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。对我们来说，CSS3主要的影响是将可以使用新的可用的选择器...
2021-08-20 23:15:54
392
原创 (day11)HTML5基础
目录1、HTML发展历史为什么推出H52、HTML兼容问题3、HTML新标签 1、语义化标签1、HTML发展历史HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG（网页超文本应用技术工作小组）提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备...
2021-08-13 19:32:40
150
原创 前端学习第九天——宽高自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是自适应。1、宽度width自适应1、将块级元素设置宽度100%的时候，会和浏览器(默认是100%)一样（也叫通栏效果）2、块级元素不设置宽度的时候：默认为(父级)的100%、即会和父级等宽3、块级元素不设置宽度默认是100%，如果添加脱离文档流的属性，元素的宽度会由内容决定设置脱离文档流的属性时，一定要给元素添加宽高大小！！！2、高度height自适应1、浏览...
2021-08-09 20:24:36
2055
原创 前端学习之路第八天——定位和锚点
1、定位作用：改变元素位置定位的三要素： 元素对象：需要移动的元素 参照物：当前元素移动参照谁 方向值：top right bottom left属性：position属性值： static 默认值，静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位2、相对定位属性...
2021-08-02 20:42:22
1598
原创 我的前端学习之路——第七天文本溢出和元素类型
1、文本溢出文本溢出属性overflow属性：overflow属性值：visible (默认) 正常显示 /hidden 隐藏 / scroll 滚动 / auto 自动在理解各属性值的含义之前需要先知道：浏览器中有固定宽高的盒子，在盒子中输入以下内容并超出会如何显示数字 会在一行内且超出显示英文 会在一行内且超出显示中文 会换行显示<!DOCTYPE html><html lang="en"...
2021-07-30 10:22:58
182
原创 我的前端学习之路——第五天：盒模型和css核心属性
1、盒模型的基本概念盒模型作用：规定元素之间的位置关系。通俗的讲就是调整间距组成部分： content：内容区域 padding：内边距border：边框 margin：外边距2、内边距padding的使用padding属性的使用： padding的作用：填充补白、内边距 通常用来调整父级元素与子级元素之间的位置关系padding添加的位置：通常添加...
2021-07-16 20:41:06
113
原创 我的前端学习之路——第二天：HTML基础
HTML发展历史了解2014年HTML正式发布w3c：万维网联盟网站建设流程需求分析会参与成员：产品经理、UI、前端、后台、测试各成员职能1）产品经理
2021-07-13 20:48:34
191
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人