- 博客(79)
- 收藏
- 关注
RSS订阅原创 移动端基础设置
一、移动端1、窗口设置meta标签：视口信息：<meta name="viewport" content=" "/>content:…width:物理设备里能够显示的页面像素，默认980…width:device-width;…intial-scale:设置页面初始缩放值，默认为1…minimum-scale:最小缩放…maximum-scale:最大缩放…use...
2019-12-09 20:19:46
234
原创 正则表达式及其配合使用的字符串方法
正则表达式及其配合使用的字符串方法一、一些特殊符号和字母1、创建正则1）var zz=new RegExp();返回结果：正则2）var zz=//;例如：var b=/你好/;ps:方法一可以放变量，而方法二不可以；2、使用正则匹配字符test():参数：整体被查询的字符串；var str='你好啊’;例如 b.test(str)3、特殊字母\ ：转义符\n...
2019-12-01 10:52:03
414
原创 jquery基本功能/json数据格式
一、jquery基本功能：访问和操作DOM元素控制页面样式对页面事件处理大量插件在页面中的应用与Ajax技术的完美结合二、nodejsnpm ：Node.js打包管理工具安装：nodejs下载资源 : npm install(可简写 i) -g jQuery -g全局，可省略；淘宝镜像 cnpm删除资源 : cnpm uninstall jQuery三、jq方法...
2019-11-30 17:23:49
282
原创 关于浏览器本地存储
一、含义通过浏览器对数据进行本地存储二、cookies浏览器查看：f12——Application——storage——cookies1、特点只能通过服务器访问存储数量20条左右存储事件默认为session时间，session会话控制（浏览器开启关闭时间）2、设置cookiedocument.cookie=“name=value”；存字符串3、获取cookied...
2019-11-27 11:11:03
561
原创 浏览器滚动条位置如何设置
1、window.pageYoffset获取滚动条在Y轴方向的距离2、window.pageXoffset获取滚动条在X轴的距离3、scrollTo(参数一，参数二）设置滚动条位置参数一：x方向参数二：y方向ps:如果只设置一个方向 ，一个方向设置为0...
2019-11-27 10:26:05
846
原创 web前端开发第一阶段——background/关键帧
background背景background-color:red;背景颜色background-image：url(图片路径);background-repeat:no-repeat;不平铺background-position:rebackground-size:150px 23px;宽 高百分比cover等于100%background-origin:设置背景的位置值：...
2019-11-27 10:09:23
319
原创 web前端开发第二阶段——BOM浏览器对象模型
一、浏览器代理信息navigator浏览器用户管理window.navigator.userAgent二、event事件wheelDelta 滚动方向(谷歌浏览器） >0 为向上滚动 <0 为向下滚动detail滚动方向(火狐浏览器）>0 为向下滚动 <0 为向上滚动封装的js/* 鼠标滚轮兼容浏览器 参数： obj:添加滚轮事件的元素...
2019-11-20 21:08:10
430
原创 web前端开发第二阶段——dom事件滚轮
一、onwheel滚轮事件ps:只在谷歌和火狐二、DOMMouseScrollps:不能用于传统事件，只能用于事件监听 火狐浏览器（IE无滚轮）body{overflow:hidden}//去掉滚动条...
2019-11-20 20:08:09
135
原创 web前端开发第二阶段——获取元素的实际大小\dom事件\浏览器事件\键盘事件
获取元素的实际大小offsetWidth: width+pading+border 注意不包括margin;offsetHeight: height+border+paddingclientWidth: width+pading 不包括margin+borderclientHeight: height+padding;获取元素相对于可视区位置和自身的大小g...
2019-11-15 23:21:31
169
原创 web前端开发第二阶段——创建数据、克隆元素、位置
一、创建数据回顾：创建元素：var a=documen.createElement(‘元素’)a.innerHTML=‘sdfedfr’;父级.appendChild(a)insertBefore():往某个元素之前插入标签参数一：你要插入的新标签参数二：那个元素的前面用法：父级.insertBefore()二、克隆元素cloneNode(参数)用法：目标.clone...
2019-11-12 10:56:41
121
原创 web前端开发第二阶段——对属性的操作
一、获取属性值的方法（一）box.className特点：只能获取w3c定义好的属性，和js点的方式设置属性，不能获取私有属性（二）getAttribute('属性名‘)特点：获取不到js点的方式（什么什么的）设置的属性；只能获取行间和通过setAttribute设置的属性二、设置属性的方法（一）标签.属性名=属性值例：box.index=1;（二）setAttribute(‘属性...
2019-11-07 21:00:50
156
原创 web前端开发第二阶段——DOM
js大致三个方面核心（ECMAScript组织）ecma规范 es5文档对象模型（DOM）浏览器对象模型（BOM)一、规范ecma规范：基于Netscape javaScript的一种标准脚本语言。它也是一种基于对象的语言，通过DOM可以操作网页上的任何对象。可以增加、删除、移动或者改变对象。使得网页的交互性大大提高。——百度百科数据、变量、函数、数组、循环判断等操作w3c规范...
2019-11-06 18:00:54
513
原创 web前端开发第二阶段——字符串的方法
ps:字符单双引号都可以使用var str=‘abcd你好’;str[4]=‘你’1、charAt(n)作用：获取字符串里面下标为n的字符参数：n指下标返回：字符2、charCodeAt(n)作用：获取下标对应字符的Ascii码参数：n,下标返回：Ascii码ps:字符串比较只看第一字母大小，如果第一个字母一样，才比较第二个3、String.fromCharCode()...
2019-11-05 14:37:54
214
原创 web前端开发第二阶段——项目版本管理工具git本地/github远程仓库
一、git软件：项目版本管理工具svn:项目版本管理工具git:1、下载：官网选择合适的版本下载2、安装（傻瓜式安装）3、windows：1)git Gui Here:可视化工具 不推荐2)git Bash Here:命令行4、在空项目文件里面1)在项目文件里创建目录 .git 用法：单击右键，弹出命令行；输入 git init，初始一个git文件 如果.git显不出来，...
2019-11-03 18:27:19
538
原创 web前端开发第二阶段——ES6新增的对数组操作方式
1、forEach():遍历数组用法：数组名.forEach(参数)参数：function (data,i){i:下标data:数据}var arr = [2, 4, 24, 41, 42, 65, 776, 89, 234, 556, 76];arr.forEach(function(data, i) { console.log(i, data)})2、map()遍历数组：...
2019-11-03 18:03:28
110
原创 web前端开发第二阶段——数组的方法
arr=new Array(3):3指长度，数组内容依旧为空arr=[3],一个数组值1、push()作用：往数组的最后插入（添加）数据参数：需要添加的数据，可以多个返回值：添加后新数组的长度用法：数组名.push(参数)2、unshift()作用：往数组的最前面添加数据参数：需要添加的数据返回值：添加后新数组的长度用法：数组名.unshift(参数)3、pop()作用：...
2019-11-03 17:47:20
111
原创 web前端开发第一阶段——CSS补充新增
textarea：文本域resize:none;设置不让拉动 horizontal 水平方向 vertical垂直方向 both两个方向 与overflow连用div中设置resize可以拖动盒子，要用多个样式搭配才有效果，但是不能输入内容disabled属性禁止点击输入内容标签： 1、input 2、textarea 3、加 属性contentEd...
2019-10-30 19:29:16
116
原创 web前端开发第一阶段——bootstrap样式
背景：bg文本：text：text-center:文本居中text-righttext-left预警色primary(首选项）蓝色success（成功）info（一般信息）浅蓝色warning（警告）土黄色danger(危险）红色背景颜色：bg-danger字体颜色：text-info按钮颜色：btn-预警色按钮：一般情况下 input type="butto...
2019-10-30 19:24:19
340
原创 web前端开发第一阶段——bootstrap响应式布局
ps:记熟class样式，可提高速度其中js使用的jquery库开发环境：程序员使用时有空格有注释，有警告，有提示的代码生产环境：用户直接使用时压缩，没有警告，没有注释bootstrap容器：标签大小固定容器：container 大屏1170、中屏970、小屏750、超小屏100% 流体容器：container-fluid 100%栅格系统：通过一系列row和column...
2019-10-30 19:20:26
273
原创 web前端开发第一阶段——移动端
meta 标签：name：viewport可视窗口，视口content: width:视口里面能存放（ 物理设备里）页面的宽度，与手机屏幕宽度无关 值：320px 默认980px device-width 默认手机宽度 user-scalable:是否允许用户缩放 no/yes initial-scale:初始缩放比例 0.5 小于1...
2019-10-30 19:15:21
138
原创 web前端开发第一阶段——弹性盒模型
弹性盒模型（多用于移动端）要形成：需要在其父级加弹性空间1、开启弹性空间display 新版：flex 老版：-webkit-box 两个都写：兼容性2、先定主轴方向 改变主轴方向，主轴不同方向不同 新版： flex-directive: row:主轴在水平方向排列 column:主轴在垂直方向 旧版： -webkit-box-orient： hor...
2019-10-30 19:13:33
157
原创 web前端开发第一阶段——原生响应式布局
响应式布局让页面随着浏览器的屏幕宽度的变化而放大缩小终端width:100%百分比：继承父级的宽度max-width:最大宽度min-width：最小宽度，当父级小于最小宽度，会产生滚动条height:一般不用百分比max-height:最大高度min-height:最小高度媒体查询在不同的终端。浏览器宽度里面显示不同的样式 @media：一般写在最下面，因为代码从上...
2019-10-30 19:09:08
460
原创 web前端开发第一阶段——百度地图API自定义
1.首先拥有一个百度账户(可以是百度网盘的)2、访问网址http://api.map.baidu.com/lbsapi/createmap/3、下载地图代码4、1） 修改1.3版本（可以免密匙）2）根据自己需要的宽高在地图代码中修改5、在页面需要的位置调用...
2019-10-30 18:09:25
198
原创 web前端开发第一阶段——网页自身优化/css统筹
网页自身优化：1、页面主题优化 实事求是的写自己网站的名字，网站名字要合理2、页面头部优化meta 1.指名编码方式 keywords关键字、描述Description 2.name: description：描述网站的功能 keywords: renderer:渲染引擎内核 content 描写你的网站特色内容、主要内容、经营范围、高度总结 webkit/i...
2019-10-30 18:08:20
111
原创 web前端开发第一阶段——运动transform
transform:值平移：translate（原点对其作用无） X轴：translateX Y轴：translateY translate3d复合：transform：translate(100px,100px); 本来位置还占原位缩放：scaleX(0.5)\scaleY(0.5)原大小的0.5倍复合：scale(3,3)旋转：rotateX(90deg)\rotateY(9...
2019-10-30 18:06:59
161
原创 web前端开发第一阶段——预编译less
预编译语言:less sass style提供些css的速度less:less is more,than css.少及多，比cssless1、类似于jqurey2、动态样式语言，属于css预处理语言的一种，类似于css语法，为css赋予了动态语言的特点，如变量、函数、继承、运算等，更方便css的编写和维护。3、后缀.lesskoala:less/sass编译工具4、多行注释才会被编...
2019-10-30 18:05:12
229
原创 web前端开发第二阶段——内置对象方法/日期对象/数组去重
ps:包装函数的时候，所需参数多可以传对象一、内置对象方法Math1、Math:跟数学有关的方法2、Math.ceil(num):向上取整3、Math.floor(num):向下取整4、Math.round(num):四舍五入5、num.toFixed(n):保留数的第n位小数——>结构类型为字符串6、Math.random():随机生成0-1的数，不包括0和17、Math....
2019-10-30 17:54:03
170
原创 web前端开发第一阶段——IFC/BFC
IFC:内联格式化上下文他是页面中的渲染区域，并有一套渲染规则，它决定了元素将如何定位以及和其他元素的关系和相互作用。inline/inline-block特点： 1、一个一个水平排放，不独占一行 2、水平的margin、padding、border有效，上下margin无效 3、宽高无效 4.行宽由含块和存在的浮动绝对BFC:block formatting Context 块...
2019-10-28 13:53:11
616
原创 web前端开发第一阶段——表格样式
tabletheadtbodytfoot tr th/tdtable专有属性：这是在页面添加的1.border2.cellspacing:单元格边框之间的距离3.cellpaddingth/td:corspan rowspancss文件样式1.border-spacing:单元格边框之间的距离（采用）2.border-collapse:collapse边框重叠3...
2019-10-28 13:51:20
425
原创 web前端开发第一阶段——标签语义化/IE的兼容性/Hack
标签语义化：块级标签 >IE8一般测试<header></header><footer></footer>兼容h5标签：引进一个js文件注意重点IE的兼容性（不完整）问题——>解决方法IE6:很容易出现问题*zoom6:开启BFC1.使用overflow包不住子元素2.IE6,7加li标签会产生间隙,加一个width...
2019-10-28 13:46:14
139
原创 web前端开发第一阶段——浏览器/过渡动画：transition
过渡动画：transition:只有在数值上有过渡效果trasition-duration:过渡时间transition-delay:延迟时间transition-property:width height;使什么样式有过渡效果 默认值是所有写的样式trasition-timing-function:linear 匀速；默认匀减速ease:匀减速 ease-in:匀加速复合写...
2019-10-28 11:50:47
652
原创 web前端开发第一阶段——a超链接
效果：1、链接到目标文件 <a href="www.baidu.com">百度</a> 给href加下面两种 #： javascript:; 不让跳转和刷新2、下载压缩包 <a href="img.rar">百度</a>3、锚点：跳到页面某一个位置 a:hover{ cursor:move;/* 改变鼠标点上去变成其他图...
2019-10-28 11:49:43
371
原创 web前端开发第二阶段——this指向/tween运动函数包装案例
window:是一个对象，指浏览器对象例如直接：console.log(this) => windowthis指向1、如果是通过事件来指向的函数，在这一次指向过程中，this指的是事件前面的元素2、如果是一般的函数调用，在这一次指向过程中的this指的是window3、在定时器里面this指的window对象4、函数调用过程中，明白函数执行的方式，点前面的是谁，this的指向就是...
2019-10-27 19:54:13
191
原创 web前端开发第一阶段——父级自适应大小
浮动标签把父级撑开方法1：给父级加上浮动注意其下一个兄弟标签可能会受影响方法2：可以用换行（非常不建议）<br clear="all"/>清浮动效果，不脱离文档流 w3c规定不要写一些没有任何作用废标签方法3：添加一个兄弟标签，并使用clear:both;清除浮动带来的影响方法4：可以放在公共样式中用伪类选择器：给父级添加一个假标签（用法最多,在样式表里写）...
2019-10-25 09:48:39
232
原创 web前端开发第一阶段——内容溢出
强制换行：white-space:nowrap(不折行）内容溢出：overflowoverflow-xoverflow-y 值：auto：当内容溢出时，出现滚动条和滚动框 hidden:隐藏溢出部分 scroll:加生滚动框，有内容溢出时产生滚动条文本溢出：溢出部分用…代替text-overflow:条件：水平方向，不折行，固定宽度，设置over-flow,加上文本溢出...
2019-10-25 09:47:14
147
原创 web前端开发第一阶段——透明度
opacity: css3出现 整体透明0-1: 0:完全透明 1：完全不透明IE6.7.8 低版本IE9.10.11 高版本样式：滤镜 filter:alpha(0-100);颜色：透明 transparentcss3: rgba:颜色透明度 #00 00 00 范围255 两个值的乘积 rgba(r,g,b,o) rgba(25...
2019-10-24 21:30:28
657
原创 web前端开发第二阶段——预解析机制/函数称呼/递归函数/闭包函数/浏览器垃圾回收机制
预解析机制浏览器先把要执行的代码，预先排列一个顺序，顺序排列完后在执行代码1、先找到代码里面的所有var 变量，把var变量提前（最前面）赋值不提前2、找到要声明的函数3、把剩下的代码从上往下的顺序执行函数称呼1、有名函数function fn(){}2、匿名函数（没有名字的函数）直执行函数作用： 可以减少变量名冲突写法：(function(){})调用：(funct...
2019-10-24 12:39:29
95
原创 web前端开发第一阶段——定位position/层级
不影响盒模型与方位属性搭配：相反加负号方位词：topbottomleftright1、绝对定位position:absolute;特点: 1)相对点: (1)当直系父级没有定位时,该标签的定位点是文档(body窗口/html父级) (2)当直系父级有定位时,该标签的定位点是父级 2)加了定位,不能继承父级 3)脱离文档流,父级不能撑开,所以缩小 4)加了绝对定位...
2019-10-23 11:06:59
254
原创 margin/padding使用注意事项
能用padding就不用margin<style> *{ margin: 0px; padding: 0px; } span{ margin-left: 50px; margin-top: 50px; margin-bottom: 20px; } a{ margin-top: 30px; } tr,tbody{ padding: 20px;...
2019-10-23 11:03:19
408
原创 雪碧图（精灵图）
雪碧图：将许多小图标压缩在一张图上，减小文件大小取图方位： 左上- 右下+例如：.list li:nth-of-type(1) span{ background:red url(../img/雪碧图.PNG) no-repeat -18px -11px;}...
2019-10-23 10:59:38
131
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人