HTML5&CSS3 - 随笔分类 - 叶小钗

HTML5应用程序缓存Application Cache

摘要：什么是Application CacheHTML5引入了应用程序缓存技术，意味着web应用可进行缓存，并在没有网络的情况下使用，通过创建cache manifest文件，可以轻松的创建离线应用。Application Cache带来的三个优势是：① 离线浏览② 提升页面载入速度③ 降低服务器压力而且... 阅读全文

posted @ 2015-02-04 15:16 叶小钗阅读(43510) 评论(7) 推荐(13)

【shadow dom入UI】web components思想如何应用于实际项目

摘要：回顾经过昨天的优化处理（【前端优化之拆分CSS】前端三剑客的分分合合），我们在UI一块做了几个关键动作：① CSS入UI② CSS作为组件的一个节点而存在，并且会被“格式化”，即选择器带id前缀，形成的组件如图所示：这样做基本可以规避css污染的问题，解决绝大多数问题，但是更优的方案总是存在，比如w... 阅读全文

posted @ 2014-12-17 08:07 叶小钗阅读(6506) 评论(0) 推荐(3)

如何判断一个DOM元素正在动画，一个CSS“阻塞”JS的例子

摘要：一般情况下CSS不会直接影响JS的程序逻辑，但是以CSS实现动画的话，这个便不太确定了，这个故事发生在与UED迁移全局样式的过程。曾经我有一段实现弹出层隐藏动画的代码是这个样子的：1 if (this.needAnimat && typeof this.animateHideAction == 'f... 阅读全文

posted @ 2014-12-01 21:22 叶小钗阅读(6013) 评论(6) 推荐(2)

【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

摘要：前言我们在手机上布局一般是这个样子的：其中头部对整个mobile的设计至关重要，而且坑也很多：① 一般来说整个header是以fixed布局，fixed这个产物在移动端来说本身坑就非常多② 在Hybrid应用中，Header很多时候扮演了不一样的角色，首先要完成以webview(window)为容器... 阅读全文

posted @ 2014-11-06 19:20 叶小钗阅读(9558) 评论(2) 推荐(7)

如何停止CSS3的动画？

摘要：前言我们在移动端一般使用zepto框架，与其说zepto是jquery的轻量级替代版，不如说是html5替代版我们在js中会用到animate方法执行动画，这个家伙可是真资格的动画，完全是css一点点变化的！而zepto则不然，使用的是HTML5/CSS3的方案，而CSS相关是不保存元素状态值的，也没办法保存，所以停止动画就成了一大问题我们今天就一起来讨论下相关停止动画的方案，反正没有什么好的......CSS3动画原理在现有浏览器中，一般有两种模式（我只知道两种）：一种是js动画，他是动态改写元素的style实现动画，所以任意时间想停止动画都是没问题的，因为我们可以获得各个阶段的状态值另一种阅读全文

posted @ 2013-11-19 11:39 叶小钗阅读(28269) 评论(3) 推荐(6)

【写漂亮的博客】让我们的博客更加漂亮，让我们的博客支持响应式布局！

摘要：前言很多朋友问我的博客是什么软件写的，嘻嘻，其潜台词是我的博客页面还挺好看的呢！！！心里美滋滋的，这里就把方法共享出来吧定制样式而已我的博客主要是对H1的样式做了一点改变，给H1加上了背景色，并且对其文字做了一点改变，我们来看看我的博客的页面；其中的centercontent就是博客的主体，我们博客园其实是设置了地方可以定制样式的：在这个地方设置就可以了，我这里是这样写的：<style type="text/css"> #cnblogs_post_body { color: black; font: 0.875em/1.5em "微软雅黑" 阅读全文

posted @ 2013-05-27 12:23 叶小钗阅读(6765) 评论(19) 推荐(30)

【探索HTML5第二弹05】响应式布局（中），一步一步响应式布局

摘要：前言前天初步探究了一次响应式布局，虽然花了一天功夫，做出来的东西还是不行，在此我还是认为要做响应式布局设计应该先行，应该先制作3个以上的设计图出来，但是对于手机来说，图片流量也是个问题，但是这个我们暂时不管了，还是先拥抱移动互联网吧，继续我们的响应式布局！固定宽度布局在飞之前，我们还是应该先爬一爬，先来个固定宽度布局的页面吧，我今天还是先搞了一本书，看看系统的响应式布局是怎么回事的吧：理论上，我们应该从移动开始设计慢慢到屏幕但是现在我们无视这个理论吧我们今天要做的一个页面搞简单点大致如此布局即可：好了，具体做什么我还没想到呢，我们具体就做一个电影简介吧，于是开始布局： 1 <!DOCTY 阅读全文

posted @ 2013-05-17 15:05 叶小钗阅读(4045) 评论(12) 推荐(20)

【探索HTML5第二弹04】响应式布局（上），让我们一起来响应式布局吧

摘要：前言第一次看到响应式布局这个东西的时候，我还以为又出了新东西呢，稍微研究了下才发现其实也是现有资源的组合而出的创新，中国什么时候也搞一个这种创新呢？所谓响应式布局，大意是在不同设备上（不同尺寸下）都能以比较合理的方式显示，大家千万不要觉得iphone上的显示感觉还不差，我们就说说博客园吧，其实园子该改成响应式布局，只不过要花点功夫。我们首先进入博客园后，手机对整个页面是有一定缩放的，所以看上去还是全屏呢，然后你要看其中一个内容还要滑大，左边完了要看右边又要滑过去，哎真是费力不讨好啊，不注意点到一个a标签又不见了，所以这真不是比较友好的界面。响应式布局的提出是比较有意思的，根据不同的尺寸做不同的阅读全文

posted @ 2013-05-15 17:41 叶小钗阅读(3655) 评论(12) 推荐(9)

【探索HTML5第二弹03】走近地图应用的世界，看我们google地图可以看些什么！

摘要：前言昨天，前天都有一些事情了，自己的学习任务有所耽搁，但这不是主要原因，主要原因是昨天和前天都在搞canvas相关东西，这个东东怎么说呢？我是越搞越不能确定自己是否会用到，所以过程中有点纠结，然后慢慢时间就过去了。另外，我本来想重新学习HTML5的，但是发现在走之前的老路，重复的过程就没必要了，我要从新思考一下最近的学习计划。最近开始接触了google地图应用，那确实叫一个不错啊！！！可以完成很多事情了，这里用到的是GMaps.js，这里将其简单说下吧！进入Gmaps的世界简单应用 1 <!DOCTYPE html> 2 <html xmlns="http://ww 阅读全文

posted @ 2013-05-09 09:31 叶小钗阅读(1493) 评论(2) 推荐(6)

【探索HTML5第二弹01】HTML5的前世今生以及来世

摘要：前言新入职的团队，每天工作强度很大，我感觉在那里待一天要干原来1.5天的事情，虽然才去两天就深刻的感受到了什么是“程序员”了，原来我一直不是一个称职的程序员。新团队加班很厉害，但是我现在却不在意，我现阶段需要这种高强度的工作量历练，一年下来再看其他吧。但是，我期间还是有一定忐忑与不自信的，因为阅读全文

posted @ 2013-05-06 23:00 叶小钗阅读(1967) 评论(1) 推荐(3)

【实战HTML5与CSS3】免费制作威客页面啦（附源码）

摘要：前言接着昨天的写，居然有圆友找到了网站原网址，这里也一并弄出来了，发现他们做出来其实和原型图还有一点差异呢：http://www.tmtpost.com/原型图今天我们要做的是这张图，我在威客上面找了好久，终于找到一张较合适的图呀，今天我们就来无偿奉献下吧，有图有真相，先上图吧！！这里也对自己提出要求，希望做出来的页面与设计图完全一致，但估计有点玄，希望大致一致吧，于是我们开始动手吧！开始切图第一步，让我们先把背景图给搞下来吧，这个尺寸与大小我感觉应该合适吧。第二步，将logo剪切了第三步，我们看看会用到哪些小图标，先全部给抠下来吧，暂时只弄了这么多需要再弄吧：我PS水平更加水到没边了，完全初阅读全文

posted @ 2013-05-05 17:26 叶小钗阅读(5560) 评论(19) 推荐(15)

【实战HTML5与CSS3】用HTML5和CSS3制作页面（上）

摘要：前言周一离职并且入职了，于是开始了做新项目，那天我问了下前端大哥，我们做的项目需要兼容哪些浏览器，他说需要兼容IE9以上与chrome，ff，我一下就诡异的笑了。。。。这不是HTML5与CSS3项目的温床吗？这次真的捡到宝了，再也不用担心IE678的问题了，可以肆意的使用最新的技术了。紧接着问题也来了，我现在需要切图了，对于我这种前端，css一直是短板，更何况切图！！！说实话我还真没有完整的切一张图来试试，于是今天让我们来试试吧！！！原型图今天我们要做的是这张图，我在威客上面找了好久，终于找到一张较合适的图呀，今天我们就来无偿奉献下吧，有图有真相，先上图吧！！这里也对自己提出要求，希望做出来的阅读全文

posted @ 2013-05-04 19:08 叶小钗阅读(3764) 评论(6) 推荐(5)

【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)

