摘要：
一、DeviceOrientation事件实现摇一摇功能 DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。 device... 阅读全文
随笔分类 - HTML5+CSS3
高性能 CSS3 动画
2014-08-11 14:47 by 臭小子1983, 196 阅读, 收藏,
摘要：
高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。 关于流畅度，主要体现在前端动画中，在现有的前端动... 阅读全文
HTML5新功能之八 《web works多线程》
2014-06-20 17:45 by 臭小子1983, 2446 阅读, 收藏,
摘要：
一、多线程 js是单线程的去跑代码，比如如果做一个循环从0到1亿相加然后输出，浏览器可能会最后到假死（无响应状态），也可以非常慢， 在FF下测试使用了：3986ms 如果使用web worker来处理，只需要1ms 1 2 3 4 5 count.js 1 onmessage = fu... 阅读全文
HTML5新功能之七 《历史管理》
2014-06-14 22:48 by 臭小子1983, 215 阅读, 收藏,
摘要：
什么是历史管理 象PC机我在浏览器打开一个站之后又打开一个站，这时候就存到了历史管理中，可以通过前退后退来控制页面的跳转. 一、HTML5的window.onhashchange 获取历史管理 1 2 3 4 阅读全文
HTML5新功能之六 《Web通信、WebSockets和跨文档消息传输》
2014-02-13 18:55 by 臭小子1983, 944 阅读, 收藏,
摘要：
一、WebSockets介绍一、什么是WebSockets 它可以让我们无需AJAX请求即可与服务器端对话，WebSockets是在一个(TCP)接口进行双向通信的技术，PUSH技术类型。 同时WebSockets仍将基于W3C标准，目前为止，Chrome和Safari的最新版本浏览器已经支持W... 阅读全文
HTML5新功能之二 《Geolocation获取地理位置》
2014-02-07 11:38 by 臭小子1983, 483 阅读, 收藏,
摘要：
获取地理位置一、定位原理IP地址、GPS、wifi、GSM/CDMA1、PC端定位的方式：是通过IP地址、wifi来进行定位。2、导航：通过GPS来位置定位3、手机定位：通过GSM、CDMA、3G二、geolocation属性和方法 1、 getCurrentPosition(获取成功调用的参数返回的是一个对象的信息， 获取失败调用的参数， 选项设置对象)：获取当前地理信息 2、 wacthPosition()：监视当前地理位置 3、 clearWacth()：清除当前地理信息 getCurrentPosition属性： error对象： 1、code属性：返回1（用户拒绝了位置服... 阅读全文
HTML5新功能之三 《离线应用程序》
2014-01-20 20:31 by 臭小子1983, 452 阅读, 收藏,
摘要：
离线文件应用一、什么是离线web应用程序 我们通常使用浏览器缓存在用户磁盘上存储web单页，在用户再次浏览的时候已节省带宽，但即便这样，依然无法在没有Internet的情况下访问Web。 为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存... 阅读全文
HTML5新功能之一《web Storage 本地存储》
2014-01-19 15:29 by 臭小子1983, 382 阅读, 收藏,
摘要：
一、本地存储本地存储分为两个内容：1、web Storage 2、本地数据库web Storage：存储机制是对HTML4中cookie存储机制的一个改善。 本地数据库：它可以在客户端本地建立一个数据库，将原本保存在服务器端数据库中的内容现在可以直接保存在客户端本地，减轻了服务器的压力，同时也加快... 阅读全文
HTML5新功能之四 《canvas绘制》
2014-01-17 00:18 by 臭小子1983, 610 阅读, 收藏,
摘要：
一、canvas基础一、canvas要学习的内容 1、canvas绘制基本图型 2、使用路径的方法，绘制多边型和圆型 3、渐变图型、图型的缩放、图型的组合、绘制阴影 4、在画布中绘制图像、制作图像、平铺图像、裁剪图像 5、在画布绘制文字、给文字加边框 6、如何保存及恢复绘图状态，在画布中... 阅读全文
less CSS预编译器使用方法
2013-12-21 21:01 by 臭小子1983, 801 阅读, 收藏,
摘要：
一、lesscss1、官方网站：http://www.lesscss.net/article/home.html2、crunchCSS编写工具：http://crunchapp.net/与lessWin配合使用一、什么是LesscssLess 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加... 阅读全文
html5新功能之五 《audio音频和video视频》
2013-07-28 18:39 by 臭小子1983, 784 阅读, 收藏,
摘要：
html5作为下一代web标准，年前轩起了html5热潮。对于html5我只是本着了解看看。关于html5和RIA（silverlight，flash，JavaFx等）我不想说什么，也没有什么可说的，存在就有其存在的理由。孰优孰劣，留给事实、时间来证明的。 在html5中出现了一些新特性：can... 阅读全文
HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
2013-07-24 17:15 by 臭小子1983, 221 阅读, 收藏,
摘要：
现在屏幕分辨率的范围很大，从320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。 demo预览地址：http://webdesignerwall.com/demo/adaptive-design/final.html demo下载地址：http://www.... 阅读全文
CSS3 @font-face
2013-06-18 11:42 by 臭小子1983, 280 阅读, 收藏,
摘要：
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定义字体，一句话这些都是@font-face实现的，为了能让更多的朋友知道如何使用他，今天我主要把自己的一点学习过程贴上来和大家分 阅读全文
CSS3 icon font完全指南
2013-06-17 15:57 by 臭小子1983, 299 阅读, 收藏,
摘要：
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face)，包括IE6都支持，只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon，我们就可以尝试使用font来实现，本文将详细讲解这种用法。为什么要将icon做成字体？在很多网站项目中，我们常常会用到各种透明小图标，然后网站要兼容各个浏览器，也可能会有多个尺寸，甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式，比如png8 alpha透明或者png8 index透明等。比如，twitter用到的各种小icon：这种情况下，使用字体来实现图标就有很多优势：字体文件小，一般20-50k 阅读全文
CSS画图 强悍 各种图形 果断分享
2013-04-18 18:32 by 臭小子1983, 534 阅读, 收藏,
摘要：
1、正方形最终效果：CSS代码如下：1 #square {2 width: 100px;3 height: 100px;4 background: red;5 } 2、长方形最终效果：CSS代码如下：1 #rectangle {2 width: 200px;3 height: 100px;4 background: red;5 } 3、圆形最终效果：CSS代码如下：1 #circle {2 width: 100px;3 height: 100px;4 background: red;5 -moz-border-radius: 50px;... 阅读全文
30+ CSS Grid System
2013-01-10 19:19 by 臭小子1983, 441 阅读, 收藏,
摘要：
Vote up!网站制作总是离不开布局，固定布局、流体布局、弹性布局这几种是大家常见的布局方式，以及现在越来越多的Responsive布局。布局方法很多，但有没有想过用最简单的方法让你随时能做到应付自如呢？其实有的，很多人都在使用网格布局系统，使用一套成熟的网络系统，让自己一劳永逸。常见的网络布局有：Blueprint: A CSS Grid Framework、960 CSS Grid System、Tripoli Framework、YAML – Yet Another Multicolumn Layout、YUI Grid CSS等，而且现在网格上也为这些网格布局提供了很多工具，比如说： 阅读全文
响应式网站之测试工具
2013-01-10 19:09 by 臭小子1983, 250 阅读, 收藏,
摘要：
Vote up!有很多工具和技术，能创建一个完美的网站，针对于不同的用户群体。同时，网页设计已经不在单纯是一个简单的布局，相对来说比以前复杂的多。因为许多不同的浏览器分辨率和设备的出现，传纺的网页展示风格并不适合所有的设备，这样就要求Web页面出来要适应于不同的屏幕分辨率和不同的终端设备，比如说移动终端设备。值得庆幸的是，Responsive设计可以实现各种分辨率和移动终端的效果。而且有很多工具来创建创建这种技术，可以让你的网站外观在不同设备显示不同效果。今天为大家搜集了responsive设计的测试工具，希望大家在工作中能运用得上。1、Responsive这是一个测试工具，可以让你看到测试网 阅读全文
响应式网站之实践 -- CSS3 Media Queries
2012-11-28 14:54 by 臭小子1983, 194 阅读, 收藏,
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html demo查看地址：http://www.webdesignerwall.com/demo/media-queries/ CSS2允许你对特定media类型制定样式，例如针对屏幕或者打印机。css3提供了更加强大的media queries，你可以针对不同media类型设置表达式，根据不同的条件设置不同的样式。例如你可以为大屏幕设置一种样式，为mobile设置另外一种样式。这个功能相当强大，你可以不修改页面内容的情况下，为不同设备提供不... 阅读全文
Media Queries 媒体查询详解
2012-05-17 11:00 by 臭小子1983, 586 阅读, 收藏,
摘要：
一、Media Queries直译过来就是“媒体查询”在我们平时的Web页面中head部分常看到这样的一段代码：1 2 3 4 5 或者这样的形式：6 7 二、Media Queries使用方法：@media 设备类型 and (设备特性) { 样式代码 }@media screen and (max-width:960px){ .... }一、设备类型值：1、all：所有设备2、screen ：电脑显示器3、print：打印用纸或打印预览视图4、handheld：便携设备5、tv：电视机类型的设备6、speech：语意和音频盒成器7、braille：盲人用点字法触觉回馈设备8、embosse 阅读全文
-webkit-filter图片处理滤镜
2012-05-14 15:31 by 臭小子1983, 222 阅读, 收藏,
摘要：
这两天有看到国外网站纷纷介绍-webkit-filter，开始很迷惑，丫是想要学IE吗？今天看了下，和IE的滤镜没一毛关系啊，而且，效果很赞！这些滤镜效果最初是用于SVG的，W3C引入到CSS中，然后制定了CSS Filter Effects 1.0，现在webkit率先支持了它。现在规范中支持的效果有：grayscale 灰度sepia 褐色saturate 饱和度hue-rotate 色相旋转invert 反色opacity 透明度brightness 亮度contrast 对比度blur 模糊drop-shadow 阴影嗯，有些和CSS3重复了，不过，具体要怎么用还要看具体情况，至少我们 阅读全文
浙公网安备 33010602011771号