- 博客(57)
- 收藏
- 关注
RSS订阅原创 less
由于前端css编写繁琐，最近开始学习LESS，用LESS编写文件.less文件可以直接编译成我们要的.css文件学习Less 我下面是我练习时的截图，希望小伙伴也能动手自己写一下，而不是复制粘贴模式学习。动手敲能体会不一样1.下载国内的koala的预处理器，可以自动把less编译成css2.使用sublime安装插件，推荐这种方式，因为我们是前端攻城狮变量用@来声明变量...
2019-10-08 23:47:36
126
原创 Three.js
1.基础我假定你的三维图形学知识过关，而且也在一定程度上掌握了JavaScript。如果不是这样，那先去学一点吧，否则直接看这篇教程，也许会感到困惑。在我们的三维世界里，我们有以下这些东西。我会带你一步一步创建它们。1.场景2.渲染器3.相机4.物体（带有材质的）当然，你也可以创造些其他的什么东西，我也希望你如此做。2.浏览器支持简单地看一下浏览器的支持情况吧。Google家的...
2019-10-07 23:10:54
190
原创 cookie
1、cookie的作用：我们在浏览器中，经常涉及到数据的交换，比如你登录邮箱，登录一个页面。我们经常会在此时设置30天内记住我，或者自动登录选项。那么它们是怎么记录信息的呢，答案就是今天的主角cookie了，Cookie是由HTTP服务器设置的，保存在浏览器中，但HTTP协议是一种无状态协议，在数据交换完毕后，服务器端和客户端的链接就会关闭，每次交换数据都需要建立新的链接。就像我们去超市...
2019-09-29 22:31:54
249
原创 流式佈局2
五、弹性布局（rem/em布局）1、rem,em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。2、使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。【中国站点制作网...
2019-09-22 22:10:42
98
原创 流式佈局
一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。2、设计方法：PC：居中布局，...
2019-09-20 23:18:26
182
转载 模板引擎
模板引擎封装template 实现原理: 通过id获取模板中的内容(注:内容为字符串) 调用方式: 找到字符串中特殊的符号.如:标签里的{{name}}用正则表达式替换 使用对象对应的属性进行替换 返回字符串...
2019-09-19 00:21:09
72
原创 js模态框
1. 基本语法---- window对象有一个方法称为showModalDialog ，我们可以在页面按钮的onclick中写如下代码：< BUTTON onclick="window.showModalDialog('dialog.htm')" >Search< /BUTTON >---- 系统会在新窗口中打开dialog.htm页面，并且等待用户响应，如...
2019-09-18 00:23:55
204
原创 响应式布局
一、什么是响应式布局响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。二、优点和缺点优点：[1]面对不同分辨率设备灵活...
2019-09-17 00:04:08
79
原创 web常用词汇
DataStructures基本数据结构Dictionaries字典PriorityQueues堆GraphDataStructures图SetDataStructures集合Kd-Trees线段树NumericalProblems数值问题SolvingLinearEquations线性方程组BandwidthReduction带宽压缩MatrixMultiplication矩阵乘法Det...
2019-09-15 23:59:39
268
原创 移动Web2
Retina屏幕高清图片：selector { background-image: url(no-image-set.png); background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;}image-set的语法，类似于不同的文本，图像也会显示成不同的：不支持image-set...
2019-09-11 23:55:33
69
原创 移动web
屏蔽阴影：-webkit-appearance:noneMeta标签：<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /><meta content="telephone=no" name="f...
2019-09-10 23:22:51
62
原创 canvas笔记2
圆弧绘制弧度概念arc()x 圆心横坐标y 圆心纵坐标r 半径startAngle 开始角度endAngle 结束角度anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）绘制文本ctx.font = '微软雅黑' 设置字体strokeText()fillText(text,x,y,maxWidth)tex...
2019-09-09 23:13:27
71
原创 Canvas笔记
什么是Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域，您可以控制其每一像素。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。创建Canvas元素向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度：<canvas id="myCanvas" width="200...
2019-09-08 23:45:38
83
原创 多媒体标签
多媒体 audioHTML5通过<audio>标签来解决音频播放的问题。并且可以通过附加属性可以更友好控制音频的播放，如：autoplay 自动播放controls 是否显不默认播放控件多媒体 video同音频播放一样，<video>使用也相当简单 ,同样，通过附加属性可以更友好的控制视频的播放autoplay 自动播放controls...
2019-09-06 22:59:06
107
原创 HTML新标签
header：定义文档的页眉 头部<header> 语义 :定义页面的头部 页眉</header>nav：定义导航链接的部分<nav> 语义 :定义导航栏 </nav>footer：定义文档或节的页脚 底部<footer> 语义: 定义 页面底部 页脚</footer>artic...
2019-09-04 23:45:57
158
原创 3d变形
x左边是负的，右边是正的y 上面是负的， 下面是正的z 里面是负的， 外面是正的rotateX()就是沿着 x 立体旋转.img { transition:all 0.5s ease 0s;}img:hove { transform:rotateX(180deg);}rotateY()沿着y轴进行旋转img { transition:all ...
2019-09-03 23:53:15
109
原创 css 2d变形
3D变形translate :移动平移的意思translate(50px,50px);使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素 可以改变元素的位置，x、y可为负值；translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）translateX(x)仅水平方向移动（X轴移动）translateY(Y)仅垂直方...
2019-09-02 23:45:18
163
原创 css3剩余动画
凹凸文字<head> <meta charset="utf-8"> <style> body { background-color: #ccc; } div { color: #ccc; font: 700 80px "微软雅黑"; } div:fir...
2019-08-29 23:37:34
85
原创 css3 高级选择器和部分动画
结构伪类选择器p:first-of-type : 匹配同类型中的第一个同级兄弟元素pp:last-of-type : 匹配同类型中的最后一个同级兄弟元素pp:first-child : 匹配父元素的第一个子元素p。p:last-child : 匹配父元素的第一个子元素p。p:nth-child(n) : 返回其父元素的第n个p元素伪元素选择器1.E::first...
2019-08-28 23:20:31
112
原创 h5c3基础
高级选择器1.找到父级元素中所有的子元素，再找第一个子元素是p标签:p:first-child { background-color: pink; }2.找到所有的子级元素，2.如果最后一个子元素是p标签，设置样式p:last-child { background-color: yellow; ...
2019-08-27 22:43:33
133
原创 ajax
ajax：异步 的 javascript and xmlajax作用： 主要是用于数据交互使用的ajax的原理： 通过XMLHTTPRequest对象 向服务器发送异步请求， 从而从服务器获取数据，然后使用js来操作DOM而更新页面ajax的核心： 就是js 中的 XMLHTTPRequest对象特点：异步加载 局部更新ajax给我们带来的好处：1.页面无刷新，页...
2019-08-26 23:27:24
89
原创 jQuery特殊属性操作2
offset方法与position方法offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。//获取元素距离document的位置,返回值为对象：{left:100, top:100}$(selector).offset();//获取相对于其最近的有定位的父元素的位置。$(selector).position();jQue...
2019-08-25 19:58:07
80
原创 jQuery特殊属性操作
val方法用于设置和获取表单元素的值，例如input、textarea的值//设置值$("#name").val(“张三”);//获取值$("#name").val();html方法与text方法html方法相当于innerHTML text方法相当于innerText//设置内容$(“div”).html(“<span>这是一段内容</span>...
2019-08-22 01:22:04
88
原创 jquery
jquery中操作样式： 1. css(): 操作style样式 2. addClass()系列方法： 操作类名css()方法： 1. 操作单个样式 .css('属性','属性值') 2. 操作多个样式： .css({'属性名'：'属性值','属性名'：'属性值'}) 3. 获取样式...
2019-08-20 22:03:49
68
转载 jquery
一、隐藏显示对象id为test的元素的display修改成了“none”，即隐藏了id为test的元素：$('#test').css('display','none')或$('#test').style.display="none"我们经常用到的是切换一个元素的隐藏与现实，下面给出代码：var show = $('#test').css('display');//获取id...
2019-08-19 21:14:11
73
转载 Web API总结
API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log())Web API的概念...
2019-08-18 23:05:47
136
原创 正则表达式
正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。元字符 描述 \ 将下一个字符标记符、或一个向后引用、或一个八进制转义符。例如，“\\n”匹配\n。“\n”匹配换行符。序列“\\”匹配“\”而“\(”则匹配“(”。即相当...
2019-08-16 00:00:05
56
原创 闭包
闭包闭包:在函数A中,有一个函数b(对象b),函数b(对象b)可以使用函数A中定义的变量和数据,此时就形成闭包闭包的作用:①可以读取函数内的变量②可以把变量始终保存在内存中闭包的缺点:闭包的变量保存在内存中,内存泄漏,对内存的消耗很大闭包的写法:1.一个函数,里面包含着另一个函数,并且return返回这个内部函数,然后内部函数在定义内部函数之外的作用域被调用,这时的...
2019-08-14 23:32:38
124
原创 继承
组合继承：借用构造函数 和在原型对象上改变this指向拷贝继承：把一个对象的属性和方法复制到另一个对象总结：原型的作用：继承—》目的：节省空间原型继承：改变原型的指向借用构造函数继承：.call（） 主要解决属性继承组合继承：原型继承+借用构造函数继承拷贝继承：把对象中需要共享的属性和方法直接以遍历的方式复制到另一个对象<script> functio...
2019-08-13 23:58:40
71
原创 原型对象
avaScript是一种基于原型的编程语言。在JavaScript中，每个构造函数都有与之关联的原型对象。这个原型对象的属性和方法表现出来就是用构造函数创建的每个对象的属性和方法。因此，可以通过将函数作为原型对象的属性分配给构造函数来创建方法。第一眼看过去，觉得这个方法很像构造函数内的自定义方法，但是基于原型的方法创建有一些自己的优点。因为函数只存储一次（在原型对象中），而不是在每个新的...
2019-08-12 22:39:15
68
原创 js总结
1、JavaScript分三个部分 ECMAScript - JavaScript的核心 BOM - 浏览器对象模型 DOM - 文档对象模型2.js中数据类型有哪些 1、 number：数字类型 （整数、小数） ...
2019-08-11 23:28:10
85
原创 client系列属性
clientWidth属性此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。返回值是一个整数，单位是像素。此属性是可读写的。scrollTop属性此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。返回值是一个整数，单位是像素。此属性是可读写的。sc...
2019-08-08 23:17:52
829
原创 三大系列
三大系列:offset系列:(父级元素margin+父级元素padding+父级元素border+自己的margin)offsetLeft:元素距离左边位置的值offsetTop:元素距离上面位置的值offsetWidth:获取元素的宽度(有边框)offsetHeight:获取元素的高度(有边框)scroll系列:scrollLeft:元素向左卷曲出去的距离s...
2019-08-07 23:33:50
198
原创 轮播图
轮播图之根据小圆点移动图片<script> //用户：当鼠标移入1,2,3按钮，图片改变 //1. 获取元素 // 获取box var box = my$('box'); // 获取相框 var inner = box.children[0]; // 获取相框的宽度 var imgWidth = inner.off...
2019-08-05 23:37:18
68
原创 计时器
setTimeout()和clearTimeout()在指定的毫秒数到达之后执行指定的函数，只执行一次// 创建一个定时器，1000毫秒后执行，返回定时器的标示var timerId = setTimeout(function () { console.log('Hello World');}, 1000);// 取消定时器的执行clearTimeout(timerId);...
2019-08-04 22:28:23
74
原创 事件
绑定事件的方法1.ele.onxxx = function (event) {} 兼容性很好，但是一个元素只能绑定一个处理程序 基本等同于写在HTML行间上2.ele.addEventListener(type, fn, false); IE9以下不兼容，可以为一个事件绑定多个处理程序 当第三个参数设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。...
2019-08-01 22:21:09
62
原创 创建元素的三种方法
1.document.write()这种方法几乎不常用,因为这会影响页面的布局,而且会把页面中之前的内容都给替换掉2.innerHTML当需要添加标签比较多的时候的时候使用这种方法,但是innerHTML方法由于会对字符串进行解析,需要避免在循环内多次使用3document.createElement()div标签下面就会创建一个li标签,当需要动态创建的...
2019-07-30 23:28:41
476
原创 时间详解
注册/移除事件的三种方式var box = document.getElementById('box');box.onclick = function () { console.log('点击后执行');};box.onclick = null;box.addEventListener('click', eventCode, false);box.removeEventList...
2019-07-29 23:25:11
59
原创 css标签和html标签
一,html标题标签:h1,h2,h3,h4,h5,h6段落标签:<p></p>水平线标签:<hr />换行标签:<br />水平线标签:size----水平粗细线width----水平线宽度align----水平线对齐方式Color----水平线颜色字体标签(funt)size----文字大小color----字体颜色Fa...
2019-07-28 22:33:39
145
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人