摘要：目录【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！【实战HTML5与CSS3 第二篇】绚丽的快速导航！【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)前言昨天的进度有点延缓，只做了快速导航特效，都是晚上回来一点多才基本结束，其中很多问题也没有修正，就只有一个白板特效。今天是假日的最后一天，所以需要有一个结果了，看来这次只能做首页了，乐观情况下需要把整个首页布局弄出来，再优化了。回顾特效，为什么absolute我们回顾下之前的几个特效，无论是导航上跟着走的背景，还是爆炸的图片，到昨天做的快速导航特效，他们全是采用绝对定位！然后来看看我们马阅读全文

posted @ 2013-05-01 16:07 叶小钗阅读(6165) 评论(18) 推荐(10)

【实战HTML5与CSS3 第二篇】绚丽的快速导航！

摘要：目录【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！【实战HTML5与CSS3 第二篇】绚丽的快速导航！【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)前言今天9点就起来了，因为下午出去有个聚会，所以就早点起来进行，否则这个进度有点吃紧啊，昨天初略的完成了导航以及爆炸的图片，这里来回顾下：1 导航为一个div背景跟着导航栏目移动，并有一定抖动感觉，这个完全是jquery的东西了，若是用css3我暂时没有想到解决方案；2 图片爆炸功能，这个功能就现在来说都是有很多问题的，都不能用瑕疵来说，第一效果不能达到我的要求，第二性能上恐怕有问题，这块阅读全文

