自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

泠泠似水

前端工作者,整理和分享前端知识

  • 博客(21)
  • 收藏
  • 关注

原创 沉淀-初级HTML5(三)

HTML5音频视频 音频播放 1.Audio(音频):HTML5提供了播放音频文件的标准 2.control(控制器):control属性供添加播放、暂停和音量控件 3.标签:定义声音,规定多媒体资源,可以是多个<!--按钮控制播放/暂停--><script> var a=document.getElementById("audio"); function click()

2017-03-30 19:34:04 301

原创 沉淀-初级html5(二)

HTML5编辑API之Range对象Range对象基本概念 一个Range对象代表页面上的一段连续区域。通过Range对象,可以获取或修改网页上的任何区域。<script> function rangeTest() { var html; showRangeDiv=document.getElementById("showRange"); selecti

2017-03-30 15:27:55 515

原创 沉淀-初级html5(一)

HTML5与HTML4的区别推出的理由及目标和语法的改变推出的理由及目标: 解决web上存在的各种问题: 1.web浏览器兼容性很低,规范不统一,没有被标准化。 2.文档结构不够明确 3.web应用程序的功能受到了限制 世界知名浏览器厂商对html5的支持:微软的IE9及以上,google的chrome,苹果的safari,Opera的欧朋,Mozilla的火狐Firefox语法的改变:

2017-03-27 23:56:53 453

转载 vue中main.js 里的/* eslint-disable no-new */

意项目中的这个,它的作用是:在js里面,new 一个对象,需要赋值给某个值(变量),用Vue实例化的时候,不需要赋值给值(变量),所以要单独给配一条规则,给new Vue这行代码上面加这个注释,把这行代码规则的校验跳过,通过eslint-disable。eslint的常用技巧之一

2017-03-23 19:11:42 9825

转载 webstorm卡在scanning files to index

webstorm 打开后,底部一直出现 scanning files to index。当项目中文件过多时,会一直卡在建立索引这一步,通常是在 npm install 之后导致,node_modules 中文件太多。解决方法: 将 node_modules 文件夹排除出将要建立索引的文件夹主要就是加载的文件太多,反应变慢的原因,排除大文件即可。

2017-03-23 19:04:44 808

原创 前端实时可视化开发工具

三种工具的使用:liveStyle官网:http://livestyle.io/Emmet LiveStyle有如下几个特点: 1. 即时更新(不会重新加载页面,样式修改以后无需保存也能预览);; 2. 多个页面同时预览(例:同时打开多个页面,并且关联到相同的CSS,此时修改该CSS,这些页面都能即时显示修改内容); 3. 双向修改(在Chrome开发者工具和Sublim...

2017-03-23 16:22:03 27089 2

转载 pageResponse.js一套视觉稿适配移动设备全家,让烦恼通通见鬼去

pageResponse.js最近发现一博主写的技术贴很实用很用心,不由的想自己备份一下,同时分享给各位同僚~~原理及说明1.使用transform:scale缩放页面,要求视觉稿高清2.页面以px为单位即可让h5适配各种移动设备,适配原则根据视觉稿比例缩放页面3.兼容性良好,支持ios4+、android2.3+、winphone8+系统4.大小1k,零依赖5.三种适配模式可选 auto

2017-03-18 12:43:27 411

转载 欢迎使用CSDN-markdown编辑器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl

2017-03-18 12:37:19 168

转载 手机移动端WEB资源整合

meta基础知识H5页面窗口自动调整到设备宽度,并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />忽略将页面中的数字识别为电话号码<meta name="format-detection

2017-03-16 23:06:04 335

原创 Sass中何时使用继承

1. 何时使用继承首先,混合器主要用于展示性样式的重用,而类名用于语义化样式的重用。因为继承是基于类的(有时是基于其他类型的选择器),所以继承应该是建立在语义化的关系上。当一个元素拥有的类(比如说.seriousError)表明它属于另一个类(比如说.error),这时使用继承再合适不过了。这有点抽象,所以我们从几个方面来阐释一下。想象一下你正在编写一个页面,给html元素添加类名,你发现你的某个类

2017-03-14 15:37:55 1404 1

转载 页面性能优化问题

PC端优化 缓存利用:缓存Ajax,使用CDN,使用外部js和css文件以便缓存,添加Expires头,服务端配置Etag,减少DNS查找等 请求数量:合并样式和脚本,使用css图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载 请求带宽:压缩文件,开启GZIP 代码层面的优化: 用hash-table来优化查找 少用全局变量 用innerHTML代替DOM操作,减少DOM操作

2017-03-12 14:50:48 366

转载 减少前端代码耦合

网上之前看的文章,很受用啊,就分享给大家看看。什么是代码耦合?代码耦合的表现是改了一点毛发而牵动了全身,或者是想要改点东西,需要在一堆代码里面找半天。由于前端需要组织js/css/html,耦合的问题可能会更加明显,下面按照耦合的情况分别说明:1. 避免全局耦合这应该是比较常见的耦合。全局耦合就是几个类、模块共用了全局变量或者全局数据结构,特别是一个变量跨了几个文件。例如下面,在html里面定义了一

2017-03-11 23:36:38 2756

原创 Webstorm的基本操作

说起来,比较主流的IDE呢,有DW,Sublime Text,Eclipse,Webstorm等,我主要介绍Webstorm。 为什么要独宠它呢?那就开始说说,Webstorm可以创建很多类型的文件,看图一目了然, 在有,各种面板应有尽有功能代码补全 自动 多光标功能 alt键选择内容不松手 代码格式化 ctrl+alt+l Emmet 代码补全 例:d

2017-03-08 19:45:44 5292

原创 用gulp打包发布项目

在发布之前还可以做代码优化: 1.压缩 2.合并 3.增加版本号首先,手动打包发布的网站比如:https://javascript-minifier.com 显然,手动打包麻烦费时费力的,那自从node.js出来以后,方便快捷,自动化处理。打包的主流3个工具: 1.Grunt 自动化构建工具 2.gulp 自动化构建工具 3.webpack 静态资源打包工具这里主要先

2017-03-08 17:50:06 12130 1

原创 如何在多个设备上调试网页

试想一下,如果在调试网页的时候,修改了兼容性代码,想要测试其在各设备上的效果,多个设备,刷新,查看,刷新,查看。。。这无异于是在浪费你的时间,那么,该怎么解决这个问题,下面就推荐一款工具。省时的浏览器同步测试工具http://www.browsersync.cn/ Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是

2017-03-08 13:56:28 797

原创 处理浏览器兼容性办法

对于搞前端的筒子们来说,兼容性无异于是基础并头疼问题,一直嚣张的不行啊,我仅用我勉强的功力,说说我知道的处理办法,要是有大神知道更好的或者写的有出入的地方还请指点一二。首先,明确支持哪些浏览器,风烛残年般的IE6,7,8使用的是越来越少,比如现在jquery2.x版本已经不支持他们了,知道了要兼容的浏览器,下面就是浏览器调试的问题了。先说说桌面端浏览器的调试。方法一下载所需兼容的浏览器直接测试,有页

2017-03-08 13:24:07 734

转载 webstorm-主题和配色

URL:http://blog.csdn.net/xiaoyu411502/article/details/467023911、引子以前介绍过 Sublime text 3 系列的文章,着重介绍了 Sublime text 3 如何下载、安装、插件、配置等内容。Sublime text 3的轻量和富扩展,为前端开发带来了很多的便捷,加快了代码的书写速度,尤其是配上 emmet,那书写速度堪称光速。现

2017-03-08 10:52:11 586

原创 Node.js介绍与安装使用

Node.js概念解析Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。解:可以在非浏览器环境下解释运行代码,速度很快。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。解:事件调用方法的异步执行。Node.js 的包管理器 npm,是全球最大的开源库生态系统。解:npm打包下载下载Node.js安装打开NodeJs官网,一般来说下载

2017-03-06 23:20:21 343

原创 实现网站的响应式轮播图

首先,得前人经验,借助插件实现轮播,不必吭哧吭哧绞尽脑计想逻辑,只需调属性即可,那么 怎么样来挑选第三方组件: 1.使用人数 以免踩坑 2.是否开源 3.文档是否齐全 使用帮助 4.活跃性 积极维护 5.小巧够用即可(轻量级)这里选择OwlCarousel2(其实选啥看自己兴趣,大同小异)<link rel="stylesheet" href="owlcarouse

2017-03-06 22:52:32 5167

原创 清除浮动最有效的css写法

说起来呢,基本上只要你给容器div加了float的属性,就需要清除浮动来使页面显示正常,那么,到底有什么方法可以让浮动轻松清除呢? 可以用display:flex;替代,但是它对IE8,9支持不是很好,所以不怎么这么用。1.在容器div的里面结束标记之前写如下这样的div这段代码:<div style="clear:both"></div>虽然通俗易懂,容易掌握,但是在页面中加入了一个无意义的空标

2017-03-04 20:15:14 20825

原创 推荐angularJs开发,调试,测试工具

首先是NodeJs代码编辑工具 sublime text 轻量级 webstorm 占的资源多一些断点调试工具chrome插件Batarang版本管理工具github tortoisegit代码合并和混淆工具grunt以及插件 grunt-contrib-uglify, 对代码进行混淆的 grunt-contrib-concat,合并文件 grunt-contrib-watch

2017-03-01 15:26:41 1544

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除