02 2021 档案
摘要：一 动画基本原理 1）核心原理 // 通过定时器 setInterval() 不断移动盒子位置 2）实现步骤 //1 获得盒子当前位置 element.offsetLeft//2 让盒子在当前位置加上1个移动距离//3 利用定时器不断重复这个操作//4 加一个结束定时器的条件//5 此元素需要添加定
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：知识梳理 // 1 可以动态的得到该元素的大小 滚动距离等 1）常用属性 element.scrollTop // 1 返回 被卷去的上测距离 [ 常用 ] element.scrollLeft // 2 返回 被卷去的左侧距离 [ 常用 ] element.scrollWidth // 3 返回自
阅读全文
摘要：知识梳理 //1 onload 和 onpageshow的区别 1）参数说明 (function flexible(window, document) {}(window, document));//window 顶级对象//document 下一个对象 2）代码 <!doctype html> <
阅读全文
摘要：知识梳理 //1 不需要调用 立马能够自己执行 //2 创建一个独立的作用域 里面所有的变量都是局部变量//3 可以是命名函数 可以传递参数 传递参数 //语法1 (function (singer) { alert(singer); })('蔡琴');//第二个小括号 可以看做是函数调用 可以传实
阅读全文
摘要：offset系列返回的值带边框 client系列返回的值不包含边框值 element.clientTop // 返回元素上边框的值 element.clientLeft //返回元素左边框的值 element.clientWidth //返回元素自身的宽度 [不含border] element.cl
阅读全文
摘要：案例分析 //案例分三大块 //1 鼠标经过图片盒子 遮罩盒子 和 放大镜盒子显示 鼠标离开 它们隐藏 //2 遮罩层跟随鼠标移动功能 //3 移动黄色遮罩层 大图片跟随移动 1）第一部分思路 2）第二部分思路 3）第三部分思路 4）最大移动值的概念 代码实现 <!DOCTYPE html> <ht
阅读全文
摘要：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px;
阅读全文
摘要：1）得到元素位置 offsetTop // 返回带有定位父元素 上方的偏移 offsetLeft // 返回带有定位父元素 左方的偏移 如果父元素没有定位 以body为基准 2）得到元素大小 offsetWidth // 返回自身 宽度offsetHeight // 返回自身 高度返回值不带单位包含
阅读全文
摘要：一 基本概念 // 包含了有关浏览器的信息// 最常用的是 userAgent 返回由客户机发送服务器的 user-agent 头部的值。 判断手机还是电脑访问 if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|An
阅读全文
摘要：登录页面 login <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <form action="index.html" method="get"> <
阅读全文
摘要：一 基本概念 // location属性 用于获取或设置窗体的URL 并且可以用于解析URL// 这个属性返回的是一个对象，我们也将这个属性称之为location对象 2）URL // 统一资源定位符URL 是互联网上标准资源的地址 二 location的属性 hash 设置或返回从井号 (#) 开
阅读全文
摘要：知识梳理 // 1 JS是单线程语言，但是可以使用异步 同步 // 前一个任务结束 后一个再执行 异步 // 同时开启多个任务 代码验证 <script> console.log(1); setTimeout(function () { console.log(3) },2000); console
阅读全文
摘要：知识梳理 // 1 一般情况下 this的最终指向都是 调用它的对象 // 2 全局作用域 普通函数 定时器 的this都指向了 window对象 // 3 构造函数的this 指向自己的实例 <script> // 1 全局作用域 普通函数 定时器 的this都指向了全局对象 window con
阅读全文
摘要：知识梳理 // 1 button 比较特殊 获取它的值不是value 而是innerHTML 核心逻辑 // 1 点击按钮后鼠标禁用 // 2 按钮里面的内容有变化 button的内容用innerHTML获取 // 3 里面的秒数有变化 需要用到定时器 // 4 定义一个变量 在定时器里面 不断递减
阅读全文
摘要：用到了 重复定时器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta
阅读全文
摘要：知识梳理 // timeout 暂停;超时// interval 间隔 简歇 一 单次定时器：setTimeout(); 1）基本语法： // window.setTimeout(回调函数,[延迟的毫秒数]); 2）三种调用方式 //直接写匿名函数 window.setTimeout(functio
阅读全文
摘要：一 概念 // 调整浏览器窗口大小 会触发该事件
阅读全文
摘要：一 窗口 ( 页面 ) 加载事件 1）概念 // 1 window.onload 页面所有元素加载完触发 包含图片 脚本 css等 // 2 DOMContentLoaded 页面DOM树构建完成就触发 无需等待 css 图片 其他脚本// 作用：JS脚本可以放在页面任何位置 2）代码范例 //on
阅读全文
摘要：一 键盘事件 1）常用的三个 //1 onkeyup 按键弹起时触发 document.onkeyup = function () { console.log('弹起时才触发'); } //2 onkeydown 按键按下的时候触发 document.onkeydown = function ()
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：图片放大镜用的就是这个思路 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, init
阅读全文
摘要：1）禁止复制功能 //1 禁止鼠标选中文字 document.onselectstart = function (e) { e.preventDefault(); } //2 禁止鼠标右键菜单 document.oncontextmenu = function (e) { e.preventDefa
阅读全文
摘要：//鼠标事件 onclick 鼠标点击右键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发 onmousedown 鼠标按下触发
阅读全文
摘要：常用鼠标事件 onclick 当用户点击某个对象时调用的事件句柄。 2 oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发 ondblclick 当用户双击某个对象时调用的事件句柄。 2 onmousedown 鼠标按钮被按下。 2 onmouseenter 当鼠标指针移动到元素上时
阅读全文
摘要：1）排他思想 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> //1 获取所有按钮元素 var btns
阅读全文
摘要：//核心思路 //1 需要得到系统时间 //2 用多分支设置不同的图片个问候语 //3 修改图片的src属性 //4 div来存放问候语 修改里面的内容 //1 获取页面元素 var img = document.getElementsByTagName('img');//得到图片元素对象 var
阅读全文
摘要：<button id="btn">按钮</button> <input type="text" value="请输入内容"> <script> //需求: 点击按钮 表单里面的值改变 //1 获取元素 var btn = document.querySelector('#btn'); var inp
阅读全文
摘要：用户如果离开密码框，里面输入个数不是6~16，则提示错误信息，否则提示输入正确信息 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
阅读全文
摘要：当鼠标点击文本框时，里面的默认文字隐藏，当鼠标离开文本框时，里面的文字显示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
阅读全文
摘要：可以利用 for 循环设置一组元素的精灵图背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <style> .box { position: relative; width: 400px; margin: 50px
阅读全文
摘要：知识梳理 // 在DOM中所有元素都是节点 // 1 文档节点：这个文档就是一个文档节点 // 2 元素节点：所有HTML标签 // 3 属性节点：所有HTML的属性 // 4 文本节点：所有文本内容 [包含 空格 换行 ] // 5 注释节点：注释 常用属性
阅读全文
摘要：一 全局属性 Infinity //代表正的无穷大的数值。 NaN //指示某个值是不是数字值。 undefined //指示未定义的值。 二 全局函数 decodeURI() 解码某个编码的 URI。 decodeURIComponent() 解码一个编码的 URI 组件。 encodeURI()
阅读全文
摘要：var re = new RegExp("\\w+");
阅读全文
摘要：1）知识梳理 Number 对象是原始数值的包装对象。 2）创建方式 var num = new Number(value); 3）常用属性 var num = 11; console.log(num.constructor); //返回对创建此对象的 Number 函数的引用。 console.l
阅读全文
摘要：学习目标 //1 什么是jQuery //2 它的优点 //3 jQuery对象和DOM对象的区别 一 jQuery概述 1）概念 //1 jQuery是一个JavaScript库 //2 可以快捷方便的操作DOM 里面基本都是函数(方法)//3 给我们封装了常用功能 优化了DOM操作 事件处理 动
阅读全文
摘要：官方解释 Event 对象 代表事件的状态 比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 简单理解 事件发生后，跟事件相关的一系列信息数据的集合都存放在这个对象event里面 event对象有很多属性和方法 如果是鼠标事
阅读全文
摘要：知识梳理 // 1 在实际工作中，很少用到捕获阶段，我们更关注摸排阶段 // 2 有些事件没有冒泡的，比如：onblur onfocus onmouseenter onmouseleave// 3 事件冒泡会带来一些麻烦，但是也可以巧妙的做一些事情 一 基础理论 1）DOM事件流 当一个HTML元素
阅读全文
摘要：一 传统方式移除 1）基本语法 ul.onclick = null; 2）代码范例 <div>按钮</div> <script> //1 获取元素 var divs = document.querySelectorAll('div'); //2 绑定事件 divs[0].onclick = func
阅读全文
摘要：名词解释 侦听器：事件处理程序 事件基础 1）什么是事件 // 给元素添加事件，称为注册事件或者绑定事件。 // 有两种方式：传统方式 和 方法监听方式 2）事件三要素 事件源 事件类型 事件处理程序// 1 获取事件源// 2 注册事件（ 绑定事件 ）// 3 添加事件梳理程序 ( 采用函数赋值形
阅读全文
摘要：一 向文档流写入内容 document.write() 1）基本语法 document.write('text'); //不常用 了解就可以 需要向文档流中写入内容，所以，若在一个已关闭（例如，已完成加载）的文档上调用 document.write，就会自动调用 document.open，这将清空
阅读全文
摘要：核心思路 //1 我们把文本域的值 赋值给li的时候 多添加 一个删除链接 //2 我们把所有的链接获取到 点击删除链接的时候 删除当前链接所在的li//3 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:; 代码实现 <!DOCTYPE html> <ht
阅读全文
摘要：知识梳理 // . 创建节点 // . 插入节点 // . 删除节点 // . 复制节点 // . 替换节点 一 插入节点 1）基本语法 parentNode.insertBefore(newNode,referenceNode); //在指定元素前面插入元素 // parentNode 父节点 /
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
摘要：页面布局分析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt
阅读全文
摘要：一 节点概述 1）概念 // . 网页中所有内容都是节点// . 文档节点 元素节点 属性节点 文本节点 注释节点 // . 节点用node表示 // . DOM树的所有节点都可以通过JS访问 // 4 所有元素节点都可以创建 修改 删除 2）节点属性 // 节点至少有以下三个属性 // 1 节点类
阅读全文
摘要：知识梳理 //1 给li设置自定义属性 知识梳理 //1 HTML结构：一个大的div 包含了上下两块//2 上面的盒子子元素 和 下面盒子子元素 一一对应//3 上面的元素第一个默认选中的样式//4 下面子元素全部 display = 'none';隐藏起来//5 下面第一个默认 display
阅读全文
摘要：1）全选和取消全选 //思路：让下面所有复选框的 checked 属性 跟随上面的 全选按钮 2）下面的按钮影响全选按钮 //核心思路//1 给下面所有复选框注册 点击事件 //2 每次点击 都要循环查看其它复选框是否有没有选中的 //3 如果有一个没有选中 上面全选就不选中 //4 可以设置一个变
阅读全文
摘要：一 操作元素内容 element.innerText // 不识别HTML标签 去除空格和换行 element.innerHtml // 识别HTML标签 保留空格和换行 //这两个属性都是可读写的 indexHtml 和 innerText 的区别 添加纯文本 就用 innerText添加的内容里
阅读全文
摘要：一 变量不可变性 var srt = '李白';//内存中开辟了一个空间 并把变量名指向这个空间地址 str = '杜甫';//重新赋值后执行了以下动作 1 在内存中新开辟了一个新空间 存放杜甫 2 把str执行了新开辟的内存 3 但是 李白 的内存空间并没有删除销毁 二 包装类型 1 通过 new
阅读全文
摘要：知识梳理 简单类型与复杂类型 堆和栈 简单类型的内存分配 复杂类型的内存分配简单类型传参复杂类型传参 一 数据类型分类 1）基本概念 //1 简单数据类型：也称 值类型 又称 基本数据类型string number Boolean undefined nullnull 返回的是对象比较特殊 //2
阅读全文
摘要：一 构造函数 1）为什么需要构造函数 //1 {} 和 new Object 一次只能创建一个对象 //2 这里的构造函数 和 PHP里面的类 作用很相似//3 有很多对象里面的属性和方法有大量是相同的 我们只能复制 造成代码冗余 2）什么是构造函数 //1 我们把对象里面一些相同的属性和方法抽象出
阅读全文
摘要：1 函数里面的变量直接赋值 = 全局变量 function fu() { num = 10;}num现在就是全局变量 2）伪代码的重要性 实现一个功能可以先用汉字把逻辑和算法写下来 复杂的可以配合画图软件，最后对照的写代码
阅读全文
摘要：1）求平润年 2）交换两个变量的值 2）求三个以上数的最大数 demo：比较三个数的最大值 [ 这个案例有价值 ] var a = prompt('请输入一个数'); var b = prompt('再输入一个数'); var c = prompt('再输入一个数'); //设一个中间变量 var
阅读全文
摘要：学习BOM，主要是学习 浏览器窗口交互 的一些对象 location 位置导航对象 screen 屏幕对象 history 浏览历史对象 navigator 浏览器信息对象 一 BOM概念 1）什么是BOM // Browser Object Model 浏览器对象模型 // 它提供了独立于内容而与
阅读全文
摘要：一 基本的两种 1）ID获取 <div id="one">一往无前</div><script> var id = document.getElementById('one'); console.log(id);//返回：<div id="one">一往无前</div> console.dir(id)
阅读全文
摘要：一 DOM简介 1）概念 //DOM是W3C推荐 处理可扩展标记语言的 标准编程接口document Object Model 可扩展标记语言 = ( HTML 或者 XML ) 2）作用 // 通过一系列DOM接口,可以改变网页内容 结构 样式 3）DMO中专有名词 // 1 DOM树// 2 文
阅读全文
摘要：知识梳理 //1 字符串的不可变性//2 每拼接一次 都会在内存中新开辟一个空间//3 每赋值一次 都会在内存中新开辟一个空间//4 字符串所有方法 都不会修改字符串本身 都是返回新字符串 知识目录 //1 根据字符返回位置 indexOf lastIndexOf//2 根据位置返回字符 //2 替
阅读全文
摘要：知识梳理 //1 判断数组 instanceof Array.isArray(arr); //2 添加元素 .unshift() .push() //3 删除元素 .shift() .pop() //4 查找索引 arr.indexOf() arr.lastIndexOf() //5 数组排序 so
阅读全文
摘要：2）使用Date //1 没有参数 var date = new Date(); console.log(date); //Tue Feb 16 2021 21:31:43 GMT+0800 (中国标准时间) //2 数值参数 var date1 = new Date(2019,10,1); con
阅读全文
摘要：知识梳理 //1 Math.floor();向上取整 //2 Math.ceil();向下取整 //3 Math.round();四舍五入取整//4 Math.random(); 返回一个大于等于0小于1的浮点数Math.round(-1.5); 返回是-1 而不是-2因为是向上取整 -1比-2大
阅读全文
摘要：知识梳理 //1 JS中对象分三种: 自定义对象 内置对象 浏览器对象 一 内置对象 1）概念 //1 JS自带的对象 帮助我们快速开发//2 常用的内置对象 Math Date Array String等 2）查MDN文档 https://developer.mozilla.org/zh-CN/d
阅读全文
摘要：知识梳理 //1 JS中没有类的概念 只有对象 [ 和PHP不同 ]//2 构造函数 不需要 return 就可以返回值 学习目标 //1 能够说出为什么需要对象 //2 能够使用字面量创建对象 //3 能够使用构造函数创建对象//4 能够说出new的执行过程//5 能够遍历对象属性 一 概念 1）
阅读全文
摘要：重点 1 在函数内部 直接赋值 没有用var声明 就当全局变量看 一 带着问题学习 坑1 console.log(num); var num = 10; // 输出 undefined [为什么]学习了变量提升就可以理解了 执行了以下操作var num; //变量提升 [只提升变量声明 ]conso
阅读全文
摘要：1）什么是作用域 作用域：变量名字在某个范围内起作用和效果目的：增加了程序的可靠性 2）作用域分类 //1 全局作用域：整个script标签 或者一个单独的js文件 //2 局部作用域：只能在函数内部使用 [ 也称 函数作用域 ]//3 块作用域：{}大括号就是一个块作用域 [ es6语法新增 ]
阅读全文
摘要：知识梳理 1 只有函数才有arguments 2 使用场景：当实参个数无法确定时使用 一 arguments的使用 1）arguments概念 //1 arguments是当前函数的一个内置对象//2 所有函数都内置了arguments对象//3 argments对象中存储了传递来的所有实参//4
阅读全文
摘要：知识梳理 //1 函数不调用不执行 //2 小驼峰命名 [ 一般用动词 ]//3 函数不调用不执行//4 函数没有return 默认返回 undefined 一 函数基础 1）为什么需要函数 函数：封装了一段可以被重复执行的代码块目的：让大量代码重复使用 2）函数的使用 //1 声明函数 funct
阅读全文
摘要：知识梳理 //1 遍历数组：for循环遍历数组中 i是计数器 arr[i]是数组元素//2 输出多个变量，用逗号隔开//3 重点掌握: 数组去重、数组翻转、冒泡算法 一 基本概念 1）基本概念 //1 数组是：一组数据的集合，存储在单个变量下的优雅方式//2 数组可以存放任意类型的元素//3 数组是
阅读全文
摘要：1）求1-100之间所有数字的总和 和 平均数 var sum = 0; var avg = 0; for (var i = 1;i <= 100;i++){ sum += i; } avg = sum / 100; console.log(avg); console.log(sum); 2）求1-
阅读全文
摘要：知识梳理 //1 for循环主要是 计数的 //2 while循环可以支持 更复杂的判断 [ 我爱你小案例 ] //3 continue 退出本次循环 剩下的继续执行 //4 break 直接结束循环 一 while语法 1）基本语法 //while 当...的时候 var num = 1;//定义
阅读全文
摘要：重点掌握 //1 for循环的执行流程 //2 嵌套循环: 外层循环执行一次 里面循环执行全部 //3 打印倒三角 里层变量j = 外层循环的i //4 打印正三角 里层变量j <= 外层变量的i [ 九九乘法表也是正三角 ] //5 分析比写代码要重要，伪代码的重要性 一 for循环 1）基本语法
阅读全文
摘要：知识梳理 //1 if else 多用于范围判断 [ 大于等于某个区 区间判断] //2 switch case 多用于某个固定值的判断 [ 星期几案例 ] //3 三元表达式 = if else 双分支 //4 只要是表达式 就一定有返回值 一 if分支 1）单分支 if ( 条件表达式 ) {
阅读全文
摘要：知识梳理 //1 浮点数不要直接参与数学运算 //2 逻辑运算中的 逻辑中断是个重要知识点 //3 后加加 表达式先返回值 变量再自增1 //4 一元运算中的 逻辑非 优先级最高 一 算数运算符 1）基本使用 加 减 乘 除 取模 应该避免用浮点数运算和相等比较 2）浮点数运算 尽量避免让浮点数直接
阅读全文
摘要：一 转换为字符串 1）变量名.toString() var num = 10; console.log(typeof num.toString()); 2）函数 String(变量名) var num = 10; console.log(typeof String(num)); [ 强制转换 ] 3
阅读全文
摘要：一 概念 1）为什么需要数据类型 在计算机中，不同的数据所需占用的存储空间是不同的，为了充分的利用存储空间。 2）变量的数据类型 var num; num = 10; //js的变量数据类型只有在程序运行过程中，根据等号右边的值来确定的 var x = 10; x = '李白'; //js是动态语言
阅读全文
摘要：一 变量基本 1）什么是变量 //1 用于存储数据的容器 我们通过变量名获取数据//2 变量本质是程序在内存中申请用来存储数据的空间 2）变量初始化 var age = 18; //声明变量的同时赋值 称之为初始化 二 变量语法扩展 1）更新变量 var age = 18; age = 81; //
阅读全文
摘要：一 引入JS的三种方式 1）行内 JS <input type="button" onclick="alert('诗仙')" value="李白">//直接写在元素内部 2）内嵌JS <script> alert('内嵌式的js') </script> 3）外部JS <script type="te
阅读全文
摘要：1）JavaScript是什么 1 它是一种 运行在客户端的脚本语言2 脚本语言：不需要编译，运行过程中由js解释器逐行进行解释并执行3 现在也可以基于 Node.js 进行服务端编程 2）JavaScript的作用 1 表单动态验证2 网页特效3 服务端开发 Node.js4 桌面程序 (Elec
阅读全文
摘要：标记语言 HTML //1 不能向计算机发出指令 //2 常用于格式化和链接 //3 用来被读取的 它是被动的 编程语言 //1 有很强的逻辑和行为能力 //2 if else for while 等具有逻辑性和行为能力的指令，这个主动的 翻译器 一 编程语言 //1 编程语言有：机器语言 汇编语言
阅读全文
摘要：布局容器最基本使用 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-
阅读全文
摘要：把一个css文件导入到另一个css文件中 @import "文件名";@import "common.css"; flex布局不用担心外边距合并的问题
阅读全文
摘要：less的嵌套 孩子是写在父亲标签里面的 添加伪类伪元素 前面添加 & 连接符
阅读全文
摘要：em单位 em是相对于父元素的字体大小来说的 小demo div { font-size: 12px; } div p { width: 10em; height: 10em; background: pink; } <div> <p>dd</p> </div> p的大小是基于父盒子的字体大小来说的
阅读全文
摘要：知识梳理 1 固定定位和父亲没有关系，参照浏览器来定位的 所以必须给宽度2 固定定位的元素 需要居中对齐 怎么 操作？3 在flex布局中 所有的元素都可以使用 不区分块元素和行内元素 所有a不用转换为block 固定定位元素 水平局中对齐 方法1 添加left值 [ 推荐写法 ] .search_
阅读全文
摘要：小demo 左右固定 中间自适应 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, i
阅读全文
摘要：二 常见的父项属性 设置主轴的方向 flex-direction: row;row //1 从左到右 [ 默认值 ] row-reverse //2 从右到左 column //3 从上到下 column-reverse //4 从下到上 reverse 单词: 颠倒 相反的意思 要点 给父盒子添加
阅读全文
摘要：这个比较重要 京东的图片格式是 .dpg后缀的 是京东自己出的一种有损压缩技术 体积减少50% 并且支持各种浏览器 加了固定定位的盒子 一定要给高度 图片设置为100%宽度 盒子有多宽 图片就多宽 ctrl + g 快速跳转行号 编辑器快捷键 去除图片底部的空白缝隙 img { vertical-a
阅读全文
摘要：移动端的特殊样式 /*去除a连接点击时 后侧的高亮背景*/ a { -webkit-tap-highlight-color: transparent; } /*添加这个属性 iOS上 输入框和按钮才可以书写自定义样式*/ input { -webkit-appearance: none; } /*禁
阅读全文
摘要：视口标签 <meta name="viewport"//视口 content=" width=device-width,//设备宽度 user-scalable=no, //是够可以缩放 0或1 yes或no initial-scale=1.0,//初始缩放比 maximum-scale=1.0,/
阅读全文
摘要：小demo 旋转木马 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>翻转导航</title> <style> body { /*添加透视*/ perspective: 1000px; } /*最外面的盒子*
阅读全文
摘要：demo1 两面翻转的盒子 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>rotate</title> <style> body { perspective: 500px; } .box { positio
阅读全文
摘要：z轴单位一般不用 百分比 直接用精确的单位 一 透视 per spect ive perspective: 500px; [值是 视距 就是上图中的 d距离 ] body { perspective: 500px;//透视的值是: 视距px } div { width: 200px; height:
阅读全文
摘要：基础语法 <style> /*第一步：定义动画*/ @keyframes move { //开始状态 0% { transform: translateX(0px); } //结束状态 100% { transform: translateX(500px); } } div { width: 300
阅读全文