posted @ 2013-05-01 01:28 叶小钗阅读(5164) 评论(14) 推荐(6)

【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！

摘要：目录【实战HTML5与CSS3 第一篇】初探水深，美丽的导航，绚丽的图片爆炸！！【实战HTML5与CSS3 第二篇】绚丽的快速导航！【实战HTML5与CSS3 第三篇】我第一个HTML5网页诞生了(提供源码)前言先八卦一下，我昨天离职了，把电脑也退了，离职前，我发了一封邮件给整个部门，陈述自己的不舍与团队管理问题（估计传说中的leader要抓狂了），然后就昏昏的回家了，所以昨天没有什么产出。最近经常有朋友惊叹我的发帖速度很快，其实是有原因的，我最近两周要离职，所以就不太理我那传说中的leader了，每天多出很多时间可以学习。但是，下周后便会入职一家新公司了，我已经有感觉进去一段时间会很忙，会很阅读全文

posted @ 2013-04-29 20:03 叶小钗阅读(5657) 评论(15) 推荐(15)

【CSS3初探之Media Queries】终于完成了的CSS3，我们来个终章总结！

摘要：前言无论如何，学到这里，我可以自豪的告诉自己，我HTML5与CSS3学完了，不管我现在还记得住多少，我确确实实将他们学完了，还做了不少demo。回想几个月前，我一直在纠结自己应该学习HTML5与CSS3，我应该加强js与css，却一直没有任何产出！但是，我最近在两个星期就完成了HTML5与CSS3的初步学习，就此慢慢迈入HTML5与CSS3的大门，而且重新找回了学习的感觉，这些都为一个目标：两年内，我要成为国内优秀的前端工程师！我就发现理想与目标的力量是不可评估的，自从我有了明确的目标后，感觉做什么事都比较有干劲，我相信不久的将来我一定可以实现自己的目标！！！好了，会话结束，我们来看看今天的主阅读全文

