每一种美,都会有一双眼睛能看到;每一份爱,总会有一颗心会感受到。

随笔分类 -  html5+css3

摘要:context . restore() //弹出堆最上面保存的绘图状态context . save() //在绘图状态堆上保存当前绘图状态绘图状态可以看作当前画面应用的所有样式和变形的一个快照。而状态的应用则可以避免绘图代码的过度膨胀。转换(Transformations)context . rot... 阅读全文
posted @ 2014-06-13 16:47 温暖向阳Love 阅读(309) 评论(0) 推荐(0)
摘要:自定义页面、工具栏、内容、表单元素、列表、按钮等元素的外观智能电话和平板设备的高采用率最终导致增加了对移动 Web 开发人员和设计师的需求。jQuery Mobile 框架支持您创建能与原生应用程序开发结果相匹敌的移动 Web 体验,让用户能够通过 Web 浏览器提供对应用程序和网站的及时访问,而不... 阅读全文
posted @ 2014-05-21 17:22 温暖向阳Love 阅读(395) 评论(0) 推荐(0)
摘要:CSS3 Media Queries的介绍在W3CPlus上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少。前几天在《修复iPhone上submit按钮bug》上介绍了修复form中sumit按钮的bug。同一个项目,为了实现iPhone和iPad横板与竖板的风格,让我还是头疼了... 阅读全文
posted @ 2014-05-14 15:45 温暖向阳Love 阅读(343) 评论(0) 推荐(0)
只有注册用户登录后才能阅读该文。
posted @ 2014-05-14 15:43 温暖向阳Love 阅读(17) 评论(0) 推荐(0)
摘要:iPhone4s的屏幕分辨率是640x960,这样就带来一个问题:原来设计的320x480的设计出来的icon等图片,在高分辨率下就会显得模糊。在经过讨论、查阅资料和测试后,可以有方法解决哦~1. 对于采用 方式引用图片的:[html]view plaincopy屏幕图片测试原图320:原图480:... 阅读全文
posted @ 2014-05-14 15:30 温暖向阳Love 阅读(1045) 评论(0) 推荐(0)
摘要:CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度。友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了;实际使用中不会出现这样的问题。CSS3时钟式进度条复制代码链接地址:http://www.codefans.net/jscss/code/3573.s... 阅读全文
posted @ 2014-05-08 14:40 温暖向阳Love 阅读(595) 评论(0) 推荐(0)
摘要:一. 允许网页宽度自动调整:"自适应网页设计"到底是怎么做到的?其实并不难。首先,在网页代码的头部,加入一行viewport元标签。viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scal... 阅读全文
posted @ 2014-05-06 10:30 温暖向阳Love 阅读(420) 评论(0) 推荐(0)
摘要:http://icomoon.io/app/阿里巴巴http://iconfont.cn/help/iconuse.html3.1 PC端应用教程iconfont对于前端应用来说有很多便捷:1、自由变化大小2、自由修改颜色3、可以添加一些视觉效果如:阴影、旋转、透明度。4、兼容IE6应用步骤:1font-face声明字体@font-face {font-family: 'iconfont'; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format(' 阅读全文
posted @ 2014-04-09 08:54 温暖向阳Love 阅读(2741) 评论(0) 推荐(0)
摘要:新鲜出炉的30个精美的 jQuery & CSS3 效果【附演示和教程】 作为最流行的JavaScript开发框架,jQuery在现在的 Web 开发项目中扮演着重要角色,它简化了 HTML 文档遍历,事件处理,动画以及 Ajax 交互,而CSS3作为 CSS 的下一个版本,增加了圆角、旋转、阴影等强大的特性,甚至还可以实现需要JavaScript才能实现的复杂动画效果。这篇文章特别收集了2012年新鲜出炉的30个精美 jQuery & CSS3 效果,帮助Web开发人员快速实现可用性和用户体验更佳的功能,让访问者对网站留下非常好的印象。记得分享和推荐哦。精美 jQuery 效 阅读全文
posted @ 2014-03-20 16:22 温暖向阳Love 阅读(379) 评论(0) 推荐(0)
摘要:HTML5 移动应用框架ionic手机移动 Web 开发框架ChocolateChip-UI、IonicChocolateChip-UI的主要特性有,支持iOS 7、Android Jelly Bean和Windows 8平台,采用HTML5、CSS和JavaScript常用技术,使用起来更方便,还能满足阿拉伯语、波斯语等从右至左的阅读习惯,实现内容顺序以及页面布局的逆转。Vanilla JS——世界上最轻量的JavaScript框架(没有之一) 阅读全文
posted @ 2014-03-17 14:46 温暖向阳Love 阅读(260) 评论(0) 推荐(0)
摘要:作为在移动端开发的web程序员来说,如果不懂设备的一些性能,在开发上面是非常耗时间的一件事,同时带来负面影响的是项目的进度被拖腿了。下面是个人收集的一些移动端设备的分辨率参数:1、 平板设备:1) iPad 4、iPad 5屏幕尺寸是9.7英寸,分辨率在2048*1536.2) Ipad mini、iPad 2屏幕尺寸是7.9英才,分辨率是1024*7683) 三星Galaxy note 10.1、Tab3.8、Tab2 P5100屏幕尺寸是10.1英寸,屏幕分辨率是1280*8004) 三星Galaxy Tab P3110、Tab3.7屏幕尺寸是7英寸,屏幕分辨率是1024*6005) 谷歌 阅读全文
posted @ 2014-02-27 15:29 温暖向阳Love 阅读(2048) 评论(0) 推荐(0)
摘要:1 创建主屏幕图标 (Creating a home screen icon ,for ios)123456//57*57启动画面图像 (Creating a splash screen, for ios)1234567891011123 全屏 (Making it full-screen, for ios)– 更像本地App14 改变状态栏 (Changing the phone status bar, for ios)content属性default, black and black-translucent15 阻止缩放 (Preventing scaling)16 阻止弹性滚动(Prev 阅读全文
posted @ 2014-02-27 14:31 温暖向阳Love 阅读(1884) 评论(0) 推荐(0)
摘要:HTML5在国内外越来越受到互联网开发团队的青睐。国外,谷歌兴致勃勃地开发Chrome Web Store,微软发布了支持使用HTML5技术开发的“Irish Spring”主题网站,诺基亚斥巨资购得并打造的NOKIA MAP业务。国内的互联网巨头对这股大洋彼岸吹来的新web开发标准也同样感兴趣,开始着手HTML5产品的试水。网易微博iPhone平台Web App产品在2012年第一季度已经成功上线。现将此项目开发的经验教训分享给大家,希望与大家在HTML5开发环境中共同成长。人员配置一、开发人员配置产品经理:1名;交互设计师:1名;视觉设计师:1名;前端工程师:1名;后台工程师:2名;测试人 阅读全文
posted @ 2014-02-25 15:53 温暖向阳Love 阅读(1094) 评论(0) 推荐(0)
摘要:最近专注研究 jQuery Mobile —— 一款很方便就可以把 Web App 包装成适合 Android 与 iPhone 等触屏移动设备的 Javascript 库,结合 jQuery Mobile 与 HTML5 ,可以很方便的开发出一款具有良好界面及用户体验的 Web App,在这个过程中我收获良多,因此决定针对使用 jQuery Mobile 与 HTML5 开发 Web App 写一个系列的文章。在开始之前,我首先简述 Web App 与原生 App 各自的优缺点。一. Web App 与原生 App 的优缺点1.Web App(1).优点1.开发成本低,周期短, Web 开发 阅读全文
posted @ 2014-02-20 09:57 温暖向阳Love 阅读(651) 评论(0) 推荐(0)
摘要:这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件、事件响应以及可以调用的方法,而作为该系列的第一篇文章,Kayo 将会先介绍 jQuery Mobile 的基本情况和一些基础的实例。一.jQuery Mobile 的渐进增强设计与浏览器支持在上一篇文章中, Kayo 简单介绍了渐进增强设计的概念,可以参考文中的第四点内容。而 jQuery Mobile 虽然是一些新 web 技术( HTML5、CSS3 和 JavaScript )的产物,但对于不能提供以上技术支持 阅读全文
posted @ 2014-02-20 09:01 温暖向阳Love 阅读(809) 评论(0) 推荐(0)
摘要:因为HTML5暂时无法短期内在PC普及,主要方向在使用高端浏览器的高端移动设备,所以可以用作开发Android系统的App。但只有Android2.2以上、iOS3.2以上均支持HTML5,两大平台有望全系列支持HTML5,HTML5可以用作离线应用的开发,离线应用就是把需要的资源先缓存到本地,下次再查看时无需联网。使用HTML5离线应用带来的好处:提供更快、更简便的服务,代码可高度重用,服务发布方便,HTML5主要应用:Web邮箱、WebRSS、Web地图等服务在无网络环境的使用,HTML5技术重点关注在动画、游戏方面,地理定位方面的应用正在崛起,HTML5还被用于改善用户体验。HTML5还 阅读全文
posted @ 2014-02-19 14:43 温暖向阳Love 阅读(5498) 评论(0) 推荐(0)
摘要:目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计。本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的在WEB上制作游戏、制作报表等,并且还附带源码哦,赶快收藏吧! 下面一起来看看这些jQuery/HTML5特效应用。 1、HTML5实现中国象棋游戏 HTML5的确很强大,这款用HTML5实现的中国象棋是不是很酷,小编在这款HTML5中国象棋中玩不过电脑,你们也一起来挑战一下HTML5中国象棋游戏吧。 HTML5实现中国象棋游戏 源码下载 2、jQuery茶壶360度图片旋转特效 这也是一款j... 阅读全文
posted @ 2014-01-28 10:23 温暖向阳Love 阅读(5153) 评论(1) 推荐(1)
摘要:【兼容html5方案】百度贴吧,百度图片的实现腾讯isux研究院的实现 淘宝- 我的淘宝页实现同上,只不过是不同版本不得不提的一个插件https://github.com/aFarkas/html5shiv在github 上达到了3453 星的高度,获得了国内外的广泛认可,如果你厌烦了满页面的div 想尽早拥抱html5 元素,就使用它吧。【兼容模式的选择】关于兼容模式百度首页使用的是百度搜索页使用的是百度图片,腾讯isux研究院,淘宝收藏页使用的是X-UA-Compatible 这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式chrome=1写法可以达到 阅读全文
posted @ 2014-01-21 09:38 温暖向阳Love 阅读(557) 评论(0) 推荐(0)
摘要:xiaolingzi发表于2012-05-31 23:42:29首先,我们先了解一下html5shiv.js是什么。html5shiv.js是一套实现让ie低版本等浏览器支持html5标签的解决方案。实现原理:见如何让ie低版本浏览器支持html5标签。废话不多说,我们先上源代码,代码有点长,但保持原来的注释有利于大家理解,不想直接阅读的就点收缩代码然后往下看。源码原地址:https://github.com/aFarkas/html5shiv。-收缩代码1234567891011121314151617181920212223242526272829303132333435363738394 阅读全文
posted @ 2013-11-15 14:34 温暖向阳Love 阅读(931) 评论(0) 推荐(1)
摘要:transform使用参考指南2010-09-18 16:06:33|分类:html5+css3|字号订阅语法transform :none | [ ]*取值指定一个身份转变说明应用于block水平和inline水平的元素。transform可以对元素进行角度旋转和缩放,请使用webkit内核最新版浏览器浏览该文章以保证CSS3效果能够完全呈现在设置了transform属性后,可以设置transform-origin属性,这个属性控制变形时的源点,也就是变形时围绕的点。这个属性接受两个参数,可以是百分比、top/center/bottom、带单位的数值。兼容性浏览器支持情况:-webkit-t 阅读全文
posted @ 2013-11-07 11:20 温暖向阳Love 阅读(495) 评论(0) 推荐(0)