摘要：
在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。 demo地址：http://www.paulrhayes.com/experiments/cube-3d/ demo下载地址：animated-css3-cube.zip 下面我们开始介绍如何制作。 html：<div id="experiment"> <div id="cube"> <div class="face one"> One face ... 阅读全文
摘要：
今天读了篇关于如何使用css3创建3d四面体的文章，觉的相当不错，所以拿出来和大家分享一下。原文地址：http://www.paulrhayes.com/2010-10/css-tetrahedron/。 demo预览地址：http://www.paulrhayes.com/experiments/pyramid/。 首先要和大家分享的是，如何使用div+css创建三角形。在这里我先把相关代码粘贴出来，然后再为大家讲解原理。 html：<div id="pyramid"> <div></div></div> css：<s 阅读全文
摘要：
今天我们将介绍，如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后，页面中的骑手和马匹将会运动起来，http://www.mycookingroom.com/demo/google-doodle-animation-in-css3-without-javascript.html。 这里需要强调的一点是，ie不支持css3的动画属性，再次抱怨下万恶的ie。但是我们不能以此为理由不去拥抱css3。 我们先来看html代码。<!DOCTYPE html><html><head> <title></title> 阅读全文
摘要：
介绍 低层次的语言，如C，具有低级别的内存管理命令，如：malloc()和free()，需要开发者手工释放内存。然而像javascript这样的高级语言情况则不同，对象（objects, strings 等）创建的时候分配内存，当他们不在使用的时候内存会被自动回收，这个自动回收的过程被称为垃圾回收。因为垃圾回收的存在，让javascript等高级语言开发者产生了一个错误的认识，以为可以不用关心内存管理。 内存生命周期 不管什么样的编程语言，内存的生命周期基本上是一致的。分配你需要的内存使用他进行读写操作当内存不需要的时候，释放资源 步骤1和步骤2对于所有语言都一样，能明显觉察到。至... 阅读全文
摘要：
本文将深入的研究当你输入一个网址的时候，后台到底发生了一件件什么样的事～1. 首先嘛，你得在浏览器里输入网址:2. 浏览器查找域名的IP地址导航的第一步是通过访问的域名找出其IP地址。DNS查找过程如下：浏览器缓存 –浏览器会缓存DNS记录一段时间。 有趣的是，操作系统没有告诉浏览器储存DNS记录的时间，这样不同浏览器会储存个自固定的一个时间（2分钟到30分钟不等）。系统缓存– 如果在浏览器缓存里没有找到需要的记录，浏览器会做一个系统调用（windows里是gethostbyname）。这样便可获得系统缓存中的记录。路由器缓存– 接着，前面的查询请求发向路由器，它一般会有自己的DNS缓存。IS 阅读全文
摘要：
原文地址：http://blog.jobbole.com/9189/让Web开发人员的生活尽可能轻松和高效，这是Firefox一直坚持的目标之一。通过提供工具和可扩展的web浏览器，让开发人员能够创造出令人惊奇的东西。Firefox自带的开发工具我们致力于开发一系列包含在Firefox内的开发工具。它们在Developer Tools in Firefox Aurora 10中有更详细的描述，有了它们我们就能做出一些很有趣的事。我们对大量的用户接口和编码方式进行测试和评估，从而找出在页面中最理想的编码方式。如果你安装了Firefox Aurora，你现在就可以试试！让我们知道你的想法。继续关注 阅读全文
摘要：
原文地址：http://www.cnblogs.com/cnwebdeveloper/articles/2234423.html浏览器可以被认为是使用最广泛的软件，本文将介绍浏览器的工作原理，我们将看到，从你在地址栏输入google.com到你看到google主页过程中都发生了什么。将讨论的浏览器今天，有五种主流浏览器——IE、Firefox、Safari、Chrome及Opera。本文将基于一些开源浏览器的例子——Firefox、 Chrome及Safari，Safari是部分开源的。根据W3C(World Wide Web Consortium 万维网联盟)的浏览器统计数据，当前(2011 阅读全文
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787555.html 从事过iphone响应式设计的人，一定清楚iphone safari浏览器viewport 缩放的bug。当你将viewport的宽度设计为设备宽度，并将iphone旋转到landscape 视图的时候，bug就会发生。你可以使用iphone访问demo地址，将视图从portrait 切换到 landscape，来查看该bug。今天我们将尝试修复这个问题。 问题 下面截图展示了该bug。 解决方案1：使用Meta标签快读修复（... 阅读全文
摘要：
最近在翻看John Resig的大作《ProJavaScriptTechniques》，里面讲到了如何做javascript的类型判断的问题。文中介绍了两种方式，一种是使用typeof，另一种是使用constructor。略感遗憾的是作为jquery的作者，他尽然没有介绍jquery使用的类型判断方式。不过没有关系，我在这里给大家一起总结下。 在这里我首先像大家推荐一个很好用的在线编辑器：http://jsfiddle.net/。他提供了jquery、mootools、prototype和YUI三个主流js框架的各个版本，当你需要编写简单的js测试程序的时候可以直接使用它。省去了打开编辑... 阅读全文
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787559.html 响应式web设计现在已经不是一个难事了，如果你还不熟悉他，可以参看我的文章《HTML5实践 -- 流式响应式设计》。如果你是一个初学者，可能响应式设计对你来说有点发杂，但实际上他比你想象的要简单的多。为了方便你更快的学习响应式设计，我特意写了这个教程，通过简单的三个步骤你就能掌握响应式设计的基本逻辑和media queries（假设你掌握css知识）。 demo预览地址：http://webdesignerwall.com/demo/re... 阅读全文
摘要：
转载请注明原文地址：http://www.cnblogs.com/softlover/archive/2012/11/25/2787558.html 当我编码Elemin Theme（我最近设计的一个响应式的站点）的时候，我遇到的一个跳帧就是，如何能让嵌入式的视频在尺寸变化上变得更加灵活。使用max-width:100% 和height:auto可以让html5的video标签很好的工作，但是这个解决方案不适用于iframe 或者 object标签的内嵌代码。通过几小时的寻找资料和实验，我最终找到了解决办法。当你在进行响应式设计的时候，这一css技巧能派上用场。你可以访问最终demo地址... 阅读全文
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779900.html 大家都知道viewport标签对于响应式设计的意义，但是你们可能不清楚，他对于非响应式设计也有相当的作用。如果你的站点还是非响应式的，那么通过本文你将学会，如何使用viewport标签增强你站点在mobile设备上的显示效果。 Viewport标签的一般使用 Viewport meta标签一般用在响应式设计中，用来设计mobile设备viewport的宽度和initial-scale。<meta name="viewport&qu 阅读全文
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/21/2781388.html 现在屏幕分辨率的范围很大，从320px (iPhone) 到 2560px (大型显示器)，甚至更大。用户也不只是使用台式电脑访问web站点了，他使用手机、笔记本电脑、平板电脑。所以传统的设置网站宽度为固定值，已经不能满足需要了。web设计需要适应这种新要求，页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍，如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。 demo预览地址：htt... 阅读全文
摘要：
转载请注明原创地址：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设置另外一种样式。这个功能相当强大，你可以不修改页面内容的情况下，为不同设备提供不... 阅读全文
摘要：
原文地址：http://dudo.org/archives/2009060611295.htmlGoogle近日推出了一款网站性能优化工具：Page Speed（http://code.google.com/speed/page-speed/）。它旨在帮助站长与网站开发者分析网站中存在的性能方面的问题，并有针对性地提出改进意见。Page Speed在功能方面极其类似于Yahoo!的网站性能优化YSlow，不过YSlow要比Page Speed推出早得的多。它们都是基于Firebug的Fireffox插件，使用方法也类似。这里我主要介绍一下Google新推出的Page Speed的使用，对Ysl 阅读全文
摘要：
原文地址：http://dudo.org/archives/2008051417218.html英文地址：http://developer.yahoo.com/performance/rules.html中文地址：http://www.dudo.org/article.asp?id=216 在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则，除此之外，JavaScript和CSS也是我们页面中经常用到的内容，对它们的优化也提高网站性能的重要方面：CSS：把样式表置于顶部避免使用CSS表达式（Expression）使用外部JavaScript和CSS削减JavaScri 阅读全文
摘要：
原文地址：http://dudo.org/archives/2008051511220.html英文地址：http://developer.yahoo.com/performance/rules.html中文地址：http://www.dudo.org/article.asp?id=218 我们在前面的几节中分别讲了提高网站性能中内容、服务器、JavaScript和CSS等方面的内容。除此之外，图片和Coockie也是我们网站中几乎不可缺少组成部分，此外随着移动设备的流行，对于移动应用的优化也十分重要。这主要包括：Coockie:减小Cookie体积对于页面内容使用无coockie域名图片：优 阅读全文
摘要：
原文地址：http://dudo.org/archives/2008051322217.html英文地址：http://developer.yahoo.com/performance/rules.html中文地址：http://www.dudo.org/article.asp?id=215在本系列的第一节中，讲了提高网站性能中网站“内容”有关的10条原则。除了在网站在内容上的改进外，在网站服务器端上也有需要注意和改进的地方，它们包括：使用内容分发网络为文件头指定Expires或Cache-ControlGzip压缩文件内容配置ETag尽早刷新输出缓冲使用GET来完成AJAX请求11、使用内容分 阅读全文
摘要：
原文地址：http://dudo.org/archives/2008051211216.html英文地址：http://developer.yahoo.com/performance/rules.html中文地址：http://www.dudo.org/article.asp?id=214 Yahoo!的Exceptional Performance团队为改善Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。Excetional Performance团队总结出了一系列可以提高网站速度的方法。可. 阅读全文
摘要：
转载请注明原创地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779893.html 在上一讲中，我们的解决方案使用到了jquery去创建一个span标签。在这一讲中我们将用一种更好的解决方式，使用:before 和 :after 伪类。:before经常会用到，他可以用来添加额外的元素。 demo预览地址：http://webdesignerwall.com/demo/decorative-gallery-2/ HTML 下面是一个ul列表代表的图片画廊。<ul class="gallery clip" 阅读全文