posted @ 2013-04-27 14:16 叶小钗阅读(974) 评论(1) 推荐(0)

【CSS3初探之变形与动画】令人惊叹的CSS3

摘要：前言这个标题比较狗血了，我一直知道CSS3可以做很多事情，但是我昨天看到一个人用CSS3华丽的画了一个太极八卦！若是这个还可以接受，那么我今天就看见一个人用CSS3画了一个叮当猫！！！我突然就在想，你们究竟要闹哪样，实在太BT了！我在想我最近几天是不是应该试试呢？虽然我CSS比较水了。。。CSS3中的变形在CSS3中，可以利用transform功能来实现文字或者图像的旋转、缩放、倾斜、移动这四种变形处理。transform基础知识在CSS3中，通过transform属性来达到功能需求，我们这里来看一个例子：<html xmlns="http://www.w3.org/1999/ 阅读全文

posted @ 2013-04-27 11:49 叶小钗阅读(2509) 评论(9) 推荐(2)

摘要：PS:注意标题党哦前言本章主要介绍CSS3中与背景和边框相关的一些样式，其中包含与背景相关的属性，比如如何在一个元素背景中使用多个图片文件，如何绘制圆角边框以及如何给边框添加图片。这章的知识点都是很有意义的，是我们一定会用到的知识点，所以学习本章内容后需掌握：1 背景相关属性：background-clip、background-origin、background-size以及background-break2 如何在背景中使用多个图片完成负责背景的图像绘制3 设计圆角4 图像边框PS：奇葩的一天：今天算是我工作这么久以来最奇葩的一天，因为今天发生了两件事情：1 传说中的leader主动找我吵阅读全文

posted @ 2013-04-24 22:56 叶小钗阅读(2804) 评论(20) 推荐(3)

【CSS3初探之盒相关样式】我们一人一个框。。。

摘要：前言本章将介绍CSS3中各种盒的知识点；主要包含以下内容：CSS3中各种各样盒的类型概念、浏览器支持情况；当盒中内容超出容纳范围时，如何利用属性来让浏览器按照自己想要的方式对盒中内容进行显示；掌握给盒添加阴影的属性；掌握几种“box-sizing”属性值的不同含义，能够正确的使用box-sizing属性来定义样式中给定的元素的宽度值和高度值中是否包含内部补白区域，以及边框的高度和宽度；盒的类型inline-blockcss中我们使用display来定义盒的类型，总体上分为block与inline类型。css2.1追加了一个盒类型：inline-block，他属于block类型之一，但在显示上具阅读全文

posted @ 2013-04-23 20:17 叶小钗阅读(742) 评论(2) 推荐(0)

【CSS3初探之字体、文本相关】让人开不了始的CSS3。。。

摘要：前言2010年MIX大会上微软的工程师在介绍IE9时，以前端角度讲互联网发展分为了三个阶段：1 以内容为主的web1.0网络，前端主流技术为html与css2 以ajax为首的异步数据加载技术，热门技术是js/dom/异步数据请求3 便是即将迎来的HTML5+CSS3的时代PS：我记得大概08年的时候，ajax便在大事宣扬，但我私下发现周围会的人真心不多，应用也不多！！！到今天5年过去了，你页面不是ajax的都不好意思拿出来说，于是我在想5年后若是页面不是html5的，好意思拿出来说吗？？？因为，我css水平比较水，所以学习CSS3时候也顺便复习下css2的东西，真是一举两得啊！因为这个系列都阅读全文

posted @ 2013-04-22 23:29 叶小钗阅读(1749) 评论(6) 推荐(3)

随笔分类 - HTML5&CSS3