摘要: 前言 在最近的项目中用到了html5的本地存储,下面总结一下。 1、html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2、localStorage && sessio 阅读全文
posted @ 2015-09-30 09:04 风雨后见彩虹 阅读(4706) 评论(1) 推荐(1) 编辑
摘要: Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用。 Html5获取地理位置信息是通过Geolocation API提供,使用其getCurrentPo 阅读全文
posted @ 2015-09-29 23:22 风雨后见彩虹 阅读(2024) 评论(0) 推荐(0) 编辑
摘要: 常用单位 在CSS中可以用很多不同的方式来设定字体的尺寸。一般来说,这些单位被分成两大类:绝对单位(absolute)和相对单位(relative)。 绝对单位在大多数情况下是相对于某些实际量度而言的固定值,即是说它们一旦设定,就不会因为其他元素的字体尺寸变化而变化。 相对单位没有一个固定的度量值, 阅读全文
posted @ 2015-09-29 17:25 风雨后见彩虹 阅读(3259) 评论(0) 推荐(1) 编辑
摘要: 方法一: 方法二: 方法三: 方法四: 当然这四种方法的完美程度是一目了然的。 阅读全文
posted @ 2015-09-29 08:45 风雨后见彩虹 阅读(6376) 评论(0) 推荐(2) 编辑
摘要: 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。 2.type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。3.timeout:要求为Number类型的参数 阅读全文
posted @ 2015-09-28 22:17 风雨后见彩虹 阅读(1833) 评论(0) 推荐(0) 编辑
摘要: 这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js,页面就会自动监测你的请求(包括Ajax请求),在事件循环滞后,会在页面记录加载的状态以及进度情况。此插件的兼容性很好,可以兼容IE8以上的所有主流插件,而且其强大之处在于,你还可以引入加载进度条的主题样式,你可以选择任意颜色和 阅读全文
posted @ 2015-09-28 17:23 风雨后见彩虹 阅读(4668) 评论(1) 推荐(0) 编辑
摘要: 最近开始讨厌写一个demo,写好之后要上传到服务器,传好之后还要找对地址,以后如果改版还需要下载代码,编辑代码,再上传。多么繁复的过程,我只是写个demo而已。 于是,我开始寻找在线工具实现 1. CodePen CodePen只是一个web前端的运行场地,具备机动、训练和分享等多种功能。同时,Co 阅读全文
posted @ 2015-09-28 14:40 风雨后见彩虹 阅读(1606) 评论(0) 推荐(0) 编辑
摘要: AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因为 HTML 加载不受制于脚本加载。AngularJS 扩展了 HTMLAngularJS 通过ng-directives扩展了 HTML。ng-app指令定义一个 Angula... 阅读全文
posted @ 2015-09-28 13:01 风雨后见彩虹 阅读(522) 评论(0) 推荐(0) 编辑
摘要: CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在规范中支持的效 阅读全文
posted @ 2015-09-28 10:25 风雨后见彩虹 阅读(57898) 评论(2) 推荐(10) 编辑
摘要: 什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最 阅读全文
posted @ 2015-09-26 20:25 风雨后见彩虹 阅读(3100) 评论(0) 推荐(0) 编辑
摘要: 从哪里下载 Zepto地址:http://zeptojs.com/中文版地址:http://www.css88.com/doc/zeptojs_api/这个问题看起来很蠢,从官网下载不就行了嘛!可是你有没有发现下载链接上面有行小字呢?在这个README里面你会惊奇地发现,Zepto 源码中有 14 ... 阅读全文
posted @ 2015-09-25 17:07 风雨后见彩虹 阅读(1129) 评论(0) 推荐(0) 编辑
摘要: 现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。 html代码: js代码: 阅读全文
posted @ 2015-09-25 10:11 风雨后见彩虹 阅读(49113) 评论(0) 推荐(5) 编辑
摘要: 下面介绍一下通过jquery和css自定义video播放控件。 Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受 阅读全文
posted @ 2015-09-24 22:48 风雨后见彩虹 阅读(8090) 评论(0) 推荐(0) 编辑
摘要: 随着互联网的飞速发展以及HTML5的应用,越来越多的项目中用到video,audio当常用标签。 audio 标签属性 当然audio元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式: 再如下面: video标签属性 下面先介绍下video标 阅读全文
posted @ 2015-09-24 10:44 风雨后见彩虹 阅读(16365) 评论(0) 推荐(2) 编辑
摘要: 在做网页的时候,常常需要实现圆角,以前的做法就是切图,现在好了,有了css3的 border-radius 特性之后,实现边框圆角效果就非常简单了,而且其还有多个优点:一是减少网站维护工作量;二是提高了网站的性能,少了对图片的 HTTP 的请求,网页载入速度将变快;三是增加视觉美观性。 border 阅读全文
posted @ 2015-09-22 23:35 风雨后见彩虹 阅读(4346) 评论(0) 推荐(0) 编辑
摘要: 最近做一个移动端微信页面项目,在微信页面中有视频播放,但是需要禁止IOS的自动全屏播放(前提必须使用video标签)。如: <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> < 阅读全文
posted @ 2015-09-22 20:45 风雨后见彩虹 阅读(5004) 评论(0) 推荐(0) 编辑
摘要: 在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态、加速度等数据(另还有deviceOrientation事件提供了设备角度、朝向等信息)。而通过DeviceMotion对设备运动状态的判断,则可以帮 阅读全文
posted @ 2015-09-17 18:47 风雨后见彩虹 阅读(2649) 评论(0) 推荐(0) 编辑
摘要: CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> <label>请选择您所在的城市</label> <select class="select" name="" id="c_city"> 阅读全文
posted @ 2015-09-17 18:37 风雨后见彩虹 阅读(1962) 评论(0) 推荐(0) 编辑
摘要: columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列的宽度;[ column-count ]:设置或检索对象的列数。 css代码: html代码: 结果 阅读全文
posted @ 2015-09-17 18:34 风雨后见彩虹 阅读(10008) 评论(0) 推荐(0) 编辑
摘要: 早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧。 我一般遇到这情况都会把li浮动起来,这样就没有间隙。但是解决这个未知间隙,还是有很多办法的,在w3cplus上提供了好几种解决办法。在这总结一下。 先看结构 阅读全文
posted @ 2015-09-16 17:38 风雨后见彩虹 阅读(1973) 评论(0) 推荐(1) 编辑
摘要: 语法: 其中number取值:使用浮点数指定对象所分配其父元素剩余空间的比例。设置或检索伸缩盒对象的子元素如何分配其剩余空间。(伸缩盒最老版本) html代码: css代码: 得到的结果如图所示: 注:其实上面的css代码中-ms-box-flex与box-flex可以省略,为什么这么说呢,IE6- 阅读全文
posted @ 2015-09-14 22:37 风雨后见彩虹 阅读(1274) 评论(0) 推荐(0) 编辑
摘要: 一、行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段 阅读全文
posted @ 2015-09-14 17:37 风雨后见彩虹 阅读(297005) 评论(1) 推荐(28) 编辑
摘要: 它的语法如下: display:none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | t 阅读全文
posted @ 2015-09-14 16:02 风雨后见彩虹 阅读(1604) 评论(1) 推荐(1) 编辑
摘要: 在博客园中看到这样一篇文章,关于disabled和readonly的区别,以前还真的没有注意它们的区别,还是有必要知道它们的区别的,所以转载了。 这两个属性有类似之处,但是区别也是巨大的,之所以说类似,是因为这两个属性好像都貌似能够将指定的元素设置为"不可用"状态,下面就简单介绍一下它们两个的区别, 阅读全文
posted @ 2015-09-13 20:32 风雨后见彩虹 阅读(3991) 评论(0) 推荐(2) 编辑
摘要: 本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normaliz 阅读全文
posted @ 2015-09-13 09:09 风雨后见彩虹 阅读(3001) 评论(0) 推荐(1) 编辑
摘要: 在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 阅读全文
posted @ 2015-09-13 08:47 风雨后见彩虹 阅读(2987) 评论(0) 推荐(0) 编辑
摘要: 对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。如下: HTML 代码: <div class="box"> <p>我是浮动的</p> <p>我也是居中的</p> </div> CSS 代码: .box{ 阅读全文
posted @ 2015-09-12 22:38 风雨后见彩虹 阅读(2297) 评论(1) 推荐(0) 编辑
摘要: 没有区别。 你需要明白 IIFE 的原理,我简单说一下: IIFE 并非必须,传统一点可以这么写: 那么为什么要 IIFE? 于是,开发者们想找一个可以解决以上问题的写法。那么像下面这么写行不行呢? 当然是不能,但是为什么呢?因为 function foo(...){} 这个部分只是一个声明,对于解 阅读全文
posted @ 2015-09-10 17:14 风雨后见彩虹 阅读(1016) 评论(1) 推荐(0) 编辑
摘要: 简介 Javascript 中一个最重要的特性就是闭包的使用。因为闭包的使用,当前作用域总可以访问外部的作用域。因为Javascript 没有块级作用域,只有函数作用域,所以闭包的使用与函数是紧密相关的。 各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取 阅读全文
posted @ 2015-09-10 17:06 风雨后见彩虹 阅读(2469) 评论(0) 推荐(0) 编辑
摘要: Scoping & Hoisting 例: 上面这段代码在运行时会产生什么结果? 尽管对于有经验的程序员来说这只是小菜一碟,不过我还是顺着初学者常见的思路做一番描述: 嗯,看起来无懈可击的推理啊,但让人惊讶的是:答案竟然是 2!为什么? 别着急,我会解释给你听。首先我要告诉你这不是什么错误,而是 J 阅读全文
posted @ 2015-09-10 16:03 风雨后见彩虹 阅读(1719) 评论(0) 推荐(0) 编辑