![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 57
web行路人
脚踏实地,做好现在,未来顺其自然!
展开
-
audio 关闭h5页面自动暂停的解决
audio 关闭h5页面自动暂停的解决原创 2022-06-15 17:48:21 · 881 阅读 · 1 评论 -
html5 datalist 选中option选项后的触发事件
使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下function inputSelect(){ var input_select=$("#input").val(); var option_length=$("option").length; var option_id=''; for(var原创 2017-11-02 18:35:24 · 25755 阅读 · 8 评论 -
jquery点击左右图片切换源码
点击左右箭头进行左右图片切换。如下图:css代码:body,ul,li{ padding:0; margin:0;}ul,li{ list-style:none;}img{ border:none;}a{ color:#6cf;}a:hover{ color:#84B263;}.box{ width:980px; margin:0 auto; position:rela原创 2016-09-06 10:25:44 · 802 阅读 · 0 评论 -
Compass安装与用法的思维导图
Compass安装与用法的思维导图原创 2017-01-18 23:26:57 · 350 阅读 · 0 评论 -
compass项目配置文件config.rb
compass项目配置文件config.rb当我们创建一个compass项目时,在项目文件里能看到两个文件夹和一个配置文件,如下图所示:在使用compass编译代码时,可能会遇到多余的注释,以及图片路径问题。对于刚接触compass的人来说非常苦恼,可能找了半天也没有解决问题,今天就来讲讲config.rb对代码输出效果的影响。第一次打开config.rb文件时转载 2017-01-18 23:21:42 · 3030 阅读 · 0 评论 -
sass笔记(二)
基于sass的既定规则:1.当@import后边跟的文件名是以.css结尾的时候!@import url("variables.css") projection tv;2.当@import后边跟的是http://开头的字符串的时候!3.当@import后边跟的是一个url()函数的时候。4.当@import后边带有media queries的时候。原创 2017-01-17 16:15:20 · 215 阅读 · 0 评论 -
学习SASS笔记
Sass 是对 CSS 的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。sass的思维导图原创 2017-01-16 23:18:01 · 705 阅读 · 0 评论 -
requestNextAnimationFrame的使用
requestNextAnimationFrame的使用为什么使用requestNextAnimationFrame的使用而不使用window.setInterval()或者window.setTimeout()制作的动画:使用window.setInterval()或者window.setTimeout()制作的动画,有如下缺点:1.他们都是通用的方法,并不是专为绘制动画而用2.原创 2016-11-21 19:35:06 · 4932 阅读 · 0 评论 -
10 个原则让动画带你飞
原文地址:https://github.com/xitu/gold-miner/blob/master/TODO/smooth-css-animations.md#什么是动画什么是动画?在互联网发明之前,动画就已经所处可见了,可能你需要穷尽毕生之力才能学会如何将动画做得绚丽辉煌。然而,在互联网中实现动画效果自有其独特的限制和挑战。为了实现流畅的 60 帧的动画效果,每一帧都转载 2016-11-19 11:37:11 · 655 阅读 · 0 评论 -
CSS定位布局
1.静态定位(static)2.相对定位(relative):特点:相对自身原有位置进行偏移。 仍处于标准的文档流中 随即拥有偏移性和z-index属性。列如:无标题文档#1{background:#09原创 2015-03-26 19:52:07 · 379 阅读 · 0 评论 -
CSS清除浮动的方法
清除浮动:clear-常用clear:both;或者clear:left;clear:right;同时设置width:100%(或固定宽度)+overflow:hidden;当父包含块缩成一条时,用clear:both方法清除浮动无效。它一般用于紧邻后面的元素的清除浮动。列如: #wrap{ background:#00c;m原创 2015-03-26 19:02:49 · 491 阅读 · 0 评论 -
HTML <frameset> 标签
■ 框架概念 :所谓框架便是网页画面分成几个框窗,同时取得多个 URL。只 要 即可,而所有框架标记 要放在一个总起的 html 档,这个档案只记录了该框架 如何划分,不会显示任何资料,所以不必放入 标记,浏览这框架必须读取这档 案而不是其它框窗的档案。 是用以划分框窗,每一框窗由一个 标 记所标示,必须在 范围中使用。如下例:frameset cols="50%,*转载 2014-09-28 15:52:48 · 523 阅读 · 0 评论 -
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)原文地址:http://www.jb51.net/article/123169.htm转载 2018-02-26 11:46:21 · 301 阅读 · 0 评论 -
webstorm快捷键大全
webstorm快捷键大全一些webstorm比较实用的快捷键:Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*…*/ )Shift+F6 重构-重命名Ctrl+X 删除行Ctrl+D ...原创 2018-02-26 11:39:16 · 214 阅读 · 0 评论 -
sessionStorage与localStorage
Web Storage功能就是在Web上储存数据的功能,这里的储存是针对客户端本地而言的。具体分两种:sessionStorage和localStorage。sessionStorage:将数据保存在session对象中。session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何原创 2016-07-14 09:36:09 · 257 阅读 · 0 评论 -
html5的canvas的学习笔记
html5的canvas的学习笔记在html5中,canvas元素是一个非常重要的元素,用于完成网页中各种图形,图像与动画的绘制工作。 使用canvas元素绘制指针式动画时钟 1、取得页面中的canvas元素 varcanvas=document.getElementById("canvas");2、取得canvas元素的图形上下对象在大多数程序中原创 2016-03-15 15:26:17 · 755 阅读 · 0 评论 -
html5的多媒体的属性及其简单的属性
1. 多媒体的属性及其简单的属性:Src:用来指定多媒体文件的来源。Autoplay:一个布尔值,用来指定浏览器是否进行自动播放。Loop:一个布尔值,用来指定浏览器是否进行自动循环。Muted:属性用来指定多媒体资源播放时是否静音。Controls:一个布尔值,用来指定浏览器是否显示用户控制钮件。CrossOrigi:用来指定多媒体在不同的原创 2015-03-25 20:17:02 · 778 阅读 · 0 评论 -
为何img、input等内联元素可以设置宽、高
元素是文档结构的基础,在CSS中,每个元素生成了一个包含了元素内容的框(box,也译为“盒子”)。但是不同的元素显示的方式会有所不同,例如和就不同,而和也不一样。在文档类型定义(DTD)中对不同的元素规定了不同的类型,这也是DTD对文档之所以重要的原因之一。1. 替换和不可替换元素从元素本身的特点来讲,可以分为替换和不可替换元素。a) 替换元素替换元素就是浏览器转载 2017-03-09 13:58:03 · 326 阅读 · 0 评论 -
http的一些概念
1. 什么是回调?回调是异步编程时的基础,将后续逻辑封装成起始函数的参数,逐层嵌套2. 什么是同步/异步?同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。 3. 什么是I/O?磁盘的写入(in)磁盘的读取(out)4. 什么的单原创 2016-12-08 11:39:19 · 271 阅读 · 0 评论 -
http之状态码
1xx 表示请求已经接收,进行进一步的处理3xx 请求重定向,需要另外的一些处理5xx 服务器端错误200 400 客户端请求语法错误 由于语法错误,无法满足该请求。请求没有经过授权 请求需要用户身份验证404 未找到 有可能输入的URL地址错误 503 由于服务器的临时超载或维护,服务器当前无法处理请求原创 2016-12-08 11:27:47 · 290 阅读 · 0 评论 -
display:flex和display:box布局浏览器兼容性分析
原文地址:http://www.cnblogs.com/walk-on-the-way/p/5997073.htmldisplay:flex和display:box布局浏览器兼容性分析display:flex和display:box都可用于弹性布局,不同的是display:box是2009年的命名,已经过时,用的时候需要加上前缀;display:flex是2012年之后转载 2016-11-21 13:57:17 · 21887 阅读 · 0 评论 -
微信端与移动端设备的判断
微信端与移动端设备的判断用户访问服务器时,利用PHP的超级全局变量$_SERVER数组中字段['HTTP_USER_AGENT'] 获取访问用户的所有信息<?phpecho $_SERVER['HTTP_USER_AGENT'];?>1. 微信端设备的判断2. 安卓设备的判断<?php $agent = strtolower($_SERVER[原创 2016-10-07 11:38:57 · 375 阅读 · 0 评论 -
itmo移动端项目总结
在这次项目中,我和另外一名同事一起负责做移动端的前端开发。1、rem的使用。我们都知道rem是根据根元素即是body元素来计算的,在移动端我们可以使用它来适应不同屏幕的尺寸。详情使用请看:web app变革之rem2、jquery的touchstart mousedown使用。touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。当鼠标指针移动到元素上方,原创 2016-07-13 10:06:33 · 282 阅读 · 0 评论 -
优化itmo官网总结
1..css sprites: 就是把多个图片拼成一副图片,然后通过CSS来控制在什么地方具体显示这整张图片的什么位置。给大家看个熟悉的Sprites实例。巧妙利用background-position来准确定位。有利于减少空间内存。加速网站的加载2.在链接末尾添加反斜杠(/)列如:http://itmo.com/fxg ? ?指向的是网站根目录下一个名为fxg的文件http:原创 2016-07-12 12:06:14 · 409 阅读 · 0 评论 -
libao需求页面总结
libao需求页面总结网站地址:http://www.itmo.com/libao1、清楚浮动:.clearfix:after,.clear:after{clear:both; content:"."; display:block; height:0; visibility:hidden;}.clearfix,.clear{zoom:1;}的使用:其清楚元素高度大于其子元素。原创 2016-04-11 10:55:43 · 291 阅读 · 0 评论 -
itmo论坛项目总结
itmo论坛项目总结项目地址:http://bbs.itmo.com1、jquery原文件与原有的插件冲突时:用jQuery(".as")代替$(".as"):jQuery(".bbs-col-fourth").hide();2、 setInterval()和clearInterval(),mouseover()mouseout()fadeOut(),fadeIn()函数的使用。3原创 2016-04-01 11:33:08 · 460 阅读 · 0 评论 -
CommonJs,AMD和CMD资料
前端模块规范有三种:CommonJs,AMD和CMDCommonJs用在服务器端,AMD和CMD用在浏览器环境。AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。提前执行(异步加载:依赖先执行)+延迟执行CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。延迟执行(运行到需加载,根据顺序执行)1、CommonJS是服务器端模块的规范,由Node推广使用。由于服务端编程的复...原创 2018-04-08 22:18:05 · 145 阅读 · 0 评论 -
typeof与instanceof
typeof与instanceof Document //Number console.log(typeof 37);//输出Number console.log(typeof 3.14);//输出Numb原创 2016-12-13 10:34:59 · 307 阅读 · 0 评论 -
移动H5前端性能优化指南
移动H5前端性能优化指南概述1. PC优化手段在Mobile侧同样适用2. 在Mobile侧我们提出三秒种渲染完成首屏指标3. 基于第二点,首屏加载3秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点6. 基于第五点,要合理处转载 2016-11-15 17:28:04 · 680 阅读 · 0 评论 -
2016最新前端学习计划
原文地址:以下是简单的使用说明前端学习路线图:由前端教学经验相当丰富的老师梳理而成,知识由浅入深,循序渐进。自学前端,按照这份学习路线图学习就可以了!视频篇:根据学习路线图搭配了相应的视频、源码资源。部分资源还在玩命更新中,请稍安勿躁,静候更新。工具篇:精心收集了40多款前端流行框架、开发工具、手册、插件、模板引擎。市场上常用的、转载 2016-11-18 12:01:27 · 2135 阅读 · 1 评论 -
读‘Web前端开发工程师编程能力飞升之路’感触
读‘Web前端开发工程师编程能力飞升之路’感触原文地址:http://blog.csdn.net/sunyuan_software/article/details/49560107背景如果你是刚进入WEB前端研发领域,想试试这潭水有多深,看这篇文章吧; 如果你是做了两三年WEB产品前端研发,迷茫找不着提高之路,看这篇文章吧; 如果你是四五年的前端开发高手,没有难题能转载 2016-11-18 10:29:36 · 616 阅读 · 0 评论 -
前端开发之真机模拟调试
前端开发之真机模拟调试昨天在晚上无意看到UC浏览器开发者版可以实现在手机上使用浏览器访问网页,便捷地进行网页语言调试。UC浏览器开发者版地址介绍:http://plus.uc.cn/document/webapp/doc5.html. 1、安装adb:按照UC浏览器开发者版安装adb时出现各种各样的问题,于是请教了安卓的同事。他们把他们的安卓包给我,重新安装原创 2016-11-04 14:44:05 · 3354 阅读 · 0 评论 -
meta的属性
meta的属性参考文献:1、http://www.cnblogs.com/esshs/articles/157588.html 2、http://www.oschina.net/question/54100_174141、Content-Type和Content-Language (显示字符集的设定) 说明:设定页面使用的字符集,用以说明主原创 2016-06-14 15:39:42 · 1352 阅读 · 0 评论 -
为什么设置的背景图像不显示?
在表格的单元格中单击鼠标的左键,c原创 2014-11-22 00:20:40 · 1345 阅读 · 0 评论 -
前端资源的罗列
前言: 站在巨人的肩膀上,确实能让我们看得更远。而我认为学习的不二法门就是不断模仿,但是一定要有自己的思考。拿来主义如果少了思考,就会变得毫无意义。以下列出一些前端优秀网站,大家自行取其精华,批判吸收。 学习站点资源Adobe出的,Adobe其实是html5非常忠实的拥抱者。官方社区有非常多的html5资源 http://beta.theexpressiv转载 2014-11-15 00:14:52 · 787 阅读 · 0 评论 -
Nova游戏官网项目笔记
1、DIV的宽度 = width + padding + border + margin。可是在切图的过程中如果是两张图片合并,为兼容ie8 ie9。我们要把外面的间隔调为2px。例如下图:图一的中间的部分要小于图二的宽度为2px,高度不用变。不要按照设计稿来定位居中。标签之间有空隙 最终解决办法第一,给图片img标签display:block。 Example S原创 2016-01-22 13:54:59 · 345 阅读 · 0 评论 -
清楚浮动的几种方法
清楚浮动的几种方法为什么我们用float:left/right之后会对其父辈或兄弟元素产生影响:浮动框不在普通的文档流中,它脱离了文档流,所以包围的内容的不占据空间。如下面的代码: div{ background-color: #00000;}.fl{ float: left;}.fr{原创 2016-03-01 15:52:52 · 405 阅读 · 0 评论 -
前端的居中的问题
前端的居中的问题1、垂直居中:a、结合使用height和line-height:这两个值相等。 b、设置padding值div{ width: 200px;}p{ line-height: 100px; height: 100px;} 1221233 1111 2、元素水平居中原创 2016-03-01 17:04:20 · 421 阅读 · 0 评论 -
GitHub常用上传文件的两种方法 附带常见的问题及Git安装教程
GitHub常用上传文件的两种方法 附带常见的问题及Git安装教程转载 2017-01-11 11:06:44 · 572 阅读 · 0 评论 -
学习廖雪峰老师的git课程笔记(一)
学习廖雪峰老师的git课程笔记原创 2017-01-07 16:02:35 · 395 阅读 · 0 评论